Use PaginationTrigger to avoid loading all org members

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) {
       <ChannelDetailsBar>
         <PageHeaderWrapper>
           <PageHeader># {channel.id}</PageHeader>
-          {orgMembers && (
-            <PageUsersLabel users={orgMembers} channel={channel} />
+          {orgMembers.orgMembers && (
+            <PageUsersLabel orgMembers={orgMembers} channel={channel} />
           )}
         </PageHeaderWrapper>
       </ChannelDetailsBar>

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 (
     <>
       <Tooltip
@@ -34,7 +31,10 @@ export function PageUsersLabel({
           <span>View all members of this channel.</span>
           <span>{`Includes ${combine(
             'and',
-            users.map((user) => user?.name ?? ''),
+            [
+              ...orgMembers.orgMembers.map((user) => user?.name),
+              orgMembers.hasMore ? 'others' : null,
+            ].filter(isDefined),
           )}`}</span>
         </TooltipText>
       </Tooltip>
@@ -47,15 +47,21 @@ export function PageUsersLabel({
         {/* notes: type of users coming from cord 
         api not matching what is expected by cord component
          */}
-        <StyledFacepile users={previewUsers} enableTooltip={false} />
+        <StyledFacepile
+          users={orgMembers.orgMembers.slice(1, 4).map((u) => u.id)}
+          enableTooltip={false}
+        />
         <StyledUserIcon width={18} height={18} />
-        <UserCount>{users.length}</UserCount>
+        <UserCount>
+          {orgMembers.orgMembers.length}
+          {orgMembers.hasMore ? '+' : ''}
+        </UserCount>
       </UsersLabel>
       {showModal && (
         <UsersInChannelModal
           onClose={() => setShowModal(false)}
           channel={channel}
-          users={users}
+          orgMembers={orgMembers}
         />
       )}
     </>

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({
         </Header>
 
         <UsersList>
-          {users.map((user) => {
+          {orgMembers.orgMembers.map((user) => {
             const isUserPresent = usersPresent?.some(
               (presence) => presence.id === user.id,
             );
@@ -57,6 +58,9 @@ export function UsersInChannelModal({
               </UserDetails>
             );
           })}
+          <UserDetails>
+            <PaginationTrigger {...orgMembers} />
+          </UserDetails>
         </UsersList>
       </Box>
     </Modal>

src/client/utils.ts

@@ -21,3 +21,7 @@ export function combine(combiner: string, items: string[]): string {
     }`;
   }
 }
+
+export function isDefined<T>(value: T | null | undefined): value is T {
+  return value !== null && value !== undefined;
+}