|
| 1 | +--- |
| 2 | +id: conversation-members |
| 3 | +title: Show Members in Conversation |
| 4 | +sidebar_label: Conversation Members |
| 5 | +--- |
| 6 | + |
| 7 | +Click the membership count at the top right of a conversation, and you’ll see the conversation’s member list. |
| 8 | +Online members are placed at the top of the list and have a green dot, while offline members are below, and greyed out. |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +The `conversationMembers/ConversationMembers/ConversationMembers.tsx` component displays the list of members that belong to the conversations. |
| 13 | +It calls the [fetchMembers](https://www.pubnub.com/docs/chat/redux/members#fetchmembers) command to get the list of members in the conversation from PubNub and stores the members in the local store. |
| 14 | + |
| 15 | +The component also calls the [fetchHereNow](https://www.pubnub.com/docs/chat/redux/presence#fetchherenow) command from the Redux framework. |
| 16 | +This command uses presence to indicate if members in the conversation are online. |
| 17 | +[Presence](https://www.pubnub.com/docs/chat/redux/presence) allows you to track the state of users in realtime. |
| 18 | +When users are connected to the app and present in the conversation, their "present" state is indicated with a green dot. |
| 19 | +If they are away from the app, their "away" state is indicated by removing the green dot and graying out their name. |
| 20 | + |
| 21 | +```tsx |
| 22 | +export const getCurrentConversationMembers = createSelector( |
| 23 | + [ |
| 24 | + getUsersById, |
| 25 | + getCurrentConversationId, |
| 26 | + getUsersByConversationId, |
| 27 | + getPresenceByConversationId |
| 28 | + ], |
| 29 | + ( |
| 30 | + users: UsersIndexedById, |
| 31 | + conversationId: string, |
| 32 | + conversationMemberships: MembershipHash, |
| 33 | + conversationPresence: ConversationPresence |
| 34 | + ): UserFragment[] => { |
| 35 | + let presence = conversationPresence[conversationId]; |
| 36 | + return conversationMemberships[conversationId] |
| 37 | + ? conversationMemberships[conversationId].map(user => { |
| 38 | + return { |
| 39 | + ...users[user.id], |
| 40 | + presence: presence |
| 41 | + ? presence.occupants.filter(occupant => { |
| 42 | + return occupant.uuid === user.id; |
| 43 | + }).length > 0 |
| 44 | + : false |
| 45 | + }; |
| 46 | + }) |
| 47 | + : []; |
| 48 | + } |
| 49 | +); |
| 50 | +const orderByPresence = (members: UserFragment[]) => { |
| 51 | + return members.sort((userA, userB) => |
| 52 | + userA.presence === userB.presence ? 0 : userA.presence ? -1 : 1 |
| 53 | + ); |
| 54 | +}; |
| 55 | +const ConversationMembers = () => { |
| 56 | + const members: UserFragment[] = useSelector(getCurrentConversationMembers); |
| 57 | + const currentConversationId = useSelector(getCurrentConversationId); |
| 58 | + const dispatch = useDispatch(); |
| 59 | + const pubnub = usePubNub(); |
| 60 | + const views = useSelector(getViewStates); |
| 61 | + const themeContext = useContext(ThemeContext); |
| 62 | + const isSmall = useMediaQuery(themeContext.breakpoint.mediaQuery.small); |
| 63 | + useEffect(() => { |
| 64 | + if (members.length === 0) { |
| 65 | + dispatch( |
| 66 | + fetchMembers({ |
| 67 | + spaceId: currentConversationId, |
| 68 | + include: { |
| 69 | + userFields: true, |
| 70 | + customUserFields: true, |
| 71 | + totalCount: false |
| 72 | + } |
| 73 | + }) |
| 74 | + ); |
| 75 | + dispatch( |
| 76 | + fetchHereNow({ |
| 77 | + channels: [currentConversationId] |
| 78 | + }) |
| 79 | + ); |
| 80 | + } |
| 81 | + }, [members, currentConversationId, pubnub, dispatch]); |
| 82 | + return ( |
| 83 | + <Wrapper |
| 84 | + animate={views.ConversationMembers ? "open" : "closed"} |
| 85 | + variants={getAnimatedWrapperVariants(isSmall)} |
| 86 | + > |
| 87 | + <Header> |
| 88 | + <Title> |
| 89 | + <BackIconWrapper |
| 90 | + onClick={() => { |
| 91 | + dispatch(conversationMembersViewHidden()); |
| 92 | + }} |
| 93 | + > |
| 94 | + <BackIcon title="back" /> |
| 95 | + </BackIconWrapper> |
| 96 | + Members |
| 97 | + </Title> |
| 98 | + <CloseIcon |
| 99 | + onClick={() => { |
| 100 | + dispatch(conversationMembersViewHidden()); |
| 101 | + }} |
| 102 | + > |
| 103 | + <CrossIcon title="close members list" /> |
| 104 | + </CloseIcon> |
| 105 | + </Header> |
| 106 | + <ScrollableView> |
| 107 | + {orderByPresence(members).map(user => ( |
| 108 | + <MemberDescription user={user} key={user.id} /> |
| 109 | + ))} |
| 110 | + </ScrollableView> |
| 111 | + </Wrapper> |
| 112 | + ); |
| 113 | +}; |
| 114 | +export { ConversationMembers }; |
| 115 | +``` |
| 116 | + |
| 117 | +## Member Details |
| 118 | + |
| 119 | +The `MemberDescription` method (in `conversationMembers/MemberDescription/MemberDescription.tsx`) displays the name, profile image, and title of each member. |
| 120 | + |
| 121 | +The member list also displays user presence to indicate if users are online or offline within a conversation. |
| 122 | +The app fetches the presence state from the `user.presence` flag in the [local](https://www.pubnub.com/docs/chat/redux/presence#state-shape) store. |
| 123 | +The next section provides more details on presence events. |
| 124 | + |
| 125 | +```tsx |
| 126 | +const MemberDescription = ({ user }: MemberDescriptionProps) => { |
| 127 | + return ( |
| 128 | + <Wrapper> |
| 129 | + <Avatar> |
| 130 | + <UserInitialsAvatar |
| 131 | + size={36} |
| 132 | + name={user.name} |
| 133 | + userId={user.id} |
| 134 | + muted={!user.presence} |
| 135 | + /> |
| 136 | + </Avatar> |
| 137 | + <About> |
| 138 | + <UserName muted={!user.presence}> |
| 139 | + {user.name}{" "} |
| 140 | + {user.presence && <PresenceDot presence={user.presence} />} |
| 141 | + </UserName> |
| 142 | + <UserTitle muted={!user.presence}>{user.custom.title}</UserTitle> |
| 143 | + </About> |
| 144 | + </Wrapper> |
| 145 | + ); |
| 146 | +}; |
| 147 | +export { MemberDescription }; |
| 148 | +``` |
| 149 | + |
| 150 | +## Presence Events |
| 151 | + |
| 152 | +The `features/memberPresence/memberPresenceModel.ts` file calls [createPresenceReducer()](https://www.pubnub.com/docs/chat/redux/presence#createpresencereducer) reducer from the Redux framework. |
| 153 | +This automatically updates the presence state for users in the local store. |
| 154 | +The reducer responds to actions that are dispatched when presence join, leave, timeout or interval events are received by the app. |
| 155 | + |
| 156 | +```tsx |
| 157 | +/** |
| 158 | + * Create a reducer to presence information for conversation members |
| 159 | + */ |
| 160 | +const MemberPresenceReducer = createPresenceReducer(); |
| 161 | +export { MemberPresenceReducer }; |
| 162 | +``` |
| 163 | + |
| 164 | +## Presence Occupancy |
| 165 | +The `currentConversation/ConversationOccupancy/ConversationOccupancy.tsx` component uses `joinedCount` and `presentCount` to show counts of all members in the conversation and the count of members who are currently online. |
| 166 | + |
| 167 | +The component uses the `getUsersByConversationId` selector to get all members from the [local store](https://www.pubnub.com/docs/chat/redux/presence#state-shape) and `getPresenceByConversationId` to get online users from the [local store](https://www.pubnub.com/docs/chat/redux/presence#state-shape). |
| 168 | + |
| 169 | +```tsx |
| 170 | +export interface ConversationOccupancyFragment { |
| 171 | + joinedCount: number; |
| 172 | + presentCount: number; |
| 173 | +} |
| 174 | +export const getCurrentConversationOccupancy = createSelector( |
| 175 | + [ |
| 176 | + getCurrentConversationId, |
| 177 | + getUsersByConversationId, |
| 178 | + getPresenceByConversationId |
| 179 | + ], |
| 180 | + ( |
| 181 | + currentConversationId: string, |
| 182 | + conversationMemberships: MembershipHash, |
| 183 | + conversationPresence: ConversationPresence |
| 184 | + ): ConversationOccupancyFragment => { |
| 185 | + const members = conversationMemberships[currentConversationId]; |
| 186 | + const presence = conversationPresence[currentConversationId]; |
| 187 | + return { |
| 188 | + joinedCount: members ? members.length : 0, |
| 189 | + presentCount: presence ? presence.occupancy : 0 |
| 190 | + }; |
| 191 | + } |
| 192 | +); |
| 193 | +const ConversationOccupancy = () => { |
| 194 | + const { |
| 195 | + joinedCount, |
| 196 | + presentCount |
| 197 | + }: ConversationOccupancyFragment = useSelector( |
| 198 | + getCurrentConversationOccupancy |
| 199 | + ); |
| 200 | + const views = useSelector(getViewStates); |
| 201 | + const isConversationMembersLayoutVisible = views.ConversationMembers; |
| 202 | + const dispatch = useDispatch(); |
| 203 | + return ( |
| 204 | + <Wrapper |
| 205 | + highlighted={isConversationMembersLayoutVisible} |
| 206 | + onClick={() => { |
| 207 | + isConversationMembersLayoutVisible |
| 208 | + ? dispatch(conversationMembersViewHidden()) |
| 209 | + : dispatch(conversationMembersViewDisplayed()); |
| 210 | + }} |
| 211 | + > |
| 212 | + <OccupancyNumber> |
| 213 | + <em>{presentCount}</em> | {joinedCount} |
| 214 | + </OccupancyNumber> |
| 215 | + <IconWrapper> |
| 216 | + <PeopleGroupIcon |
| 217 | + title={ |
| 218 | + isConversationMembersLayoutVisible |
| 219 | + ? "Hide members list" |
| 220 | + : "Show conversation members" |
| 221 | + } |
| 222 | + active={isConversationMembersLayoutVisible} |
| 223 | + /> |
| 224 | + </IconWrapper> |
| 225 | + </Wrapper> |
| 226 | + ); |
| 227 | +}; |
| 228 | + |
| 229 | +export { ConversationOccupancy }; |
| 230 | +``` |
0 commit comments