From b82bf0c0e5d884566f11e92209f573a94641b5cc Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Fri, 4 Feb 2022 15:56:30 +0100 Subject: [PATCH] Chat creation mode fixes (#219) --- .../src/components/Chat/ChatCreation.tsx | 126 +++++++++++++----- .../src/components/Members/Member.tsx | 1 - .../react-chat/src/components/SearchBlock.tsx | 20 ++- 3 files changed, 111 insertions(+), 36 deletions(-) diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 7ecd066..9d5e409 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/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 && ( setChatState(ChatState.ChatBody)} + onBtnClick={() => + setEditGroup + ? setEditGroup?.(false) + : setChatState(ChatState.ChatBody) + } className="narrow" /> )} @@ -137,33 +152,60 @@ export function ChatCreation({ Confirm {!narrow && } - + {!narrow && ( + + )} - {!setEditGroup && ( - - Contacts - - {userPK && - !query && - Object.values(contacts) - .filter( - (e) => e.id != userPK && !groupChatMembersIds.includes(e.id) - ) - .map((contact) => ( - addMember(contact.id)} - /> - ))} - - + {((!setEditGroup && groupChatMembers.length === 0) || narrow) && + Object.keys(contacts).length > 0 && ( + + Contacts + + {userPK && narrow + ? contactsList.map((contact) => ( + + addMember(contact.id)} + /> + + )) + : Object.values(contacts) + .filter( + (e) => + e.id != userPK && !groupChatMembersIds.includes(e.id) + ) + .map((contact) => ( + + addMember(contact.id)} + /> + + ))} + + + )} + {!setEditGroup && Object.keys(contacts).length === 0 && ( + + + You only can send direct messages to your Contacts.{" "} + + + {" "} + 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. + + )} + {!activeChannel && ( 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; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index cd81644..b84866f 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/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; diff --git a/packages/react-chat/src/components/SearchBlock.tsx b/packages/react-chat/src/components/SearchBlock.tsx index 4bba4a6..7b9dd0e 100644 --- a/packages/react-chat/src/components/SearchBlock.tsx +++ b/packages/react-chat/src/components/SearchBlock.tsx @@ -41,11 +41,9 @@ export const SearchBlock = ({ > {searchList.map((member) => ( - onClick(member.id)} - /> + + onClick(member.id)} /> + ))} @@ -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}; + } +`;