Fix group creation (#112)

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

@@ -66,7 +66,7 @@ export function Channel({
             ) : (
               "#"
             )}{" "}
-            {channel.name.slice(0, 10)}
+            {channel.name}
           </ChannelName>
           {activeView && (
             <ChannelDescription> {channel.description}</ChannelDescription>
@@ -103,8 +103,6 @@ export const ChannelInfo = styled.div`
 const ChannelTextInfo = styled.div`
   display: flex;
   flex-direction: column;
-  text-overflow: ellipsis;
-  overflow: hidden;
 `;
 
 export const ChannelLogo = styled.div`

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

@@ -12,7 +12,7 @@ interface ChannelsProps {
   activeChannelId: string;
   channels: ChannelData[];
   membersList: string[];
-  groupList: string[];
+  groupList: string[][];
   setCreateChat: (val: boolean) => void;
 }
 
@@ -66,20 +66,18 @@ export function Channels({
           {groupList.length > 0 &&
             groupList.map((group) => (
               <Channel
-                key={group}
+                key={group.join("")}
                 channel={{
-                  id: group,
-                  name: group,
+                  id: group.join(""),
+                  name: group.join(", "),
                   type: "group",
-                  description: "Contact",
                 }}
-                isActive={group === activeChannelId}
+                isActive={group.join("") === activeChannelId}
                 isMuted={false}
                 onClick={() => {
                   onCommunityClick({
-                    id: group,
-                    name: group.slice(0, 10),
-                    description: "Contact",
+                    id: group.join(""),
+                    name: group.join(", ").slice(0, 10),
                   });
                   setCreateChat(false);
                 }}

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

@@ -11,6 +11,8 @@ type EmptyChannelProps = {
 };
 
 export function EmptyChannel({ channel }: EmptyChannelProps) {
+  const groupName = channel.name.split(", ");
+
   return (
     <Wrapper>
       <ChannelInfoEmpty>
@@ -34,8 +36,9 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
         </EmptyText>
       ) : channel.type === "group" ? (
         <EmptyText>
-          You created a group with <span>{channel.name.slice(1, -1)}</span> and{" "}
-          <span>{channel.name.at(-1)}</span>
+          You created a group with{" "}
+          <span>{groupName.slice(groupName.length - 1)}</span> and{" "}
+          <span>{groupName.at(-1)}</span>
         </EmptyText>
       ) : (
         <EmptyText>

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

@@ -130,6 +130,7 @@ export function Chat({
       )}
       {createChat && communityData && (
         <ChatCreation
+          identity={identity}
           community={communityData}
           setMembersList={setMembersList}
           setGroupList={setGroupList}

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

@@ -35,7 +35,7 @@ interface ChatBodyProps {
   onEditClick: () => void;
   channels: ChannelData[];
   membersList: string[];
-  groupList: string[];
+  groupList: [][];
   setMembersList: any;
   setGroupList: any;
   setCreateChat: (val: boolean) => void;
@@ -88,6 +88,7 @@ export function ChatBody({
     <ChatBodyWrapper className={className}>
       {editGroup && community ? (
         <ChatCreation
+          identity={identity}
           community={community}
           setMembersList={setMembersList}
           setGroupList={setGroupList}
@@ -112,6 +113,7 @@ export function ChatBody({
                     />
                   </CommunityWrap>
                 )}
+
                 <Channel
                   channel={channel}
                   isActive={narrow ? showChannelsList : true}

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

@@ -1,14 +1,18 @@
 import React, { useState } from "react";
+import { Identity } from "status-communities/dist/cjs";
+import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
 import { ChannelData } from "../../models/ChannelData";
 import { CommunityData } from "../../models/CommunityData";
 import { buttonStyles } from "../Buttons/buttonStyle";
-import { Channel } from "../Channels/Channel";
 import { CrossIcon } from "../Icons/CrossIcon";
+import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 interface ChatCreationProps {
+  identity: Identity;
   community: CommunityData;
   setMembersList: any;
   setGroupList: any;
@@ -18,6 +22,7 @@ interface ChatCreationProps {
 }
 
 export function ChatCreation({
+  identity,
   community,
   setMembersList,
   setGroupList,
@@ -28,6 +33,8 @@ export function ChatCreation({
   const [query, setQuery] = useState("");
   const [styledGroup, setStyledGroup] = useState<string[]>([]);
 
+  const { contacts } = useMessengerContext();
+
   const addMember = (member: string) => {
     setStyledGroup((prevMembers: string[]) => {
       if (prevMembers.find((mem) => mem === member)) {
@@ -40,13 +47,14 @@ export function ChatCreation({
 
   const removeMember = (member: string) => {
     const idx = styledGroup.indexOf(member);
-    styledGroup.splice(idx, 1);
+    setStyledGroup(styledGroup.splice(idx, 1));
   };
 
   const createChat = (group: string[]) => {
     group.length > 1
-      ? (setGroupList((prevGroups: string[]) => {
-          [...prevGroups, group];
+      ? (setGroupList((prevGroups: string[][]) => {
+          prevGroups.push(group);
+          return prevGroups;
         }),
         setActiveChannel({
           id: group.join(""),
@@ -64,6 +72,7 @@ export function ChatCreation({
           id: group[0],
           name: group[0],
           type: "dm",
+          description: "Contact",
         }));
     setCreateChat(false);
   };
@@ -120,19 +129,16 @@ export function ChatCreation({
         <Contacts>
           <ContactsHeading>Contacts</ContactsHeading>
           <ContactsList>
-            {community.membersList.map((member) => (
-              <Channel
-                key={member}
-                channel={{
-                  id: member,
-                  name: member.slice(0, 10),
-                  type: "dm",
-                }}
-                isActive={false}
-                isMuted={false}
-                onClick={() => addMember(member)}
-              />
-            ))}
+            {contacts
+              .filter((e) => e.id != bufToHex(identity.publicKey))
+              .map((contact) => (
+                <Member
+                  key={contact.id}
+                  member={contact.id}
+                  isOnline={contact.online}
+                  onClick={() => addMember(contact.id)}
+                />
+              ))}
           </ContactsList>
         </Contacts>
       )}

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

@@ -9,9 +9,10 @@ import { UserIcon } from "../Icons/UserIcon";
 interface MemberProps {
   member: string;
   isOnline?: boolean;
-  setShowChannels: (val: boolean) => void;
+  setShowChannels?: (val: boolean) => void;
   setShowMembers?: (val: boolean) => void;
   setMembersList?: any;
+  onClick?: () => void;
 }
 
 export function Member({
@@ -20,11 +21,12 @@ export function Member({
   setShowChannels,
   setShowMembers,
   setMembersList,
+  onClick,
 }: MemberProps) {
   const narrow = useNarrow();
 
   const switchMemberList = useCallback(() => {
-    setShowChannels(false);
+    if (setShowChannels) setShowChannels(false);
     if (setShowMembers) setShowMembers(false);
   }, [setShowMembers]);
 
@@ -36,17 +38,17 @@ export function Member({
         return [...prevMembers, member];
       }
     });
-    setShowChannels(true);
+    if (setShowChannels) setShowChannels(true);
   };
 
   const [showMenu, setShowMenu] = useState(false);
 
+  const onMemberClick = () => {
+    narrow && setShowMembers ? switchMemberList() : startDialog(member);
+  };
+
   return (
-    <MemberData
-      onClick={() => {
-        narrow && setShowMembers ? switchMemberList() : startDialog(member);
-      }}
-    >
+    <MemberData onClick={onClick ? onClick : onMemberClick}>
       <MemberIcon
         style={{
           backgroundImage: "unset",
@@ -66,6 +68,7 @@ export const MemberData = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 16px;
+  cursor: pointer;
 `;
 
 export const MemberName = styled.p`

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

@@ -13,7 +13,7 @@ interface NarrowChannelsProps {
   setShowChannels: (val: boolean) => void;
   channels: ChannelData[];
   membersList: string[];
-  groupList: string[];
+  groupList: string[][];
   setCreateChat: (val: boolean) => void;
 }