Chat creation mode fixes (#219)

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

@@ -38,6 +38,17 @@ export function ChatCreation({
     [groupChatMembersIds, contacts]
   );
 
+  const contactsList = useMemo(() => {
+    return Object.values(contacts)
+      .filter(
+        (member) =>
+          member.id.includes(query) ||
+          member?.customName?.includes(query) ||
+          member.trueName.includes(query)
+      )
+      .filter((member) => !groupChatMembersIds.includes(member.id));
+  }, [query, groupChatMembersIds, contacts]);
+
   const setChatState = useChatState()[1];
 
   const addMember = useCallback(
@@ -94,7 +105,11 @@ export function ChatCreation({
       >
         {narrow && (
           <BackButton
-            onBtnClick={() => setChatState(ChatState.ChatBody)}
+            onBtnClick={() =>
+              setEditGroup
+                ? setEditGroup?.(false)
+                : setChatState(ChatState.ChatBody)
+            }
             className="narrow"
           />
         )}
@@ -137,33 +152,60 @@ export function ChatCreation({
           Confirm
         </CreationBtn>
         {!narrow && <ActivityButton className="creation" />}
+        {!narrow && (
           <SearchBlock
             query={query}
             discludeList={groupChatMembersIds}
             onClick={addMember}
           />
+        )}
       </CreationBar>
-      {!setEditGroup && (
+      {((!setEditGroup && groupChatMembers.length === 0) || narrow) &&
+        Object.keys(contacts).length > 0 && (
           <Contacts>
             <ContactsHeading>Contacts</ContactsHeading>
             <ContactsList>
-            {userPK &&
+              {userPK && narrow
-              !query &&
+                ? contactsList.map((contact) => (
-              Object.values(contacts)
+                    <Contact key={contact.id}>
-                .filter(
-                  (e) => e.id != userPK && !groupChatMembersIds.includes(e.id)
-                )
-                .map((contact) => (
                       <Member
-                    key={contact.id}
                         contact={contact}
                         isOnline={contact.online}
                         onClick={() => addMember(contact.id)}
                       />
+                    </Contact>
+                  ))
+                : Object.values(contacts)
+                    .filter(
+                      (e) =>
+                        e.id != userPK && !groupChatMembersIds.includes(e.id)
+                    )
+                    .map((contact) => (
+                      <Contact key={contact.id}>
+                        <Member
+                          contact={contact}
+                          isOnline={contact.online}
+                          onClick={() => addMember(contact.id)}
+                        />
+                      </Contact>
                     ))}
             </ContactsList>
           </Contacts>
         )}
+      {!setEditGroup && Object.keys(contacts).length === 0 && (
+        <EmptyContacts>
+          <EmptyContactsHeading>
+            You only can send direct messages to your Contacts.{" "}
+          </EmptyContactsHeading>
+          <EmptyContactsHeading>
+            {" "}
+            Send a contact request to the person you would like to chat with,
+            you will be able to chat with them once they have accepted your
+            contact request.
+          </EmptyContactsHeading>
+        </EmptyContacts>
+      )}
+
       {!activeChannel && (
         <ChatInput
           createChat={createChat}
@@ -175,11 +217,11 @@ export function ChatCreation({
 }
 
 const CreationWrapper = styled.div`
+  height: 100%;
   display: flex;
   flex-direction: column;
-  width: 79%;
+  justify-content: space-between;
-  height: 100%;
+  flex: 1;
-  max-width: calc(100% - 250px);
   background-color: ${({ theme }) => theme.bodyBackgroundColor};
   padding: 8px 16px;
 
@@ -192,8 +234,9 @@ const CreationWrapper = styled.div`
 const CreationBar = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
   position: relative;
+
   &.limit {
     align-items: flex-start;
   }
@@ -223,6 +266,7 @@ const InputBar = styled.div`
 
 const Input = styled.input`
   width: 100%;
+  min-width: 20px;
   background-color: ${({ theme }) => theme.inputColor};
   border: 1px solid ${({ theme }) => theme.inputColor};
   outline: none;
@@ -293,6 +337,17 @@ const Contacts = styled.div`
   overflow: auto;
 `;
 
+const Contact = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 12px 0 16px;
+  border-radius: 8px;
+
+  &:hover {
+    background: ${({ theme }) => theme.inputColor};
+  }
+`;
+
 const ContactsHeading = styled.p`
   color: ${({ theme }) => theme.secondary};
 
@@ -304,6 +359,17 @@ export const ContactsList = styled.div`
   flex-direction: column;
 `;
 
+const EmptyContacts = styled(Contacts)`
+  justify-content: center;
+  align-items: center;
+`;
+
+const EmptyContactsHeading = styled(ContactsHeading)`
+  max-width: 550px;
+  margin-bottom: 24px;
+  text-align: center;
+`;
+
 const SearchMembers = styled.div`
   position: relative;
   flex: 1;

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

@@ -116,7 +116,6 @@ export const MemberIcon = styled(IconBtn)`
 `;
 
 const Column = styled.div`
-  width: calc(100% - 69px);
   display: flex;
   flex-direction: column;
   margin-left: 8px;

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

@@ -41,11 +41,9 @@ export const SearchBlock = ({
     >
       <ContactsList>
         {searchList.map((member) => (
-          <Member
+          <SearchContact key={member.id}>
-            key={member.id}
+            <Member contact={member} onClick={() => onClick(member.id)} />
-            contact={member}
+          </SearchContact>
-            onClick={() => onClick(member.id)}
-          />
         ))}
       </ContactsList>
     </SearchContacts>
@@ -66,3 +64,15 @@ const SearchContacts = styled.div`
   max-height: 200px;
   overflow: auto;
 `;
+
+const SearchContact = styled.div`
+  width: 340px;
+  display: flex;
+  align-items: center;
+  padding: 12px 12px 0 16px;
+  border-radius: 8px;
+
+  &:hover {
+    background: ${({ theme }) => theme.inputColor};
+  }
+`;