Show group members for group (#201)

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>
   );

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 (

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>
   );

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>
   );