From 03ea71dca46f1bdd02a2ad64307ebd1ce04a8686 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Wed, 10 Nov 2021 15:30:22 +0100 Subject: [PATCH] Fix and refactor chat state (#124) --- packages/react-chat/src/components/Chat.tsx | 9 +-- .../src/components/Chat/ChatBody.tsx | 59 ++++++++++--------- .../src/components/Chat/ChatMessages.tsx | 2 +- .../src/components/Members/Member.tsx | 20 ++----- .../src/components/Members/Members.tsx | 8 +-- .../src/components/Members/MembersList.tsx | 12 ++-- .../components/NarrowMode/NarrowMembers.tsx | 9 +-- 7 files changed, 48 insertions(+), 71 deletions(-) diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 87e3c10..cc3fc54 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/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 ( - {showChannels && !narrow && ( + {!narrow && ( setShowMembers(!showMembers)} showMembers={showMembers} - showCommunity={!showChannels} onCommunityClick={showModal} onEditClick={showEditModal} membersList={membersList} @@ -54,10 +52,7 @@ export function Chat() { /> )} {showMembers && !narrow && !createChat && ( - + )} {createChat && ( 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.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({ /> ) : ( {messenger && communityData ? ( <> - {(showCommunity || narrow) && ( + {narrow && ( @@ -94,10 +94,12 @@ export function ChatBody({ (narrow ? switchChannelList() : undefined)} + onClick={() => switchShowState(ChatBodyState.Channels)} /> ) : ( @@ -124,7 +126,7 @@ export function ChatBody({ {showChannelMenu && ( switchShowState(ChatBodyState.Members)} setShowChannelMenu={setShowChannelMenu} setEditGroup={setEditGroup} onEditClick={onEditClick} @@ -135,7 +137,7 @@ export function ChatBody({ )} {messenger ? ( <> - {!showChannelsList && !showMembersList && ( + {showState === ChatBodyState.Chat && ( <> {messenger && communityData ? ( @@ -146,18 +148,19 @@ export function ChatBody({ )} - {showChannelsList && narrow && ( + {showState === ChatBodyState.Channels && ( switchShowState(ChatBodyState.Channels)} membersList={membersList} groupList={groupList} setCreateChat={setCreateChat} /> )} - {showMembersList && narrow && ( + {showState === ChatBodyState.Members && ( + switchShowState(ChatBodyState.Members) + } setMembersList={setMembersList} /> )} diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index 329cba7..eda7fbe 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/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(""); diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index 0b11528..78f15c4 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/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 ( diff --git a/packages/react-chat/src/components/Members/Members.tsx b/packages/react-chat/src/components/Members/Members.tsx index 9b9ba13..83b59df 100644 --- a/packages/react-chat/src/components/Members/Members.tsx +++ b/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 ( Members - + ); } diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index fba80e3..7e5209b 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/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} /> ))} diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 324b4e1..24e0007 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/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 (