Hide lists (#44)

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,

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

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};
 `;

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};
 `;