Fix groupChat creation, add bold channel on new message (#123)

Signed-off-by: Szymon Szlachtowicz <szymon@TPL014-SS-MBP17.local>

Co-authored-by: Szymon Szlachtowicz <szymon@TPL014-SS-MBP17.local>

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 (
     <ChannelWrapper
       className={
@@ -73,7 +73,7 @@ export function Channel({
           )}
         </ChannelTextInfo>
       </ChannelInfo>
-      {notification && notification > 0 && !activeView && (
+      {notification && notification > 0 && !activeView && mention && (
         <NotificationBagde>{notification}</NotificationBagde>
       )}
       {isMuted && !notification && <MutedIcon />}

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

@@ -43,8 +43,7 @@ export function ChatBody({
   setGroupList,
   setCreateChat,
 }: ChatBodyProps) {
-  const { messenger, messages, activeChannel, communityData } =
+  const { messenger, activeChannel, communityData } = useMessengerContext();
-    useMessengerContext();
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
   const [showMembersList, setShowMembersList] = useState(false);
@@ -125,7 +124,6 @@ export function ChatBody({
           {showChannelMenu && (
             <ChannelMenu
               channel={activeChannel}
-              messages={messages}
               switchMemberList={switchMemberList}
               setShowChannelMenu={setShowChannelMenu}
               setEditGroup={setEditGroup}
@@ -140,11 +138,7 @@ export function ChatBody({
           {!showChannelsList && !showMembersList && (
             <>
               {messenger && communityData ? (
-                <ChatMessages
+                <ChatMessages />
-                  messages={messages}
-                  activeChannelId={activeChannel.id}
-                  channel={activeChannel}
-                />
               ) : (
                 <LoadingSkeleton />
               )}

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((prev) => prev.filter((e) => e != member));
-    setStyledGroup(styledGroup.splice(idx, 1));
   };
 
   const createChat = (group: string[]) => {
@@ -117,12 +116,16 @@ export function ChatCreation({
           Confirm
         </CreationBtn>
       </CreationBar>
-      {!editGroup && !query && styledGroup.length === 0 && (
+      {!editGroup && !query && (
         <Contacts>
           <ContactsHeading>Contacts</ContactsHeading>
           <ContactsList>
             {contacts
-              .filter((e) => e.id != bufToHex(identity.publicKey))
+              .filter(
+                (e) =>
+                  e.id != bufToHex(identity.publicKey) &&
+                  !styledGroup.includes(e.id)
+              )
               .map((contact) => (
                 <Member
                   key={contact.id}

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

@@ -2,8 +2,8 @@ import React, { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { useBlockedUsers } from "../../contexts/blockedUsersProvider";
+import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useChatScrollHandle } from "../../hooks/useChatScrollHandle";
-import { ChannelData } from "../../models/ChannelData";
 import { ChatMessage } from "../../models/ChatMessage";
 import { equalDate } from "../../utils";
 import { EmptyChannel } from "../Channels/EmptyChannel";
@@ -70,25 +70,17 @@ function ChatUiMessage({
   );
 }
 
-type ChatMessagesProps = {
+export function ChatMessages() {
-  messages: ChatMessage[];
+  const { messages, activeChannel } = useMessengerContext();
-  activeChannelId: string;
-  channel: ChannelData;
-};
-
-export function ChatMessages({
-  messages,
-  activeChannelId,
-  channel,
-}: ChatMessagesProps) {
   const ref = useRef<HTMLHeadingElement>(null);
-  const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId);
+  const loadingMessages = useChatScrollHandle(messages, ref, activeChannel.id);
 
   const { blockedUsers } = useBlockedUsers();
 
-  const shownMessages = useMemo(() => {
+  const shownMessages = useMemo(
-    return messages.filter((message) => !blockedUsers.includes(message.sender));
+    () => messages.filter((message) => !blockedUsers.includes(message.sender)),
-  }, [blockedUsers, messages.length]);
+    [blockedUsers, messages]
+  );
 
   const [image, setImage] = useState("");
   const [link, setLink] = useState("");
@@ -100,24 +92,22 @@ export function ChatMessages({
         image={image}
       />
       <LinkModal isVisible={!!link} onClose={() => setLink("")} link={link} />
-      <EmptyChannel channel={channel} />
+      <EmptyChannel channel={activeChannel} />
       {loadingMessages && (
         <LoadingWrapper>
           <LoadingIcon className="message" />
         </LoadingWrapper>
       )}
-      {shownMessages.map((message, idx) => {
+      {shownMessages.map((message, idx) => (
-        return (
         <ChatUiMessage
-            key={message.date.getTime()}
+          key={message.date.getTime().toString() + message.content}
           message={message}
           idx={idx}
           prevMessage={shownMessages[idx - 1]}
           setLink={setLink}
           setImage={setImage}
         />
-        );
+      ))}
-      })}
     </MessagesWrapper>
   );
 }

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 = ({
         <CheckSvg width={16} height={16} />
         <MenuText>Mark as Read</MenuText>
       </MenuItem>
-      <MenuItem onClick={() => messages.length === 0}>
-        <ClearSvg width={16} height={16} />
-        <MenuText>Clear History</MenuText>
-      </MenuItem>
       {channel.type === "group" && (
         <MenuSection>
           {" "}

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

@@ -17,17 +17,13 @@ export const SearchBlock = ({
   styledGroup,
   setStyledGroup,
 }: SearchBlockProps) => {
-  const { communityData } = useMessengerContext();
+  const { contacts } = useMessengerContext();
-
-  if (!communityData) {
-    return null;
-  }
 
   const searchList = useMemo(() => {
-    return communityData.membersList
+    return contacts
-      .filter((member) => member.includes(query))
+      .filter((member) => member.id.includes(query))
-      .filter((member) => !styledGroup.includes(member));
+      .filter((member) => !styledGroup.includes(member.id));
-  }, [query, styledGroup, communityData.membersList]);
+  }, [query, styledGroup, contacts]);
 
   const addMember = (member: string) => {
     setStyledGroup((prevMembers: string[]) => {
@@ -44,20 +40,20 @@ export const SearchBlock = ({
   return (
     <SearchContacts>
       <ContactsList>
-        {communityData.membersList
+        {contacts
-          .filter((member) => member.includes(query))
+          .filter((member) => member.id.includes(query))
-          .filter((member) => !styledGroup.includes(member))
+          .filter((member) => !styledGroup.includes(member.id))
           .map((member) => (
             <Channel
-              key={member}
+              key={member.id}
               channel={{
-                id: member,
+                id: member.id,
-                name: member.slice(0, 10),
+                name: member.id.slice(0, 10),
                 type: "dm",
               }}
               isActive={false}
               isMuted={false}
-              onClick={() => addMember(member)}
+              onClick={() => addMember(member.id)}
             />
           ))}
       </ContactsList>

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 ?? "",