From 3e1bbd89dd66c930d9490eaa7602715ba4152fca Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Thu, 30 Sep 2021 15:22:58 +0200 Subject: [PATCH] Add members style (#25) * Change network * Add mock members data * Add members section * Add members section * Yarn fix * Yarn fix * Add key property --- .../react-chat/src/components/Channels.tsx | 2 +- packages/react-chat/src/components/Chat.tsx | 2 +- .../src/components/Chat/ChatMessages.tsx | 2 +- .../react-chat/src/components/Members.tsx | 144 +++++++++++++++++- .../react-chat/src/helpers/channelsMock.ts | 106 ++++++++++++- packages/react-chat/src/hooks/useMessenger.ts | 4 +- 6 files changed, 248 insertions(+), 12 deletions(-) diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx index 9edcdc2b..8699b254 100644 --- a/packages/react-chat/src/components/Channels.tsx +++ b/packages/react-chat/src/components/Channels.tsx @@ -121,7 +121,7 @@ export function Channel({ {activeView && ( {" "} - {channel.members} members + {channel.membersList.length} members )} diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index cd7c602d..a978888f 100644 --- 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) { ) : ( Connecting to waku )} - {showMembers && } + {showMembers && } ); } diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index f251107c..3ce90187 100644 --- 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; diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx index 758a7edd..85fa2cfd 100644 --- 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 Members; +export function Members({ theme, channel }: MembersProps) { + return ( + + Members + + + You + + + + + Guest564732 + + + + Online + {channel.membersList + .filter((member) => member.isOnline) + .map((member) => ( + + ))} + + + Offline + {channel.membersList + .filter((member) => !member.isOnline) + .map((member) => ( + + ))} + + + + ); } -const MembersWrapper = styled.div` +interface MemberProps { + theme: Theme; + member: any; + isOnline: boolean; +} + +export function Member({ theme, member, isOnline }: MemberProps) { + return ( + + + {!member.avatar && } + + {member.name} + + ); +} + +interface ThemeProps { + theme: Theme; +} + +const MembersWrapper = styled.div` width: 18%; height: 100%; + display: flex; + flex-direction: column; background-color: ${({ theme }) => theme.sectionBackgroundColor}; + padding: 16px; +`; + +const MemberHeading = styled.h2` + font-weight: 500; + font-size: 15px; + line-height: 22px; + color: ${({ theme }) => theme.textPrimaryColor}; + margin-bottom: 16px; +`; + +const MemberCategoryName = styled.h3` + font-weight: normal; + font-size: 13px; + line-height: 18px; + color: ${({ theme }) => theme.textSecondaryColor}; + margin-bottom: 8px; +`; + +const MemberName = styled.p` + 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)` + 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}; + } + } `; diff --git a/packages/react-chat/src/helpers/channelsMock.ts b/packages/react-chat/src/helpers/channelsMock.ts index 1ed9bd60..42ceab6f 100644 --- 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, + }, + ], }, ]; diff --git a/packages/react-chat/src/hooks/useMessenger.ts b/packages/react-chat/src/hooks/useMessenger.ts index 139d83c9..37903249 100644 --- 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)