From 2323fc273f965e725fa589f4defb8d7d717770fb Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Fri, 17 Dec 2021 18:45:32 +0100 Subject: [PATCH] Show chat without identity (#157) --- .../src/components/ActivityCenter.tsx | 4 +- .../src/components/Channels/EmptyChannel.tsx | 3 +- packages/react-chat/src/components/Chat.tsx | 6 +- .../src/components/Chat/ChatCreation.tsx | 39 ++--- .../components/Chat/ChatMessageContent.tsx | 8 +- .../react-chat/src/components/ChatLoader.tsx | 11 +- .../src/components/Form/ContactMenu.tsx | 15 +- .../src/components/Form/IdentityLoader.tsx | 10 +- .../src/components/Icons/ColorChatIcon.tsx | 148 ++++++++++++++++++ .../src/components/Members/Member.tsx | 4 +- .../src/components/Members/MembersList.tsx | 18 ++- .../src/components/Messages/UiMessage.tsx | 10 +- .../src/components/Modals/ProfileModal.tsx | 15 +- .../react-chat/src/components/ReactChat.tsx | 17 +- .../components/UserCreation/UserCreation.tsx | 68 ++++++++ .../src/contexts/identityProvider.tsx | 4 +- .../contexts/userCreationStateProvider.tsx | 29 ++++ .../src/hooks/messenger/useContacts.ts | 2 +- .../src/hooks/messenger/useGroupChats.ts | 19 +-- .../src/hooks/messenger/useMessenger.ts | 8 +- .../react-chat/src/utils/createMessenger.ts | 2 +- packages/status-communities/src/contacts.ts | 28 ++-- packages/status-communities/src/messenger.ts | 36 +++-- 23 files changed, 396 insertions(+), 108 deletions(-) create mode 100644 packages/react-chat/src/components/Icons/ColorChatIcon.tsx create mode 100644 packages/react-chat/src/components/UserCreation/UserCreation.tsx create mode 100644 packages/react-chat/src/contexts/userCreationStateProvider.tsx diff --git a/packages/react-chat/src/components/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter.tsx index 2a133056..179a0d2a 100644 --- a/packages/react-chat/src/components/ActivityCenter.tsx +++ b/packages/react-chat/src/components/ActivityCenter.tsx @@ -120,9 +120,9 @@ function ActivityMessage({ }} > {" "} - {contact.customName ?? activity.user.slice(0, 10)} + {contact?.customName ?? activity.user.slice(0, 10)} - {contact.customName && ( + {contact?.customName && ( {activity.user.slice(0, 5)}...{activity.user.slice(-3)} diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx index 9c966b53..8faabaf9 100644 --- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx +++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx @@ -34,7 +34,8 @@ export function EmptyChannel({ channel }: EmptyChannelProps) { ) : channel.type === "group" ? ( - {utils.bufToHex(identity.publicKey)} created a group with{" "} + {identity && {utils.bufToHex(identity.publicKey)}}{" "} + created a group with{" "} {groupName.slice(groupName.length - 1)} and{" "} {groupName.at(-1)} diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 64bad96c..2fdeb6de 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import styled from "styled-components"; import { ChatState, useChatState } from "../contexts/chatStateProvider"; +import { useIdentity } from "../contexts/identityProvider"; import { useNarrow } from "../contexts/narrowProvider"; import { Channels } from "./Channels/Channels"; @@ -13,6 +14,7 @@ import { CommunityModal } from "./Modals/CommunityModal"; import { EditModal } from "./Modals/EditModal"; import { ProfileModal } from "./Modals/ProfileModal"; import { ToastMessageList } from "./ToastMessages/ToastMessageList"; +import { UserCreation } from "./UserCreation/UserCreation"; function Modals() { return ( @@ -28,13 +30,13 @@ export function Chat() { const [state] = useChatState(); const [showMembers, setShowMembers] = useState(false); const narrow = useNarrow(); - + const identity = useIdentity(); return ( {!narrow && ( - + {identity ? : } )} {state === ChatState.ChatBody && ( diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 09831db3..f8afabe4 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -46,10 +46,12 @@ export function ChatCreation({ }; const createChat = (group: string[]) => { - const newGroup = group.slice(); - newGroup.push(bufToHex(identity.publicKey)); - group.length > 1 ? createGroupChat(newGroup) : createGroupChat(newGroup); - setChatState(ChatState.ChatBody); + if (identity) { + const newGroup = group.slice(); + newGroup.push(bufToHex(identity.publicKey)); + group.length > 1 ? createGroupChat(newGroup) : createGroupChat(newGroup); + setChatState(ChatState.ChatBody); + } }; return ( @@ -108,20 +110,21 @@ export function ChatCreation({ Contacts - {Object.values(contacts) - .filter( - (e) => - e.id != bufToHex(identity.publicKey) && - !styledGroup.includes(e.id) - ) - .map((contact) => ( - addMember(contact.id)} - /> - ))} + {identity && + Object.values(contacts) + .filter( + (e) => + e.id != bufToHex(identity.publicKey) && + !styledGroup.includes(e.id) + ) + .map((contact) => ( + addMember(contact.id)} + /> + ))} )} diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx index efb78169..38cddc18 100644 --- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx @@ -27,12 +27,14 @@ export function Mention({ id, setMentioned, className }: MentionProps) { if (!contact) return <>{id}; useEffect(() => { - if (contact.id === utils.bufToHex(identity.publicKey)) setMentioned(true); - }, [contact.id]); + if (identity) { + if (contact.id === utils.bufToHex(identity.publicKey)) setMentioned(true); + } + }, [contact.id, identity]); return ( setShowMenu(!showMenu)} className={className}> - {`@${contact.customName ?? contact.id}`} + {`@${contact?.customName ?? contact.id}`} {showMenu && } ); diff --git a/packages/react-chat/src/components/ChatLoader.tsx b/packages/react-chat/src/components/ChatLoader.tsx index a3a6c8dc..4583d9d3 100644 --- a/packages/react-chat/src/components/ChatLoader.tsx +++ b/packages/react-chat/src/components/ChatLoader.tsx @@ -4,6 +4,10 @@ import { Identity } from "status-communities/dist/cjs"; import { ChatStateProvider } from "../contexts/chatStateProvider"; import { IdentityProvider } from "../contexts/identityProvider"; import { MessengerProvider } from "../contexts/messengerProvider"; +import { + UserCreationState, + useUserCreationState, +} from "../contexts/userCreationStateProvider"; import { Chat } from "./Chat"; import { IdentityLoader } from "./Form/IdentityLoader"; @@ -14,8 +18,9 @@ interface ChatLoaderProps { export function ChatLoader({ communityKey }: ChatLoaderProps) { const [identity, setIdentity] = useState(undefined); + const [userCreationState] = useUserCreationState(); - if (identity) { + if (userCreationState === UserCreationState.NotCreating) return ( @@ -25,7 +30,9 @@ export function ChatLoader({ communityKey }: ChatLoaderProps) { ); - } else { + if (userCreationState === UserCreationState.Creating) { return ; } + + return null; } diff --git a/packages/react-chat/src/components/Form/ContactMenu.tsx b/packages/react-chat/src/components/Form/ContactMenu.tsx index af541a4b..047aa172 100644 --- a/packages/react-chat/src/components/Form/ContactMenu.tsx +++ b/packages/react-chat/src/components/Form/ContactMenu.tsx @@ -26,10 +26,13 @@ type ContactMenuProps = { export function ContactMenu({ id, setShowMenu }: ContactMenuProps) { const identity = useIdentity(); - const isUser = useMemo( - () => id === bufToHex(identity.publicKey), - [id, identity] - ); + const isUser = useMemo(() => { + if (identity) { + return id === bufToHex(identity.publicKey); + } else { + return false; + } + }, [id, identity]); const { setModal } = useModal(ProfileModalName); const { contact, setBlocked, setIsUntrustworthy } = useManageContact(id); @@ -40,10 +43,10 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) { - {contact.customName ?? id.slice(0, 10)} + {contact?.customName ?? id.slice(0, 10)} {contact.isUntrustworthy && } - {contact.customName && ( + {contact?.customName && ( ({contact.trueName}) )} diff --git a/packages/react-chat/src/components/Form/IdentityLoader.tsx b/packages/react-chat/src/components/Form/IdentityLoader.tsx index ce2b0918..68bdb409 100644 --- a/packages/react-chat/src/components/Form/IdentityLoader.tsx +++ b/packages/react-chat/src/components/Form/IdentityLoader.tsx @@ -2,6 +2,10 @@ import React, { useCallback, useEffect, useState } from "react"; import { Identity } from "status-communities/dist/cjs"; import styled from "styled-components"; +import { + UserCreationState, + useUserCreationState, +} from "../../contexts/userCreationStateProvider"; import { decryptIdentity, loadEncryptedIdentity, @@ -14,8 +18,8 @@ interface IdentityLoaderProps { export function IdentityLoader({ setIdentity }: IdentityLoaderProps) { const [password, setPassword] = useState(""); - // Test password for now - // Need design for password input + const state = useUserCreationState(); + const [encryptedIdentity, setEncryptedIdentity] = useState( loadEncryptedIdentity() ?? "" ); @@ -35,6 +39,7 @@ export function IdentityLoader({ setIdentity }: IdentityLoaderProps) { setWrongPassword(true); } else { setIdentity(identity); + state[1](UserCreationState.NotCreating); } }, [encryptedIdentity, password]); @@ -42,6 +47,7 @@ export function IdentityLoader({ setIdentity }: IdentityLoaderProps) { const identity = Identity.generate(); await saveIdentity(identity, password); setIdentity(identity); + state[1](UserCreationState.NotCreating); }, [encryptedIdentity, password]); return ( diff --git a/packages/react-chat/src/components/Icons/ColorChatIcon.tsx b/packages/react-chat/src/components/Icons/ColorChatIcon.tsx new file mode 100644 index 00000000..2b02f8b6 --- /dev/null +++ b/packages/react-chat/src/components/Icons/ColorChatIcon.tsx @@ -0,0 +1,148 @@ +import React from "react"; +import styled from "styled-components"; + +type ColorChatSvgProps = { + width: number; + height: number; +}; + +export function ColorChatSvg({ width, height }: ColorChatSvgProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export const ColorChatIcon = () => { + return ; +}; + +const Icon = styled(ColorChatSvg)` + & > path { + fill: ${({ theme }) => theme.tertiary}; + } + + &:hover > path { + fill: ${({ theme }) => theme.bodyBackgroundColor}; + } +`; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index 175e562e..e3c39652 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -28,7 +28,7 @@ export function Member({ switchShowMembers?.(); setChannel({ id: contact.id, - name: contact.customName ?? contact.trueName, + name: contact?.customName ?? contact.trueName, type: "dm", description: "Contact", members: [contact], @@ -47,7 +47,7 @@ export function Member({ {showMenu && } - {contact.customName ?? contact.id} + {contact?.customName ?? contact.id} ); } diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index 289041b7..1a0c110d 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -16,13 +16,15 @@ interface MembersListProps { export function MembersList({ switchShowMembers }: MembersListProps) { const { contacts } = useMessengerContext(); const identity = useIdentity(); - const userContacts = useMemo( - () => - Object.values(contacts).filter( + const userContacts = useMemo(() => { + if (identity) { + return Object.values(contacts).filter( (e) => e.id != bufToHex(identity.publicKey) - ), - [contacts, identity] - ); + ); + } else { + return Object.values(contacts); + } + }, [contacts, identity]); const onlineContacts = useMemo( () => userContacts.filter((e) => e.online), [userContacts] @@ -40,7 +42,9 @@ export function MembersList({ switchShowMembers }: MembersListProps) { - {utils.bufToHex(identity.publicKey)} + {identity && ( + {utils.bufToHex(identity.publicKey)} + )} {onlineContacts.length > 0 && ( diff --git a/packages/react-chat/src/components/Messages/UiMessage.tsx b/packages/react-chat/src/components/Messages/UiMessage.tsx index da0e947d..83cd3640 100644 --- a/packages/react-chat/src/components/Messages/UiMessage.tsx +++ b/packages/react-chat/src/components/Messages/UiMessage.tsx @@ -77,7 +77,11 @@ export function UiMessage({ channel: channel, }, ]); - if (quote && quote.sender === utils.bufToHex(identity.publicKey)) + if ( + quote && + identity && + quote.sender === utils.bufToHex(identity.publicKey) + ) setActivities((prev) => [ ...prev, { @@ -119,9 +123,9 @@ export function UiMessage({ {" "} - {contact.customName ?? message.sender.slice(0, 10)} + {contact?.customName ?? message.sender.slice(0, 10)} - {contact.customName && ( + {contact?.customName && ( {message.sender.slice(0, 5)}...{message.sender.slice(-3)} diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx index 2d85e124..e497b229 100644 --- a/packages/react-chat/src/components/Modals/ProfileModal.tsx +++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx @@ -47,10 +47,13 @@ export const ProfileModal = () => { const { setModal } = useModal(ProfileModalName); const identity = useIdentity(); - const isUser = useMemo( - () => id === bufToHex(identity.publicKey), - [id, identity] - ); + const isUser = useMemo(() => { + if (identity) { + return id === bufToHex(identity.publicKey); + } else { + return false; + } + }, [id, identity]); const [renaming, setRenaming] = useState(renamingState ?? false); @@ -98,7 +101,7 @@ export const ProfileModal = () => { )} - {contact.customName ?? id.slice(0, 10)} + {contact?.customName ?? id.slice(0, 10)} {contact.isUntrustworthy && } {!renaming && ( @@ -108,7 +111,7 @@ export const ProfileModal = () => { )} - {contact.customName && ( + {contact?.customName && ( {contact.trueName} )} diff --git a/packages/react-chat/src/components/ReactChat.tsx b/packages/react-chat/src/components/ReactChat.tsx index 4af8590f..5c84a5be 100644 --- a/packages/react-chat/src/components/ReactChat.tsx +++ b/packages/react-chat/src/components/ReactChat.tsx @@ -7,6 +7,7 @@ import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider"; import { ModalProvider } from "../contexts/modalProvider"; import { NarrowProvider } from "../contexts/narrowProvider"; import { ToastProvider } from "../contexts/toastProvider"; +import { UserCreationStateProvider } from "../contexts/userCreationStateProvider"; import { Metadata } from "../models/Metadata"; import { GlobalStyle } from "../styles/GlobalStyle"; import { Theme } from "../styles/themes"; @@ -31,13 +32,15 @@ export function ReactChat({ - - - - -