Add dialogues (#93)

packages/react-chat/src/components/Channels/Channels.tsx

@@ -11,6 +11,7 @@ interface ChannelsProps {
   onCommunityClick: (val: ChannelData) => void;
   activeChannelId: string;
   channels: ChannelData[];
+  membersList: string[];
 }
 
 export function Channels({
@@ -19,6 +20,7 @@ export function Channels({
   clearNotifications,
   activeChannelId,
   channels,
+  membersList,
 }: ChannelsProps) {
   useEffect(() => {
     const channel = channels.find((channel) => channel.id === activeChannelId);
@@ -47,6 +49,30 @@ export function Channels({
           }}
         />
       ))}
+
+      {membersList.length > 0 && (
+        <Dialogues>
+          {membersList.map((member) => (
+            <Channel
+              key={member}
+              channel={{
+                id: member,
+                name: member.slice(0, 10),
+                description: "Contact",
+              }}
+              isActive={member === activeChannelId}
+              isMuted={false}
+              onClick={() => {
+                onCommunityClick({
+                  id: member,
+                  name: member.slice(0, 10),
+                  description: "Contact",
+                });
+              }}
+            />
+          ))}
+        </Dialogues>
+      )}
     </ChannelList>
   );
 }
@@ -60,3 +86,23 @@ export const ChannelList = styled.div`
     width: 0;
   }
 `;
+
+const Dialogues = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  margin-top: 16px;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 24px);
+    height: 1px;
+    background-color: ${({ theme }) => theme.primary};
+    opacity: 0.1;
+  }
+`;

packages/react-chat/src/components/Channels/EmptyChannel.tsx

@@ -24,9 +24,17 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
         </ChannelLogoEmpty>
         <ChannelNameEmpty className={"active"}>{channel.name}</ChannelNameEmpty>
       </ChannelInfoEmpty>
+
+      {channel.description === "Contact" ? (
+        <EmptyText>
+          Any messages you send here are encrypted and can only be read by you
+          and <span>{channel.name}</span>.
+        </EmptyText>
+      ) : (
         <EmptyText>
           Welcome to the beginning of the <span>#{channel.name}</span> channel!
         </EmptyText>
+      )}
     </Wrapper>
   );
 }
@@ -62,6 +70,8 @@ const ChannelNameEmpty = styled(ChannelName)`
 const EmptyText = styled.p`
   display: inline-block;
   color: ${({ theme }) => theme.secondary};
+  max-width: 310px;
+  text-align: center;
 
   & > span {
     color: ${({ theme }) => theme.primary};

packages/react-chat/src/components/Chat.tsx

@@ -36,6 +36,8 @@ export function Chat({
   });
   const [showMembers, setShowMembers] = useState(true);
   const [showChannels, setShowChannels] = useState(true);
+  const [membersList, setMembersList] = useState([]);
+
   const narrow = useNarrow();
 
   const {
@@ -110,6 +112,7 @@ export function Chat({
             onCommunityClick={(e) => setActiveChannel(e)}
             activeChannelId={activeChannel?.id ?? ""}
             channels={channels}
+            membersList={membersList}
           />
         </ChannelsWrapper>
       )}
@@ -132,9 +135,15 @@ export function Chat({
         loadingMessages={loadingMessages}
         clearNotifications={clearNotifications}
         channels={channels}
+        membersList={membersList}
+        setMembersList={setMembersList}
       />
       {showMembers && !narrow && (
-        <Members community={communityData} setShowChannels={setShowChannels} />
+        <Members
+          community={communityData}
+          setShowChannels={setShowChannels}
+          setMembersList={setMembersList}
+        />
       )}
       <CommunityModal
         isVisible={isModalVisible}

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -39,6 +39,8 @@ interface ChatBodyProps {
   loadingMessages: boolean;
   clearNotifications: (id: string) => void;
   channels: ChannelData[];
+  membersList: string[];
+  setMembersList: any;
 }
 
 export function ChatBody({
@@ -60,6 +62,8 @@ export function ChatBody({
   loadingMessages,
   clearNotifications,
   channels,
+  membersList,
+  setMembersList,
 }: ChatBodyProps) {
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
@@ -154,6 +158,7 @@ export function ChatBody({
               setShowChannels={setShowChannelsList}
               activeChannelId={activeChannelId}
               clearNotifications={clearNotifications}
+              membersList={membersList}
             />
           )}
           {showMembersList && narrow && (
@@ -161,6 +166,7 @@ export function ChatBody({
               community={community}
               setShowChannels={setShowChannelsList}
               setShowMembersList={setShowMembersList}
+              setMembersList={setMembersList}
             />
           )}
         </>

packages/react-chat/src/components/Members/Member.tsx

@@ -7,9 +7,10 @@ import { UserIcon } from "../Icons/UserIcon";
 
 interface MemberProps {
   member: string;
-  isOnline: boolean;
+  isOnline?: boolean;
   setShowChannels: (val: boolean) => void;
   setShowMembers?: (val: boolean) => void;
+  setMembersList?: any;
 }
 
 export function Member({
@@ -17,6 +18,7 @@ export function Member({
   isOnline,
   setShowChannels,
   setShowMembers,
+  setMembersList,
 }: MemberProps) {
   const narrow = useNarrow();
 
@@ -25,11 +27,22 @@ export function Member({
     if (setShowMembers) setShowMembers(false);
   }, [setShowMembers]);
 
+  const startDialog = (member: string) => {
+    setMembersList((prevMembers: string[]) => {
+      if (prevMembers.find((chat) => chat === member)) {
+        return prevMembers;
+      } else {
+        return [...prevMembers, member];
+      }
+    });
+    setShowChannels(true);
+  };
+
   return (
     <MemberData
-      onClick={() =>
+      onClick={() => {
-        narrow && setShowMembers ? switchMemberList() : setShowChannels(true)
+        narrow && setShowMembers ? switchMemberList() : startDialog(member);
-      }
+      }}
     >
       <MemberIcon
         style={{

packages/react-chat/src/components/Members/Members.tsx

@@ -8,13 +8,22 @@ import { MembersList } from "./MembersList";
 interface MembersProps {
   community: CommunityData;
   setShowChannels: (val: boolean) => void;
+  setMembersList: any;
 }
 
-export function Members({ community, setShowChannels }: MembersProps) {
+export function Members({
+  community,
+  setShowChannels,
+  setMembersList,
+}: MembersProps) {
   return (
     <MembersWrapper>
       <MemberHeading>Members</MemberHeading>
-      <MembersList community={community} setShowChannels={setShowChannels} />
+      <MembersList
+        community={community}
+        setShowChannels={setShowChannels}
+        setMembersList={setMembersList}
+      />
     </MembersWrapper>
   );
 }

packages/react-chat/src/components/Members/MembersList.tsx

@@ -10,12 +10,14 @@ interface MembersListProps {
   community: CommunityData;
   setShowChannels: (val: boolean) => void;
   setShowMembers?: (val: boolean) => void;
+  setMembersList: any;
 }
 
 export function MembersList({
   community,
   setShowChannels,
   setShowMembers,
+  setMembersList,
 }: MembersListProps) {
   return (
     <MembersListWrap>
@@ -39,6 +41,7 @@ export function MembersList({
               isOnline={false}
               setShowChannels={setShowChannels}
               setShowMembers={setShowMembers}
+              setMembersList={setMembersList}
             />
           ))}
       </MemberCategory>
@@ -51,6 +54,7 @@ export function MembersList({
             isOnline={false}
             setShowChannels={setShowChannels}
             setShowMembers={setShowMembers}
+            setMembersList={setMembersList}
           />
         ))}
       </MemberCategory>

packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx

@@ -14,6 +14,8 @@ interface NarrowChannelsProps {
   setShowChannels: (val: boolean) => void;
   clearNotifications: (id: string) => void;
   channels: ChannelData[];
+
+  membersList: string[];
 }
 
 export function NarrowChannels({
@@ -24,6 +26,8 @@ export function NarrowChannels({
   setShowChannels,
   clearNotifications,
   channels,
+
+  membersList,
 }: NarrowChannelsProps) {
   return (
     <ListWrapper>
@@ -37,6 +41,7 @@ export function NarrowChannels({
         }}
         activeChannelId={activeChannelId}
         channels={channels}
+        membersList={membersList}
       />
     </ListWrapper>
   );

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -10,12 +10,14 @@ interface NarrowMembersProps {
   community: CommunityData;
   setShowChannels: (val: boolean) => void;
   setShowMembersList: (val: boolean) => void;
+  setMembersList: any;
 }
 
 export function NarrowMembers({
   community,
   setShowChannels,
   setShowMembersList,
+  setMembersList,
 }: NarrowMembersProps) {
   return (
     <ListWrapper>
@@ -24,6 +26,7 @@ export function NarrowMembers({
         community={community}
         setShowChannels={setShowChannels}
         setShowMembers={setShowMembersList}
+        setMembersList={setMembersList}
       />
     </ListWrapper>
   );

packages/react-chat/src/models/ChannelData.ts

@@ -1,7 +1,7 @@
 export type ChannelData = {
   id: string;
   name: string;
-  description: string;
+  description?: string;
   icon?: string;
   isMuted?: boolean;
 };