Leaving group (#120)

* Leaving group

* YArn fix

* Fix setting active channel group

* Fix leaving group

* Add community icon backgroud

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

@@ -81,7 +81,7 @@ export function Channels({
                 onClick={() => {
                   setActiveChannel({
                     id: group.join(""),
-                    name: group.join(", ").slice(0, 10),
+                    name: group.join(", "),
                     type: "group",
                   });
                   setCreateChat(false);

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

@@ -43,8 +43,7 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
         </EmptyTextGroup>
       ) : (
         <EmptyText>
-          Welcome to the beginning of the <span>#{channel.name}</span> <br />
-          channel!
+          Welcome to the beginning of the <span>#{channel.name}</span> channel!
         </EmptyText>
       )}
     </Wrapper>

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

@@ -130,6 +130,7 @@ export function ChatBody({
               setShowChannelMenu={setShowChannelMenu}
               setEditGroup={setEditGroup}
               onEditClick={onEditClick}
+              setGroupList={setGroupList}
             />
           )}
         </ChatTopbar>

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

@@ -15,9 +15,20 @@ export const CommunityIdentity = ({
   className,
 }: CommunityIdentityProps) => {
   const { communityData } = useMessengerContext();
+
   return (
     <Row className={className}>
-      <Logo src={communityData?.icon} alt={`${communityData?.name} logo`} />
+      <Logo
+        style={{
+          backgroundImage: communityData?.icon
+            ? `url(${communityData?.icon}`
+            : "",
+        }}
+      >
+        {" "}
+        {communityData?.icon === undefined &&
+          communityData?.name.slice(0, 1).toUpperCase()}
+      </Logo>
       <Column>
         <Name>{communityData?.name}</Name>
         <Subtitle>{subtitle}</Subtitle>
@@ -36,11 +47,22 @@ export const Column = styled.div`
   align-items: flex-start;
 `;
 
-const Logo = styled.img`
+const Logo = styled.div`
   width: 36px;
   height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   border-radius: 50%;
   margin-right: 8px;
+  background-color: ${({ theme }) => theme.tertiary};
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: ${({ theme }) => theme.iconTextColor};
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 20px;
 `;
 
 const Name = styled.p`

packages/react-chat/src/components/Form/ChannelMenu.tsx

@@ -22,6 +22,7 @@ interface ChannelMenuProps {
   setShowChannelMenu: (val: boolean) => void;
   setEditGroup: (val: boolean) => void;
   onEditClick: () => void;
+  setGroupList: any;
 }
 
 export const ChannelMenu = ({
@@ -31,9 +32,11 @@ export const ChannelMenu = ({
   setShowChannelMenu,
   setEditGroup,
   onEditClick,
+  setGroupList,
 }: ChannelMenuProps) => {
   const narrow = useNarrow();
-  const { clearNotifications } = useMessengerContext();
+  const { clearNotifications, setActiveChannel, channels } =
+    useMessengerContext();
 
   return (
     <DropdownMenu>
@@ -50,7 +53,12 @@ export const ChannelMenu = ({
       )}
       {channel.type === "group" && (
         <>
-          <MenuItem onClick={() => setEditGroup(true)}>
+          <MenuItem
+            onClick={() => {
+              setEditGroup(true);
+              setShowChannelMenu(false);
+            }}
+          >
             <AddMemberIconSvg width={16} height={16} />
             <MenuText>Add / remove from group</MenuText>
           </MenuItem>
@@ -80,7 +88,16 @@ export const ChannelMenu = ({
       {channel.type === "group" && (
         <MenuSection>
           {" "}
-          <MenuItem onClick={() => channel}>
+          <MenuItem
+            onClick={() => {
+              setGroupList((prevGroups: string[][]) => {
+                const idx = prevGroups.indexOf(channel.name.split(", "));
+                return idx >= 0 ? prevGroups.splice(idx, 1) : [];
+              });
+              setActiveChannel(channels[0]);
+              setShowChannelMenu(false);
+            }}
+          >
             <LeftIconSvg width={16} height={16} />
             <MenuText>Leave Group</MenuText>
           </MenuItem>