Chat creation mode fixes (#219)
This commit is contained in:
Maria Rushkova
GitHub
parent
f531ccc0f7
commit
b82bf0c0e5
|
|
@ -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 &&
|
||||
!query &&
|
||||
Object.values(contacts)
|
||||
.filter(
|
||||
(e) => e.id != userPK && !groupChatMembersIds.includes(e.id)
|
||||
)
|
||||
.map((contact) => (
|
||||
{userPK && narrow
|
||||
? contactsList.map((contact) => (
|
||||
<Contact key={contact.id}>
|
||||
<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%;
|
||||
height: 100%;
|
||||
max-width: calc(100% - 250px);
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -41,11 +41,9 @@ export const SearchBlock = ({
|
|||
>
|
||||
<ContactsList>
|
||||
{searchList.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
contact={member}
|
||||
onClick={() => onClick(member.id)}
|
||||
/>
|
||||
<SearchContact key={member.id}>
|
||||
<Member contact={member} onClick={() => onClick(member.id)} />
|
||||
</SearchContact>
|
||||
))}
|
||||
</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};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue