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