From 15f64df575e5186cf3dc5e44fa3117cc4db533d1 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Fri, 14 Jan 2022 01:52:35 +0100
Subject: [PATCH] UI fixes group (#186)

* Scrolling input for group creation

* Add group description

* Adding members ro existing group
---
 .../src/components/Chat/ChatCreation.tsx        | 17 +++++++++++++++--
 .../src/hooks/messenger/useGroupChats.ts        |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx
index 8ee6c1e0..dc0e37f3 100644
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx
@@ -48,6 +48,7 @@ export function ChatCreation({
         }
       });
       setQuery("");
+      if (activeChannel) addMembers(styledGroup, activeChannel.id);
     },
     [setStyledGroup, styledGroup]
   );
@@ -86,9 +87,9 @@ export function ChatCreation({
             className="narrow"
           />
         )}
-        <InputBar>
+        <InputBar className={`${narrow && "narrow"}`}>
           <InputText>To:</InputText>
-          <StyledList>
+          <StyledList className={`${narrow && "narrow"}`}>
             {styledGroup.map((member) => (
               <StyledMember key={member}>
                 <StyledName>{member.slice(0, 10)}</StyledName>
@@ -182,6 +183,10 @@ const InputBar = styled.div`
   margin-right: 16px;
 
   ${textMediumStyles}
+
+  &.narrow {
+    overflow-x: hidden;
+  }
 `;
 
 const Input = styled.input`
@@ -216,6 +221,14 @@ const CreationBtn = styled.button`
 
 const StyledList = styled.div`
   display: flex;
+
+  &.narrow {
+    overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 `;
 
 const StyledMember = styled.div`
diff --git a/packages/react-chat/src/hooks/messenger/useGroupChats.ts b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
index 485949e3..cd154705 100644
--- a/packages/react-chat/src/hooks/messenger/useGroupChats.ts
+++ b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
@@ -40,6 +40,7 @@ export function useGroupChats(
           id: chat.chatId,
           name: chat.name ?? chat.chatId,
           type: "group",
+          description: `${chat.members.length} members`,
           members: members,
         };
         setChannels((prev) => {