From e4be0447e738bdca35858e500894d6840cca3f44 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Wed, 6 Oct 2021 11:59:32 +0200
Subject: [PATCH] Hide lists (#44)

---
 packages/react-chat/src/components/Chat.tsx   |  1 -
 .../react-chat/src/components/Members.tsx     | 22 +++++++++++++++++--
 .../components/NarrowMode/NarrowChannels.tsx  |  9 ++++++--
 .../components/NarrowMode/NarrowMembers.tsx   | 10 +++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index de04c018..80fccf3c 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -21,7 +21,6 @@ export function Chat({ theme, community }: ChatProps) {
   const [showMembers, setShowMembers] = useState(true);
   const [showChannels, setShowChannels] = useState(true);
   const narrow = useNarrow();
-  // const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow]);
 
   const {
     messenger,
diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx
index 5d4b3543..9d0f998c 100644
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
 
+import { useNarrow } from "../contexts/narrowProvider";
 import { CommunityData } from "../helpers/communityMock";
 import { Theme } from "../styles/themes";
 
@@ -30,12 +31,14 @@ interface MembersListProps {
   theme: Theme;
   community: CommunityData;
   setShowChannels: (val: boolean) => void;
+  setShowMembers?: (val: boolean) => void;
 }
 
 export function MembersList({
   theme,
   community,
   setShowChannels,
+  setShowMembers,
 }: MembersListProps) {
   return (
     <MembersListWrap>
@@ -59,6 +62,7 @@ export function MembersList({
               member={member}
               isOnline={member.isOnline}
               setShowChannels={setShowChannels}
+              setShowMembers={setShowMembers}
             />
           ))}
       </MemberCategory>
@@ -73,6 +77,7 @@ export function MembersList({
               member={member}
               isOnline={member.isOnline}
               setShowChannels={setShowChannels}
+              setShowMembers={setShowMembers}
             />
           ))}
       </MemberCategory>
@@ -85,6 +90,7 @@ interface MemberProps {
   member: any;
   isOnline: boolean;
   setShowChannels: (val: boolean) => void;
+  setShowMembers?: (val: boolean) => void;
 }
 
 export function Member({
@@ -92,9 +98,21 @@ export function Member({
   member,
   isOnline,
   setShowChannels,
+  setShowMembers,
 }: MemberProps) {
+  const narrow = useNarrow();
+
+  const switchMemberList = useCallback(() => {
+    setShowChannels(false);
+    if (setShowMembers) setShowMembers(false);
+  }, [setShowMembers]);
+
   return (
-    <MemberData onClick={() => setShowChannels(true)}>
+    <MemberData
+      onClick={() =>
+        narrow && setShowMembers ? switchMemberList() : setShowChannels(true)
+      }
+    >
       <MemberIcon
         style={{
           backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index 0cf191ef..e26ef36c 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -25,7 +25,7 @@ export function NarrowChannels({
   setShowChannels,
 }: NarrowChannelsProps) {
   return (
-    <ListWrapper>
+    <ListWrapper theme={theme}>
       <NarrowTopbar
         theme={theme}
         list="Channels"
@@ -56,6 +56,11 @@ export function NarrowChannels({
   );
 }
 
-const ListWrapper = styled.div`
+interface ThemeProps {
+  theme: Theme;
+}
+
+const ListWrapper = styled.div<ThemeProps>`
   padding: 18px;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
 `;
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
index 98316847..509c57c3 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@@ -21,7 +21,7 @@ export function NarrowMembers({
   setShowMembersList,
 }: NarrowMembersProps) {
   return (
-    <ListWrapper>
+    <ListWrapper theme={theme}>
       <NarrowTopbar
         theme={theme}
         list="Community members"
@@ -32,11 +32,17 @@ export function NarrowMembers({
         theme={theme}
         community={community}
         setShowChannels={setShowChannels}
+        setShowMembers={setShowMembersList}
       />
     </ListWrapper>
   );
 }
 
-const ListWrapper = styled.div`
+interface ThemeProps {
+  theme: Theme;
+}
+
+const ListWrapper = styled.div<ThemeProps>`
   padding: 18px;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
 `;