diff --git a/src/client/components/Chat.tsx b/src/client/components/Chat.tsx index 7cd8de9..7e72f31 100644 --- a/src/client/components/Chat.tsx +++ b/src/client/components/Chat.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { styled } from 'styled-components'; import { thread, user } from '@cord-sdk/react'; import type { Channel } from 'src/client/consts/Channel'; @@ -18,16 +18,10 @@ interface ChatProps { } export function Chat({ channel, onOpenThread }: ChatProps) { - const { orgMembers, loading, hasMore, fetchMore } = user.useOrgMembers({ + const orgMembers = user.useOrgMembers({ organizationID: channel.org ?? EVERYONE_ORG_ID, }); - useEffect(() => { - if (!loading && hasMore) { - void fetchMore(50); - } - }, [orgMembers, hasMore, loading, fetchMore]); - const { threads: pinnedThreads } = thread.useLocationData( { channel: channel.id }, { @@ -50,8 +44,8 @@ export function Chat({ channel, onOpenThread }: ChatProps) { # {channel.id} - {orgMembers && ( - + {orgMembers.orgMembers && ( + )} diff --git a/src/client/components/PageUsersLabel.tsx b/src/client/components/PageUsersLabel.tsx index ed08f3f..ece92a3 100644 --- a/src/client/components/PageUsersLabel.tsx +++ b/src/client/components/PageUsersLabel.tsx @@ -1,26 +1,23 @@ -import React, { useMemo } from 'react'; +import React from 'react'; import { UserIcon } from '@heroicons/react/24/outline'; import { Tooltip } from 'react-tooltip'; import styled from 'styled-components'; import { Facepile } from '@cord-sdk/react'; -import type { ClientUserData } from '@cord-sdk/types'; +import type { OrgMembersData } from '@cord-sdk/types'; import type { Channel } from 'src/client/consts/Channel'; import { Colors } from 'src/client/consts/Colors'; -import { combine } from 'src/client/utils'; +import { combine, isDefined } from 'src/client/utils'; import { UsersInChannelModal } from 'src/client/components/UsersInChannelModal'; export function PageUsersLabel({ - users, + orgMembers, channel, }: { - users: ClientUserData[]; + orgMembers: OrgMembersData; channel: Channel; }) { const [showModal, setShowModal] = React.useState(false); - const userIDs = useMemo(() => users.map((u) => u.id), [users]); - const previewUsers = userIDs.slice(1, 4); - return ( <> View all members of this channel. {`Includes ${combine( 'and', - users.map((user) => user?.name ?? ''), + [ + ...orgMembers.orgMembers.map((user) => user?.name), + orgMembers.hasMore ? 'others' : null, + ].filter(isDefined), )}`} @@ -47,15 +47,21 @@ export function PageUsersLabel({ {/* notes: type of users coming from cord api not matching what is expected by cord component */} - + u.id)} + enableTooltip={false} + /> - {users.length} + + {orgMembers.orgMembers.length} + {orgMembers.hasMore ? '+' : ''} + {showModal && ( setShowModal(false)} channel={channel} - users={users} + orgMembers={orgMembers} /> )} diff --git a/src/client/components/UsersInChannelModal.tsx b/src/client/components/UsersInChannelModal.tsx index a9fd432..6325e90 100644 --- a/src/client/components/UsersInChannelModal.tsx +++ b/src/client/components/UsersInChannelModal.tsx @@ -5,22 +5,23 @@ import { Avatar as DefaultAvatar, presence, } from '@cord-sdk/react'; -import type { ClientUserData } from '@cord-sdk/types'; +import type { OrgMembersData } from '@cord-sdk/types'; import type { Channel } from 'src/client/consts/Channel'; import { Colors } from 'src/client/consts/Colors'; import { ActiveBadge } from 'src/client/components/ActiveBadge'; import { Name } from 'src/client/components/Name'; import { XIcon } from 'src/client/components/Buttons'; +import { PaginationTrigger } from 'src/client/components/PaginationTrigger'; interface UsersInChannelModalProps { onClose: () => void; channel: Channel; - users: ClientUserData[]; + orgMembers: OrgMembersData; } export function UsersInChannelModal({ onClose, - users, + orgMembers, channel, }: UsersInChannelModalProps) { const usersPresent = presence.useLocationData( @@ -40,7 +41,7 @@ export function UsersInChannelModal({ - {users.map((user) => { + {orgMembers.orgMembers.map((user) => { const isUserPresent = usersPresent?.some( (presence) => presence.id === user.id, ); @@ -57,6 +58,9 @@ export function UsersInChannelModal({ ); })} + + + diff --git a/src/client/utils.ts b/src/client/utils.ts index 6a56e85..377e11c 100644 --- a/src/client/utils.ts +++ b/src/client/utils.ts @@ -21,3 +21,7 @@ export function combine(combiner: string, items: string[]): string { }`; } } + +export function isDefined(value: T | null | undefined): value is T { + return value !== null && value !== undefined; +}