Extract channel component (#27)

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

@@ -2,26 +2,25 @@ import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { ChannelData, channels } from "../helpers/channelsMock";
+import { CommunityData } from "../helpers/communityMock";
 import { Theme } from "../styles/themes";
 
+import { Community, MembersAmount } from "./Community";
 import { MutedIcon } from "./Icons/MutedIcon";
 
 interface ChannelsProps {
   theme: Theme;
-  icon: string;
+  community: CommunityData;
-  name: string;
   notifications: { [id: string]: number };
   clearNotifications: (id: string) => void;
-  members: number;
+
   setActiveChannel: (val: ChannelData) => void;
   activeChannelId: number;
 }
 
 export function Channels({
   theme,
-  icon,
+  community,
-  name,
-  members,
   notifications,
   setActiveChannel,
   clearNotifications,
@@ -38,13 +37,7 @@ export function Channels({
 
   return (
     <ChannelsWrapper theme={theme}>
-      <Community>
+      <Community community={community} theme={theme} />
-        <CommunityLogo src={icon} alt={`${name} logo`} />
-        <CommunityInfo>
-          <CommunityName theme={theme}>{name}</CommunityName>
-          <MembersAmount theme={theme}>{members} members</MembersAmount>
-        </CommunityInfo>
-      </Community>
       <ChannelList>
         {channels.map((channel) => (
           <Channel
@@ -146,41 +139,10 @@ const ChannelsWrapper = styled.div<ThemeProps>`
   flex-direction: column;
 `;
 
-const Community = styled.div`
-  display: flex;
-  margin-bottom: 16px;
-`;
-
-const CommunityLogo = styled.img`
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  margin-left: 10px;
-`;
-
-const CommunityInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 8px;
-`;
-
-const CommunityName = styled.h1<ThemeProps>`
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 22px;
-  color: ${({ theme }) => theme.textPrimaryColor};
-`;
-
-const MembersAmount = styled.p<ThemeProps>`
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.1px;
-  color: ${({ theme }) => theme.textSecondaryColor};
-`;
-
 const ChannelList = styled.div`
   display: flex;
   flex-direction: column;
+  margin-top: 16px;
 `;
 
 const ChannelWrapper = styled.div<ThemeProps>`

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 import { ChannelData, channels } from "../helpers/channelsMock";
+import { CommunityData } from "../helpers/communityMock";
 import { useMessenger } from "../hooks/useMessenger";
 import { Theme } from "../styles/themes";
 
@@ -11,12 +12,13 @@ import { Members } from "./Members";
 
 interface ChatProps {
   theme: Theme;
-  channelsON?: boolean;
+  community: CommunityData;
 }
 
-export function Chat({ theme, channelsON }: ChatProps) {
+export function Chat({ theme, community }: ChatProps) {
   const [activeChannel, setActiveChannel] = useState<ChannelData>(channels[0]);
   const [showMembers, setShowMembers] = useState(true);
+  const [showChannels, setShowChannels] = useState(false);
 
   const {
     messenger,
@@ -31,14 +33,12 @@ export function Chat({ theme, channelsON }: ChatProps) {
 
   return (
     <ChatWrapper>
-      {channelsON && (
+      {showChannels && (
         <Channels
           notifications={notifications}
           clearNotifications={clearNotifications}
           theme={theme}
-          icon={"https://www.cryptokitties.co/icons/logo.svg"}
+          community={community}
-          name={"CryptoKitties"}
-          members={186}
           setActiveChannel={setActiveChannel}
           activeChannelId={activeChannel.id}
         />
@@ -51,11 +51,19 @@ export function Chat({ theme, channelsON }: ChatProps) {
           sendMessage={sendMessage}
           onClick={() => setShowMembers(!showMembers)}
           showMembers={showMembers}
+          community={community}
+          showCommunity={!showChannels}
         />
       ) : (
         <Loading>Connecting to waku</Loading>
       )}
-      {showMembers && <Members theme={theme} channel={activeChannel} />}
+      {showMembers && (
+        <Members
+          theme={theme}
+          channel={activeChannel}
+          setShowChannels={setShowChannels}
+        />
+      )}
     </ChatWrapper>
   );
 }

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

@@ -2,9 +2,11 @@ import React from "react";
 import styled from "styled-components";
 
 import { ChannelData } from "../../helpers/channelsMock";
+import { CommunityData } from "../../helpers/communityMock";
 import { ChatMessage } from "../../models/ChatMessage";
 import { Theme } from "../../styles/themes";
 import { Channel } from "../Channels";
+import { Community } from "../Community";
 import { MembersIcon } from "../Icons/MembersIcon";
 
 import { ChatInput } from "./ChatInput";
@@ -13,30 +15,41 @@ import { ChatMessages } from "./ChatMessages";
 interface ChatBodyProps {
   theme: Theme;
   channel: ChannelData;
+  community: CommunityData;
   messages: ChatMessage[];
   sendMessage: (text: string) => void;
   onClick: () => void;
   showMembers: boolean;
+  showCommunity: boolean;
 }
 
 export function ChatBody({
   theme,
   channel,
+  community,
   messages,
   sendMessage,
   onClick,
   showMembers,
+  showCommunity,
 }: ChatBodyProps) {
   return (
     <ChatBodyWrapper theme={theme}>
-      <ChannelWrapper>
+      <ChatTopbar>
-        <Channel
+        <ChannelWrapper>
-          channel={channel}
+          {showCommunity && (
-          theme={theme}
+            <CommunityWrap theme={theme}>
-          isActive={true}
+              <Community community={community} theme={theme} />
-          activeView={true}
+            </CommunityWrap>
-          isMuted={false}
+          )}
-        />
+          <Channel
+            channel={channel}
+            theme={theme}
+            isActive={true}
+            activeView={true}
+            isMuted={false}
+          />
+        </ChannelWrapper>
         <MemberBtn
           onClick={onClick}
           className={showMembers ? "active" : ""}
@@ -44,7 +57,7 @@ export function ChatBody({
         >
           <MembersIcon theme={theme} />
         </MemberBtn>
-      </ChannelWrapper>
+      </ChatTopbar>
       <ChatMessages messages={messages} theme={theme} />
       <ChatInput theme={theme} addMessage={sendMessage} />
     </ChatBodyWrapper>
@@ -59,15 +72,39 @@ const ChatBodyWrapper = styled.div<ThemeProps>`
   flex-direction: column;
   flex: 1;
   height: 100%;
-  background: ${({ theme }) => theme.bodyBackgroundColor};
+  background: ${({ theme }) => theme.textPrimaryColor};
 `;
 
 const ChannelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ChatTopbar = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0 8px;
 `;
 
+const CommunityWrap = styled.div<ThemeProps>`
+  padding-right: 16px;
+  margin-right: 16px;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 2px;
+    height: 24px;
+    transform: translateY(-50%);
+    border-radius: 1px;
+    background: ${({ theme }) => theme.bodyBackgroundColor};
+    opacity: 0.1;
+  }
+`;
+
 const MemberBtn = styled.button<ThemeProps>`
   width: 32px;
   height: 32px;

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

@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+
+import { CommunityData } from "../helpers/communityMock";
+import { Theme } from "../styles/themes";
+
+interface CommunityProps {
+  theme: Theme;
+  community: CommunityData;
+}
+
+export function Community({ theme, community }: CommunityProps) {
+  return (
+    <CommunityWrap>
+      <CommunityLogo src={community.icon} alt={`${community.name} logo`} />
+      <CommunityInfo>
+        <CommunityName theme={theme}>{community.name}</CommunityName>
+        <MembersAmount theme={theme}>{community.members} members</MembersAmount>
+      </CommunityInfo>
+    </CommunityWrap>
+  );
+}
+
+interface ThemeProps {
+  theme: Theme;
+}
+
+const CommunityWrap = styled.div`
+  display: flex;
+`;
+
+const CommunityLogo = styled.img`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin-left: 10px;
+`;
+
+const CommunityInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 8px;
+`;
+
+const CommunityName = styled.h1<ThemeProps>`
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  color: ${({ theme }) => theme.textPrimaryColor};
+`;
+
+export const MembersAmount = styled.p<ThemeProps>`
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.1px;
+  color: ${({ theme }) => theme.textSecondaryColor};
+`;

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

@@ -10,9 +10,10 @@ import { UserIcon } from "./Icons/UserIcon";
 interface MembersProps {
   theme: Theme;
   channel: ChannelData;
+  setShowChannels: (val: boolean) => void;
 }
 
-export function Members({ theme, channel }: MembersProps) {
+export function Members({ theme, channel, setShowChannels }: MembersProps) {
   return (
     <MembersWrapper theme={theme}>
       <MemberHeading theme={theme}>Members</MemberHeading>
@@ -36,6 +37,7 @@ export function Members({ theme, channel }: MembersProps) {
                 theme={theme}
                 member={member}
                 isOnline={member.isOnline}
+                setShowChannels={setShowChannels}
               />
             ))}
         </MemberCategory>
@@ -49,6 +51,7 @@ export function Members({ theme, channel }: MembersProps) {
                 theme={theme}
                 member={member}
                 isOnline={member.isOnline}
+                setShowChannels={setShowChannels}
               />
             ))}
         </MemberCategory>
@@ -61,11 +64,17 @@ interface MemberProps {
   theme: Theme;
   member: any;
   isOnline: boolean;
+  setShowChannels: (val: boolean) => void;
 }
 
-export function Member({ theme, member, isOnline }: MemberProps) {
+export function Member({
+  theme,
+  member,
+  isOnline,
+  setShowChannels,
+}: MemberProps) {
   return (
-    <MemberData>
+    <MemberData onClick={() => setShowChannels(true)}>
       <MemberIcon
         style={{
           backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",

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

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { community } from "../helpers/communityMock";
 import { GlobalStyle } from "../styles/GlobalStyle";
 import { lightTheme } from "../styles/themes";
 
@@ -9,7 +10,7 @@ export function ReactChat() {
   return (
     <div>
       <GlobalStyle />
-      <Chat channelsON={true} theme={lightTheme} />
+      <Chat theme={lightTheme} community={community} />
     </div>
   );
 }

packages/react-chat/src/helpers/communityMock.ts

@@ -0,0 +1,13 @@
+export type CommunityData = {
+  id: number;
+  name: string;
+  icon: string;
+  members: number;
+};
+
+export const community = {
+  id: 1,
+  name: "CryptoKitties",
+  icon: "https://www.cryptokitties.co/icons/logo.svg",
+  members: 186,
+};