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