UI fixes changes (#218)

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

@@ -64,7 +64,7 @@ function ChatsSideBar({ onCommunityClick, setEditGroup }: ChatsListProps) {
   return (
     <>
       <ChatsBar>
-        <Heading>Chat</Heading>
+        <Heading>Messages</Heading>
         <EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
           <CreateIcon />
         </EditBtn>

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

@@ -104,7 +104,7 @@ export function ChatTopbar({
       </ChannelWrapper>
 
       <MenuWrapper>
-        {!narrow && (
+        {!narrow && activeChannel.type !== "dm" && (
           <TopBtn onClick={onClick} className={showMembers ? "active" : ""}>
             <MembersIcon />
           </TopBtn>

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 import { ChatState, useChatState } from "../contexts/chatStateProvider";
+import { useMessengerContext } from "../contexts/messengerProvider";
 import { useNarrow } from "../contexts/narrowProvider";
 
 import { Channels } from "./Channels/Channels";
@@ -49,6 +50,8 @@ export function CommunityChatRoom() {
   const [showMembers, setShowMembers] = useState(false);
   const [editGroup, setEditGroup] = useState(false);
   const narrow = useNarrow();
+  const { activeChannel } = useMessengerContext();
+
   return (
     <ChatWrapper>
       {!narrow && (
@@ -66,7 +69,11 @@ export function CommunityChatRoom() {
           setEditGroup={setEditGroup}
         />
       )}
-      {showMembers && !narrow && state === ChatState.ChatBody && <Members />}
+      {showMembers &&
+        !narrow &&
+        state === ChatState.ChatBody &&
+        activeChannel &&
+        activeChannel.type !== "dm" && <Members />}
       {state === ChatState.ChatCreation && <ChatCreation />}
       <Modals />
       <ToastMessageList />

packages/react-chat/src/components/Form/ChannelMenu.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { useContextMenu } from "../../hooks/useContextMenu";
 import { ChannelData } from "../../models/ChannelData";
 import { AddMemberIcon } from "../Icons/AddMemberIcon";
@@ -56,10 +57,13 @@ export const ChannelMenu = ({
     [setShowChannelMenu, setShowSideMenu]
   );
 
+  const ref = useRef(null);
+  useClickOutside(ref, () => setShowMenu(false));
+
   if (showMenu || setShowChannelMenu) {
     return (
-      <ChannelDropdown className={className}>
-        {narrow && !className && (
+      <ChannelDropdown className={className} menuRef={ref}>
+        {narrow && channel.type !== "dm" && (
           <MenuItem
             onClick={() => {
               if (switchMemberList) switchMemberList();
@@ -106,7 +110,10 @@ export const ChannelMenu = ({
           <MenuItem
             onClick={() => {
               if (channel.isMuted) {
-                channelsDispatch({ type: "ToggleMuted", payload: channel.id });
+                channelsDispatch({
+                  type: "ToggleMuted",
+                  payload: channel.id,
+                });
                 setShowMenu(false);
               }
             }}
@@ -121,12 +128,15 @@ export const ChannelMenu = ({
             {!channel.isMuted && <NextIcon />}
             <MenuText>
               {(channel.isMuted ? "Unmute" : "Mute") +
-                (channel.type === "group" ? " Group" : " CommunityChatRoom")}
+                (channel.type === "group" ? " Group" : "Chat")}
             </MenuText>
             {!channel.isMuted && showSubmenu && (
               <MuteMenu
                 setIsMuted={() =>
-                  channelsDispatch({ type: "ToggleMuted", payload: channel.id })
+                  channelsDispatch({
+                    type: "ToggleMuted",
+                    payload: channel.id,
+                  })
                 }
                 className={className}
               />
@@ -155,9 +165,7 @@ export const ChannelMenu = ({
               <DeleteIcon width={16} height={16} className="red" />
             )}
             <MenuText className="red">
-              {channel.type === "group"
-                ? "Leave Group"
-                : "Delete CommunityChatRoom"}
+              {channel.type === "group" ? "Leave Group" : "Delete Chat"}
             </MenuText>
           </MenuItem>
         )}

packages/react-chat/src/components/Form/DropdownMenu.tsx

@@ -7,15 +7,19 @@ type DropdownMenuProps = {
   children: ReactNode;
   className?: string;
   style?: { top: number; left: number };
+  menuRef?: React.MutableRefObject<null>;
+  id?: string;
 };
 
 export function DropdownMenu({
   children,
   className,
   style,
+  menuRef,
+  id,
 }: DropdownMenuProps) {
   return (
-    <MenuBlock className={className} style={style}>
+    <MenuBlock className={className} style={style} ref={menuRef} id={id}>
       <MenuList>{children}</MenuList>
     </MenuBlock>
   );

packages/react-chat/src/components/Form/ImageMenu.tsx

@@ -21,8 +21,7 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
   useClickOutside(ref, () => setShowMenu(false));
 
   return showMenu ? (
-    <div ref={ref}>
-      <ImageDropdown>
+    <ImageDropdown menuRef={ref}>
       <MenuItem onClick={() => copyImg(imageId)}>
         <CopyIcon height={16} width={16} /> <MenuText>Copy image</MenuText>
       </MenuItem>
@@ -31,7 +30,6 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
         <MenuText> Download image</MenuText>
       </MenuItem>
     </ImageDropdown>
-    </div>
   ) : (
     <></>
   );

packages/react-chat/src/components/Form/MessageMenu.tsx

@@ -53,8 +53,7 @@ export const MessageMenu = ({
   );
 
   return userPK && showMenu ? (
-    <div ref={ref} id={"messageDropdown"}>
-      <MessageDropdown style={menuStyle}>
+    <MessageDropdown style={menuStyle} menuRef={ref} id="messageDropdown">
       <MenuItem className="picker">
         <ReactionPicker
           messageReactions={messageReactions}
@@ -110,7 +109,6 @@ export const MessageMenu = ({
         </MenuItem>
       )}
     </MessageDropdown>
-    </div>
   ) : (
     <></>
   );

packages/react-chat/src/components/Messages/MessageReactions.tsx

@@ -1,5 +1,5 @@
 import { BaseEmoji, Emoji } from "emoji-mart";
-import React from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
 
 import { ReactionButton } from "../Reactions/ReactionButton";
@@ -16,12 +16,22 @@ export function MessageReactions({
   const isMyReactionIncluded = (emoji: BaseEmoji) =>
     messageReactions.includes(emoji); // temporary function while message reactions are not added to waku
 
+  const handleReaction = useCallback(
+    (emoji: BaseEmoji) => {
+      messageReactions.find((e) => e === emoji)
+        ? setMessageReactions((prev) => prev.filter((e) => e != emoji))
+        : setMessageReactions((prev) => [...prev, emoji]);
+    },
+    [messageReactions, setMessageReactions]
+  );
+
   return (
     <Reactions>
       {messageReactions.map((reaction) => (
         <EmojiReaction
           className={`${isMyReactionIncluded(reaction) && "chosen"}`}
           key={reaction.id}
+          onClick={() => handleReaction(reaction)}
         >
           <Emoji emoji={reaction} set={"twitter"} size={16} />
           <p>1</p>

packages/react-chat/src/components/Messages/UiMessage.tsx

@@ -107,7 +107,6 @@ export function UiMessage({
                     if (identity) setShowMenu((e) => !e);
                   }}
                   disabled={!identity}
-                  ref={ref}
                 >
                   <UserName>
                     {" "}