Add members style (#25)

* Change network

* Add mock members data

* Add members section

* Add members section

* Yarn fix

* Yarn fix

* Add key property

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

@@ -121,7 +121,7 @@ export function Channel({
           {activeView && (
             <MembersAmount theme={theme}>
               {" "}
-              {channel.members} members
+              {channel.membersList.length} members
             </MembersAmount>
           )}
         </ChannelTextInfo>

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

@@ -55,7 +55,7 @@ export function Chat({ theme, channelsON }: ChatProps) {
       ) : (
         <Loading>Connecting to waku</Loading>
       )}
-      {showMembers && <Members theme={theme} />}
+      {showMembers && <Members theme={theme} channel={activeChannel} />}
     </ChatWrapper>
   );
 }

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

@@ -113,7 +113,7 @@ const MessageHeaderWrapper = styled.div`
   align-items: center;
 `;
 
-const Icon = styled.div`
+export const Icon = styled.div`
   width: 40px;
   height: 40px;
   display: flex;

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

@@ -1,18 +1,156 @@
 import React from "react";
 import styled from "styled-components";
 
+import { ChannelData } from "../helpers/channelsMock";
 import { Theme } from "../styles/themes";
 
+import { Icon } from "./Chat/ChatMessages";
+import { UserIcon } from "./Icons/UserIcon";
+
 interface MembersProps {
   theme: Theme;
+  channel: ChannelData;
 }
 
-export function Members({ theme }: MembersProps) {
+export function Members({ theme, channel }: MembersProps) {
-  return <MembersWrapper theme={theme}>Members</MembersWrapper>;
+  return (
+    <MembersWrapper theme={theme}>
+      <MemberHeading theme={theme}>Members</MemberHeading>
+      <MembersList>
+        <MemberCategory>
+          <MemberCategoryName theme={theme}>You</MemberCategoryName>
+          <MemberData>
+            <Icon>
+              <UserIcon theme={theme} />
+            </Icon>
+            <MemberName theme={theme}>Guest564732</MemberName>
+          </MemberData>
+        </MemberCategory>
+        <MemberCategory>
+          <MemberCategoryName theme={theme}>Online</MemberCategoryName>
+          {channel.membersList
+            .filter((member) => member.isOnline)
+            .map((member) => (
+              <Member
+                key={member.id}
+                theme={theme}
+                member={member}
+                isOnline={member.isOnline}
+              />
+            ))}
+        </MemberCategory>
+        <MemberCategory>
+          <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
+          {channel.membersList
+            .filter((member) => !member.isOnline)
+            .map((member) => (
+              <Member
+                key={member.id}
+                theme={theme}
+                member={member}
+                isOnline={member.isOnline}
+              />
+            ))}
+        </MemberCategory>
+      </MembersList>
+    </MembersWrapper>
+  );
 }
 
-const MembersWrapper = styled.div<MembersProps>`
+interface MemberProps {
+  theme: Theme;
+  member: any;
+  isOnline: boolean;
+}
+
+export function Member({ theme, member, isOnline }: MemberProps) {
+  return (
+    <MemberData>
+      <MemberIcon
+        style={{
+          backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
+        }}
+        className={isOnline ? "online" : ""}
+        theme={theme}
+      >
+        {!member.avatar && <UserIcon theme={theme} />}
+      </MemberIcon>
+      <MemberName theme={theme}>{member.name}</MemberName>
+    </MemberData>
+  );
+}
+
+interface ThemeProps {
+  theme: Theme;
+}
+
+const MembersWrapper = styled.div<ThemeProps>`
   width: 18%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   background-color: ${({ theme }) => theme.sectionBackgroundColor};
+  padding: 16px;
+`;
+
+const MemberHeading = styled.h2<ThemeProps>`
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  color: ${({ theme }) => theme.textPrimaryColor};
+  margin-bottom: 16px;
+`;
+
+const MemberCategoryName = styled.h3<ThemeProps>`
+  font-weight: normal;
+  font-size: 13px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.textSecondaryColor};
+  margin-bottom: 8px;
+`;
+
+const MemberName = styled.p<ThemeProps>`
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  color: ${({ theme }) => theme.textPrimaryColor};
+  opacity: 0.7;
+  margin-left: 8px;
+`;
+
+const MembersList = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const MemberCategory = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+
+const MemberData = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const MemberIcon = styled(Icon)<ThemeProps>`
+  position: relative;
+  background-size: contain;
+  background-position: center;
+
+  &.online {
+    &::after {
+      content: "";
+      position: absolute;
+      right: -1px;
+      bottom: 1px;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background-color: #4ebc60;
+      border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
+    }
+  }
 `;

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

@@ -2,9 +2,9 @@ export type ChannelData = {
   id: number;
   name: string;
   icon?: string;
-  members: number;
   notifications?: number;
   isMuted?: boolean;
+  membersList: any[];
 };
 
 export const channels = [
@@ -12,23 +12,119 @@ export const channels = [
     id: 1,
     name: "welcome",
     icon: "https://www.cryptokitties.co/icons/logo.svg",
-    members: 7,
+    membersList: [
+      {
+        id: 1,
+        name: "jason.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
+        isOnline: true,
+      },
+      {
+        id: 2,
+        name: "viola.stateofus.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
+        isOnline: false,
+      },
+      {
+        id: 3,
+        name: "GuestFest",
+        isOnline: true,
+      },
+      {
+        id: 4,
+        name: "Guest33334",
+        isOnline: true,
+      },
+      {
+        id: 5,
+        name: "Guest333",
+        isOnline: true,
+      },
+      {
+        id: 6,
+        name: "Guest33",
+        isOnline: false,
+      },
+      {
+        id: 7,
+        name: "Guest9283",
+        isOnline: true,
+      },
+    ],
   },
   {
     id: 2,
     name: "general",
-    members: 15,
+    membersList: [
+      {
+        id: 1,
+        name: "jason.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
+        isOnline: true,
+      },
+      {
+        id: 2,
+        name: "viola.stateofus.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
+        isOnline: false,
+      },
+      {
+        id: 3,
+        name: "Guest",
+        isOnline: true,
+      },
+    ],
   },
   {
     id: 3,
     name: "beginners",
-    members: 3,
     notifications: 1,
+    membersList: [
+      {
+        id: 1,
+        name: "jason.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
+        isOnline: true,
+      },
+      {
+        id: 2,
+        name: "viola.stateofus.eth",
+        avatar:
+          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
+        isOnline: false,
+      },
+      {
+        id: 3,
+        name: "Guest",
+        isOnline: true,
+      },
+    ],
   },
   {
     id: 4,
     name: "random",
-    members: 6,
     isMuted: true,
+    membersList: [
+      {
+        id: 14,
+        name: "jason",
+        isOnline: true,
+      },
+      {
+        id: 16,
+        name: "jonh",
+        isOnline: false,
+      },
+      {
+        id: 3,
+        name: "Guest",
+        isOnline: true,
+      },
+    ],
   },
 ];

packages/react-chat/src/hooks/useMessenger.ts

@@ -91,7 +91,9 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
           if (chat) {
             const messages = await messenger.waku.store.queryHistory(
               [chat.contentTopic],
-              { decryptionKeys: [chat.symKey] }
+              {
+                decryptionKeys: [chat.symKey],
+              }
             );
             messages.sort((a, b) =>
               (a?.timestamp?.getTime() ?? 0) > (b?.timestamp?.getTime() ?? 0)