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 (
- Members
+ {heading}
);
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 (
-
+
);
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 (
{list}
- {communityData?.name}
+
+ {activeChannel?.type === "group"
+ ? activeChannel.name
+ : communityData?.name}
+
);