From a03a102cd52186e6153a35533cc03f5fbf324ddc Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Wed, 10 Nov 2021 11:42:26 +0100 Subject: [PATCH] Fix groupChat creation, add bold channel on new message (#123) Signed-off-by: Szymon Szlachtowicz Co-authored-by: Szymon Szlachtowicz --- .../src/components/Channels/Channel.tsx | 4 +- .../src/components/Chat/ChatBody.tsx | 10 +--- .../src/components/Chat/ChatCreation.tsx | 11 +++-- .../src/components/Chat/ChatMessages.tsx | 48 ++++++++----------- .../src/components/Form/ChannelMenu.tsx | 8 ---- .../react-chat/src/components/SearchBlock.tsx | 28 +++++------ .../src/hooks/messenger/useMessenger.ts | 3 ++ 7 files changed, 45 insertions(+), 67 deletions(-) diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx index b5867e45..2f2ee5fd 100644 --- a/packages/react-chat/src/components/Channels/Channel.tsx +++ b/packages/react-chat/src/components/Channels/Channel.tsx @@ -29,7 +29,7 @@ export function Channel({ () => (narrow && !activeView ? "narrow" : activeView ? "active" : ""), [narrow] ); - + const mention = false; return ( - {notification && notification > 0 && !activeView && ( + {notification && notification > 0 && !activeView && mention && ( {notification} )} {isMuted && !notification && } diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 46d1432e..a114a446 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -43,8 +43,7 @@ export function ChatBody({ setGroupList, setCreateChat, }: ChatBodyProps) { - const { messenger, messages, activeChannel, communityData } = - useMessengerContext(); + const { messenger, activeChannel, communityData } = useMessengerContext(); const narrow = useNarrow(); const [showChannelsList, setShowChannelsList] = useState(false); const [showMembersList, setShowMembersList] = useState(false); @@ -125,7 +124,6 @@ export function ChatBody({ {showChannelMenu && ( {messenger && communityData ? ( - + ) : ( )} diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 2c6798f7..306ab21f 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -39,8 +39,7 @@ export function ChatCreation({ }; const removeMember = (member: string) => { - const idx = styledGroup.indexOf(member); - setStyledGroup(styledGroup.splice(idx, 1)); + setStyledGroup((prev) => prev.filter((e) => e != member)); }; const createChat = (group: string[]) => { @@ -117,12 +116,16 @@ export function ChatCreation({ Confirm - {!editGroup && !query && styledGroup.length === 0 && ( + {!editGroup && !query && ( Contacts {contacts - .filter((e) => e.id != bufToHex(identity.publicKey)) + .filter( + (e) => + e.id != bufToHex(identity.publicKey) && + !styledGroup.includes(e.id) + ) .map((contact) => ( (null); - const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId); + const loadingMessages = useChatScrollHandle(messages, ref, activeChannel.id); const { blockedUsers } = useBlockedUsers(); - const shownMessages = useMemo(() => { - return messages.filter((message) => !blockedUsers.includes(message.sender)); - }, [blockedUsers, messages.length]); + const shownMessages = useMemo( + () => messages.filter((message) => !blockedUsers.includes(message.sender)), + [blockedUsers, messages] + ); const [image, setImage] = useState(""); const [link, setLink] = useState(""); @@ -100,24 +92,22 @@ export function ChatMessages({ image={image} /> setLink("")} link={link} /> - + {loadingMessages && ( )} - {shownMessages.map((message, idx) => { - return ( - - ); - })} + {shownMessages.map((message, idx) => ( + + ))} ); } diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx index 217cb894..ff9bcb13 100644 --- a/packages/react-chat/src/components/Form/ChannelMenu.tsx +++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx @@ -4,10 +4,8 @@ import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; -import { ChatMessage } from "../../models/ChatMessage"; import { AddMemberIconSvg } from "../Icons/AddMemberIcon"; import { CheckSvg } from "../Icons/CheckIcon"; -import { ClearSvg } from "../Icons/ClearIcon"; import { EgitGroupSvg } from "../Icons/EditGroupIcon"; import { LeftIconSvg } from "../Icons/LeftIcon"; import { MembersSmallSvg } from "../Icons/MembersSmallIcon"; @@ -17,7 +15,6 @@ import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu"; interface ChannelMenuProps { channel: ChannelData; - messages: ChatMessage[]; switchMemberList: () => void; setShowChannelMenu: (val: boolean) => void; setEditGroup: (val: boolean) => void; @@ -27,7 +24,6 @@ interface ChannelMenuProps { export const ChannelMenu = ({ channel, - messages, switchMemberList, setShowChannelMenu, setEditGroup, @@ -81,10 +77,6 @@ export const ChannelMenu = ({ Mark as Read - messages.length === 0}> - - Clear History - {channel.type === "group" && ( {" "} diff --git a/packages/react-chat/src/components/SearchBlock.tsx b/packages/react-chat/src/components/SearchBlock.tsx index 5aa56856..c5936a2c 100644 --- a/packages/react-chat/src/components/SearchBlock.tsx +++ b/packages/react-chat/src/components/SearchBlock.tsx @@ -17,17 +17,13 @@ export const SearchBlock = ({ styledGroup, setStyledGroup, }: SearchBlockProps) => { - const { communityData } = useMessengerContext(); - - if (!communityData) { - return null; - } + const { contacts } = useMessengerContext(); const searchList = useMemo(() => { - return communityData.membersList - .filter((member) => member.includes(query)) - .filter((member) => !styledGroup.includes(member)); - }, [query, styledGroup, communityData.membersList]); + return contacts + .filter((member) => member.id.includes(query)) + .filter((member) => !styledGroup.includes(member.id)); + }, [query, styledGroup, contacts]); const addMember = (member: string) => { setStyledGroup((prevMembers: string[]) => { @@ -44,20 +40,20 @@ export const SearchBlock = ({ return ( - {communityData.membersList - .filter((member) => member.includes(query)) - .filter((member) => !styledGroup.includes(member)) + {contacts + .filter((member) => member.id.includes(query)) + .filter((member) => !styledGroup.includes(member.id)) .map((member) => ( addMember(member)} + onClick={() => addMember(member.id)} /> ))} diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index 9964eec0..65172d4f 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -148,6 +148,9 @@ export function useMessenger( const communityData = useMemo(() => { if (community?.description) { + Object.keys(community.description.proto.members).forEach((contact) => + contactsClass?.addContact(contact) + ); return { id: community.publicKeyStr, name: community.description.identity?.displayName ?? "",