From a024960b983f5e23a947975127acfbb50eda9192 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 25 Jan 2022 11:58:04 +0100
Subject: [PATCH] Show group members for group (#201)

---
 .../src/components/Members/Members.tsx        | 15 ++++++++++--
 .../src/components/Members/MembersList.tsx    | 23 +++++++++++++++----
 .../components/NarrowMode/NarrowMembers.tsx   | 17 ++++++++++----
 .../components/NarrowMode/NarrowTopbar.tsx    |  8 +++++--
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/packages/react-chat/src/components/Members/Members.tsx b/packages/react-chat/src/components/Members/Members.tsx
index 7a892bc3..3ea35eb4 100644
--- a/packages/react-chat/src/components/Members/Members.tsx
+++ b/packages/react-chat/src/components/Members/Members.tsx
@@ -1,12 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
+
 import { MembersList } from "./MembersList";
 
 export function Members() {
+  const { activeChannel } = useMessengerContext();
+  const heading = useMemo(
+    () =>
+      activeChannel && activeChannel?.type === "group"
+        ? "Group members"
+        : "Members",
+    [activeChannel]
+  );
+
   return (
     <MembersWrapper>
-      <MemberHeading>Members</MemberHeading>
+      <MemberHeading>{heading}</MemberHeading>
       <MembersList />
     </MembersWrapper>
   );
diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx
index f546f7d5..bb820990 100644
--- a/packages/react-chat/src/components/Members/MembersList.tsx
+++ b/packages/react-chat/src/components/Members/MembersList.tsx
@@ -13,7 +13,7 @@ import { LogoutModalName } from "../Modals/LogoutModal";
 import { Member } from "./Member";
 
 export function MembersList() {
-  const { contacts, nickname } = useMessengerContext();
+  const { contacts, nickname, activeChannel } = useMessengerContext();
   const identity = useIdentity();
   const { setModal } = useModal(LogoutModalName);
 
@@ -27,13 +27,26 @@ export function MembersList() {
     }
   }, [contacts, identity]);
 
+  const members = useMemo(
+    () =>
+      activeChannel &&
+      activeChannel?.type === "group" &&
+      activeChannel.members &&
+      identity
+        ? activeChannel.members.filter(
+            (e) => e.id !== utils.bufToHex(identity.publicKey)
+          )
+        : userContacts,
+    [activeChannel]
+  );
+
   const onlineContacts = useMemo(
-    () => userContacts.filter((e) => e.online),
-    [userContacts]
+    () => members.filter((e) => e.online),
+    [members]
   );
   const offlineContacts = useMemo(
-    () => userContacts.filter((e) => !e.online),
-    [userContacts]
+    () => members.filter((e) => !e.online),
+    [members]
   );
 
   return (
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
index 0106d70f..47e44871 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useMemo } from "react";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
 import { MembersList } from "../Members/MembersList";
 
 import { ListWrapper, NarrowTopbar } from "./NarrowTopbar";
@@ -9,12 +10,18 @@ interface NarrowMembersProps {
 }
 
 export function NarrowMembers({ switchShowMembersList }: NarrowMembersProps) {
+  const { activeChannel } = useMessengerContext();
+  const listName = useMemo(
+    () =>
+      activeChannel && activeChannel?.type === "group"
+        ? "Group members"
+        : "Community members",
+    [activeChannel]
+  );
+
   return (
     <ListWrapper>
-      <NarrowTopbar
-        list="Community members"
-        onBtnClick={switchShowMembersList}
-      />
+      <NarrowTopbar list={listName} onBtnClick={switchShowMembersList} />
       <MembersList />
     </ListWrapper>
   );
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
index a815824b..f49fc3e9 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
@@ -10,13 +10,17 @@ interface NarrowTopbarProps {
 }
 
 export function NarrowTopbar({ list, onBtnClick }: NarrowTopbarProps) {
-  const { communityData } = useMessengerContext();
+  const { communityData, activeChannel } = useMessengerContext();
   return (
     <TopbarWrapper>
       <BackButton onBtnClick={onBtnClick} />
       <HeadingWrapper>
         <Heading>{list}</Heading>
-        <SubHeading>{communityData?.name}</SubHeading>
+        <SubHeading>
+          {activeChannel?.type === "group"
+            ? activeChannel.name
+            : communityData?.name}
+        </SubHeading>
       </HeadingWrapper>
     </TopbarWrapper>
   );