Add members style (#25)

* Change network * Add mock members data * Add members section * Add members section * Yarn fix * Yarn fix * Add key property
2021-09-30 15:22:58 +02:00 · 2021-09-30 15:22:58 +02:00 · 3e1bbd89dd
parent b2f8b24fc9
commit 3e1bbd89dd
6 changed files with 248 additions and 12 deletions
--- a/packages/react-chat/src/components/Channels.tsx
+++ b/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>
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/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>
  );
 }
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/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;
--- a/packages/react-chat/src/components/Members.tsx
+++ b/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) {
-  return <MembersWrapper theme={theme}>Members</MembersWrapper>;
+export function Members({ theme, channel }: MembersProps) {
+  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};
+    }
+  }
 `;
--- a/packages/react-chat/src/helpers/channelsMock.ts
+++ b/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,
+      },
+    ],
  },
 ];
--- a/packages/react-chat/src/hooks/useMessenger.ts
+++ b/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)