Fix and refactor chat state (#124)

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

@@ -13,7 +13,6 @@ import { EditModal } from "./Modals/EditModal";
 
 export function Chat() {
   const [showMembers, setShowMembers] = useState(true);
-  const [showChannels, setShowChannels] = useState(true);
   const [membersList, setMembersList] = useState([]);
   const [groupList, setGroupList] = useState([]);
   const [createChat, setCreateChat] = useState(false);
@@ -28,7 +27,7 @@ export function Chat() {
 
   return (
     <ChatWrapper>
-      {showChannels && !narrow && (
+      {!narrow && (
         <ChannelsWrapper>
           <StyledCommunity onClick={showModal} />
           <Channels
@@ -43,7 +42,6 @@ export function Chat() {
         <ChatBody
           onClick={() => setShowMembers(!showMembers)}
           showMembers={showMembers}
-          showCommunity={!showChannels}
           onCommunityClick={showModal}
           onEditClick={showEditModal}
           membersList={membersList}
@@ -54,10 +52,7 @@ export function Chat() {
         />
       )}
       {showMembers && !narrow && !createChat && (
-        <Members
-          setShowChannels={setShowChannels}
-          setMembersList={setMembersList}
-        />
+        <Members setMembersList={setMembersList} />
       )}
       {createChat && (
         <ChatCreation

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

@@ -18,10 +18,15 @@ import { ChatCreation } from "./ChatCreation";
 import { ChatInput } from "./ChatInput";
 import { ChatMessages } from "./ChatMessages";
 
+enum ChatBodyState {
+  Chat,
+  Channels,
+  Members,
+}
+
 interface ChatBodyProps {
   onClick: () => void;
   showMembers: boolean;
-  showCommunity: boolean;
   onCommunityClick: () => void;
   onEditClick: () => void;
   membersList: string[];
@@ -34,7 +39,6 @@ interface ChatBodyProps {
 export function ChatBody({
   onClick,
   showMembers,
-  showCommunity,
   onCommunityClick,
   onEditClick,
   membersList,
@@ -45,26 +49,24 @@ export function ChatBody({
 }: ChatBodyProps) {
   const { messenger, activeChannel, communityData } = useMessengerContext();
   const narrow = useNarrow();
-  const [showChannelsList, setShowChannelsList] = useState(false);
-  const [showMembersList, setShowMembersList] = useState(false);
   const [showChannelMenu, setShowChannelMenu] = useState(false);
+  const [showState, setShowState] = useState<ChatBodyState>(ChatBodyState.Chat);
+
   const [editGroup, setEditGroup] = useState(false);
   const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
 
-  const switchChannelList = useCallback(() => {
-    setShowMembersList(false);
-    setShowChannelsList(!showChannelsList);
-  }, [showChannelsList]);
-
-  const switchMemberList = useCallback(() => {
-    setShowChannelsList(false);
-    setShowMembersList(!showMembersList);
-  }, [showMembersList]);
+  const switchShowState = useCallback(
+    (state: ChatBodyState) => {
+      if (narrow) {
+        setShowState((prev) => (prev === state ? ChatBodyState.Chat : state));
+      }
+    },
+    [narrow]
+  );
 
   useEffect(() => {
     if (!narrow) {
-      setShowChannelsList(false);
-      setShowMembersList(false);
+      setShowState(ChatBodyState.Chat);
     }
   }, [narrow]);
 
@@ -79,14 +81,12 @@ export function ChatBody({
         />
       ) : (
         <ChatTopbar
-          className={
-            narrow && (showChannelsList || showMembersList) ? "narrow" : ""
-          }
+          className={narrow && showState !== ChatBodyState.Chat ? "narrow" : ""}
         >
           <ChannelWrapper className={className}>
             {messenger && communityData ? (
               <>
-                {(showCommunity || narrow) && (
+                {narrow && (
                   <CommunityWrap className={className}>
                     <Community onClick={onCommunityClick} />
                   </CommunityWrap>
@@ -94,10 +94,12 @@ export function ChatBody({
 
                 <Channel
                   channel={activeChannel}
-                  isActive={narrow ? showChannelsList : true}
+                  isActive={
+                    narrow ? showState === ChatBodyState.Channels : true
+                  }
                   activeView={true}
                   isMuted={false}
-                  onClick={() => (narrow ? switchChannelList() : undefined)}
+                  onClick={() => switchShowState(ChatBodyState.Channels)}
                 />
               </>
             ) : (
@@ -124,7 +126,7 @@ export function ChatBody({
           {showChannelMenu && (
             <ChannelMenu
               channel={activeChannel}
-              switchMemberList={switchMemberList}
+              switchMemberList={() => switchShowState(ChatBodyState.Members)}
               setShowChannelMenu={setShowChannelMenu}
               setEditGroup={setEditGroup}
               onEditClick={onEditClick}
@@ -135,7 +137,7 @@ export function ChatBody({
       )}
       {messenger ? (
         <>
-          {!showChannelsList && !showMembersList && (
+          {showState === ChatBodyState.Chat && (
             <>
               {messenger && communityData ? (
                 <ChatMessages />
@@ -146,18 +148,19 @@ export function ChatBody({
             </>
           )}
 
-          {showChannelsList && narrow && (
+          {showState === ChatBodyState.Channels && (
             <NarrowChannels
-              setShowChannels={setShowChannelsList}
+              setShowChannels={() => switchShowState(ChatBodyState.Channels)}
               membersList={membersList}
               groupList={groupList}
               setCreateChat={setCreateChat}
             />
           )}
-          {showMembersList && narrow && (
+          {showState === ChatBodyState.Members && (
             <NarrowMembers
-              setShowChannels={setShowChannelsList}
-              setShowMembersList={setShowMembersList}
+              switchShowMembersList={() =>
+                switchShowState(ChatBodyState.Members)
+              }
               setMembersList={setMembersList}
             />
           )}

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

@@ -79,7 +79,7 @@ export function ChatMessages() {
 
   const shownMessages = useMemo(
     () => messages.filter((message) => !blockedUsers.includes(message.sender)),
-    [blockedUsers, messages]
+    [blockedUsers, messages, messages.length]
   );
 
   const [image, setImage] = useState("");

packages/react-chat/src/components/Members/Member.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
-import { useNarrow } from "../../contexts/narrowProvider";
 import { Icon } from "../Chat/ChatMessages";
 import { ContactMenu } from "../Form/ContactMenu";
 import { UserIcon } from "../Icons/UserIcon";
@@ -9,8 +8,7 @@ import { UserIcon } from "../Icons/UserIcon";
 interface MemberProps {
   member: string;
   isOnline?: boolean;
-  setShowChannels?: (val: boolean) => void;
-  setShowMembers?: (val: boolean) => void;
+  switchShowMembers?: () => void;
   setMembersList?: any;
   onClick?: () => void;
 }
@@ -18,18 +16,10 @@ interface MemberProps {
 export function Member({
   member,
   isOnline,
-  setShowChannels,
-  setShowMembers,
+  switchShowMembers,
   setMembersList,
   onClick,
 }: MemberProps) {
-  const narrow = useNarrow();
-
-  const switchMemberList = useCallback(() => {
-    if (setShowChannels) setShowChannels(false);
-    if (setShowMembers) setShowMembers(false);
-  }, [setShowMembers]);
-
   const startDialog = (member: string) => {
     setMembersList((prevMembers: string[]) => {
       if (prevMembers.find((chat) => chat === member)) {
@@ -38,13 +28,13 @@ export function Member({
         return [...prevMembers, member];
       }
     });
-    if (setShowChannels) setShowChannels(true);
   };
 
   const [showMenu, setShowMenu] = useState(false);
 
   const onMemberClick = () => {
-    narrow && setShowMembers ? switchMemberList() : startDialog(member);
+    switchShowMembers?.();
+    startDialog(member);
   };
 
   return (

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

@@ -4,18 +4,14 @@ import styled from "styled-components";
 import { MembersList } from "./MembersList";
 
 interface MembersProps {
-  setShowChannels: (val: boolean) => void;
   setMembersList: any;
 }
 
-export function Members({ setShowChannels, setMembersList }: MembersProps) {
+export function Members({ setMembersList }: MembersProps) {
   return (
     <MembersWrapper>
       <MemberHeading>Members</MemberHeading>
-      <MembersList
-        setShowChannels={setShowChannels}
-        setMembersList={setMembersList}
-      />
+      <MembersList setMembersList={setMembersList} />
     </MembersWrapper>
   );
 }

packages/react-chat/src/components/Members/MembersList.tsx

@@ -10,14 +10,12 @@ import { UserIcon } from "../Icons/UserIcon";
 import { Member, MemberData, MemberIcon } from "./Member";
 
 interface MembersListProps {
-  setShowChannels: (val: boolean) => void;
-  setShowMembers?: (val: boolean) => void;
+  switchShowMembers?: () => void;
   setMembersList: any;
 }
 
 export function MembersList({
-  setShowChannels,
-  setShowMembers,
+  switchShowMembers,
   setMembersList,
 }: MembersListProps) {
   const { contacts } = useMessengerContext();
@@ -44,8 +42,7 @@ export function MembersList({
               key={contact.id}
               member={contact.id}
               isOnline={contact.online}
-              setShowChannels={setShowChannels}
-              setShowMembers={setShowMembers}
+              switchShowMembers={switchShowMembers}
               setMembersList={setMembersList}
             />
           ))}
@@ -60,8 +57,7 @@ export function MembersList({
               key={contact.id}
               member={contact.id}
               isOnline={contact.online}
-              setShowChannels={setShowChannels}
-              setShowMembers={setShowMembers}
+              switchShowMembers={switchShowMembers}
               setMembersList={setMembersList}
             />
           ))}

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -6,22 +6,19 @@ import { MembersList } from "../Members/MembersList";
 import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowMembersProps {
-  setShowChannels: (val: boolean) => void;
-  setShowMembersList: (val: boolean) => void;
+  switchShowMembersList: () => void;
   setMembersList: any;
 }
 
 export function NarrowMembers({
-  setShowChannels,
-  setShowMembersList,
+  switchShowMembersList,
   setMembersList,
 }: NarrowMembersProps) {
   return (
     <ListWrapper>
       <NarrowTopbar list="Community members" />
       <MembersList
-        setShowChannels={setShowChannels}
-        setShowMembers={setShowMembersList}
+        switchShowMembers={switchShowMembersList}
         setMembersList={setMembersList}
       />
     </ListWrapper>