moving to load participants when dialog opens

Author: ashleysmithTTD

src/api/routers/managementRouter.ts

@@ -1,6 +1,7 @@
 import express, { Response } from 'express';
 import { z } from 'zod';
 
+import { GetUserParticipants } from '../../web/services/participant';
 import { isSuperUserCheck } from '../middleware/userRoleMiddleware';
 import { GetUserAuditTrail } from '../services/auditTrailService';
 import { getAllUsersList, getUserById, updateUserLock } from '../services/managementService';
@@ -17,6 +18,12 @@ const handleGetUserAuditTrail = async (req: UserParticipantRequest, res: Respons
   return res.status(200).json(auditTrail ?? []);
 };
 
+const handleGetUserParticipants = async (req: UserParticipantRequest, res: Response) => {
+  const { userId } = z.object({ userId: z.coerce.number() }).parse(req.params);
+  const participants = await GetUserParticipants(userId);
+  return res.status(200).json(participants ?? []);
+};
+
 const handleChangeUserLock = async (req: ParticipantRequest, res: Response) => {
   const { userId } = z.object({ userId: z.coerce.number() }).parse(req.params);
   const { isLocked } = z.object({ isLocked: z.boolean() }).parse(req.body);
@@ -34,6 +41,7 @@ export function createManagementRouter() {
 
   managementRouter.get('/users', isSuperUserCheck, handleGetAllUsers);
   managementRouter.get('/:userId/auditTrail', isSuperUserCheck, handleGetUserAuditTrail);
+  managementRouter.get('/:userId/participants', isSuperUserCheck, handleGetUserParticipants);
   managementRouter.patch('/:userId/changeLock', isSuperUserCheck, handleChangeUserLock);
 
   return managementRouter;

src/api/services/participantsService.ts

@@ -81,6 +81,10 @@ export const getAllParticipants = async (): Promise<Participant[]> => {
     .withGraphFetched('[apiRoles, approver, types, users]');
 };
 
+export const getUserParticipants = async (userId: number): Promise<Participant[]> => {
+  return Participant.query().withGraphFetched('userToParticipantRoles').where('userId', userId);
+};
+
 export const getParticipantsBySiteIds = async (siteIds: number[]) => {
   return Participant.query().whereIn('siteId', siteIds).withGraphFetched('types');
 };

src/web/components/UserManagement/UserManagementItem.tsx

@@ -1,7 +1,6 @@
 import * as Switch from '@radix-ui/react-switch';
 import { useState } from 'react';
 
-import { ParticipantDTO } from '../../../api/entities/Participant';
 import { UserDTO } from '../../../api/entities/User';
 import UserAuditTrailDialog from './UserAuditTrailDialog';
 import UserParticipantsDialog from './UserParticipantsDialog';
@@ -10,15 +9,10 @@ import './UserManagementItem.scss';
 
 type UserManagementItemProps = Readonly<{
   user: UserDTO;
-  userParticipants: ParticipantDTO[];
   onChangeUserLock: (userId: number, isLocked: boolean) => Promise<void>;
 }>;
 
-export function UserManagementItem({
-  user,
-  userParticipants,
-  onChangeUserLock,
-}: UserManagementItemProps) {
+export function UserManagementItem({ user, onChangeUserLock }: UserManagementItemProps) {
   const [showUserParticipantsDialog, setShowUserParticipantsDialog] = useState<boolean>(false);
   const [showUserAuditTrailDialog, setShowUserAuditTrailDialog] = useState<boolean>(false);
 
@@ -46,11 +40,7 @@ export function UserManagementItem({
           View Participants
         </button>
         {showUserParticipantsDialog && (
-          <UserParticipantsDialog
-            user={user}
-            userParticipants={userParticipants}
-            onOpenChange={onUserParticipantsDialogChange}
-          />
+          <UserParticipantsDialog user={user} onOpenChange={onUserParticipantsDialogChange} />
         )}
 
         <button type='button' className='viewable-button' onClick={onUserAuditTrailDialogChange}>

src/web/components/UserManagement/UserManagementTable.tsx

@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 
-import { ParticipantDTO } from '../../../api/entities/Participant';
 import { UserDTO } from '../../../api/entities/User';
 import { SortableProvider, useSortable } from '../../contexts/SortableTableProvider';
 import { PagingTool } from '../Core/Paging/PagingTool';
@@ -14,7 +13,6 @@ import './UserManagementTable.scss';
 
 type UserManagementTableProps = Readonly<{
   users: UserDTO[];
-  allParticipants: ParticipantDTO[];
   onChangeUserLock: (userId: number, isLocked: boolean) => Promise<void>;
 }>;
 
@@ -26,11 +24,7 @@ function NoUsers() {
   );
 }
 
-function UserManagementTableContent({
-  users,
-  allParticipants,
-  onChangeUserLock,
-}: UserManagementTableProps) {
+function UserManagementTableContent({ users, onChangeUserLock }: UserManagementTableProps) {
   const initialRowsPerPage = 25;
   const initialPageNumber = 1;
 
@@ -79,12 +73,6 @@ function UserManagementTableContent({
 
   const pagedRows = getPagedUsers(sortedUsers);
 
-  const getUserParticipants = (user: UserDTO) => {
-    return allParticipants.filter((p) =>
-      user.userToParticipantRoles?.find((role) => role.participantId === p.id)
-    );
-  };
-
   return (
     <div className='users-table-container'>
       <div className='users-table-header'>
@@ -116,12 +104,7 @@ function UserManagementTableContent({
 
         <tbody>
           {pagedRows.map((user) => (
-            <UserManagementItem
-              key={user.id}
-              user={user}
-              userParticipants={getUserParticipants(user)}
-              onChangeUserLock={onChangeUserLock}
-            />
+            <UserManagementItem key={user.id} user={user} onChangeUserLock={onChangeUserLock} />
           ))}
         </tbody>
       </table>

src/web/components/UserManagement/UserParticipantsDialog.tsx

@@ -1,31 +1,50 @@
+import { useEffect, useState } from 'react';
+
 import { ParticipantDTO } from '../../../api/entities/Participant';
 import { UserDTO } from '../../../api/entities/User';
 import { UserRoleId } from '../../../api/entities/UserRole';
+import { GetUserParticipants } from '../../services/participant';
 import { Dialog } from '../Core/Dialog/Dialog';
+import { Loading } from '../Core/Loading/Loading';
 import UserParticipantsTable from './UserPartcipantsTable';
 
 type UserParticipantsDialogProps = Readonly<{
   user: UserDTO;
-  userParticipants: ParticipantDTO[];
   onOpenChange: () => void;
 }>;
 
-function UserParticipantsDialog({
-  user,
-  userParticipants,
-  onOpenChange,
-}: UserParticipantsDialogProps) {
+function UserParticipantsDialog({ user, onOpenChange }: UserParticipantsDialogProps) {
+  const [userParticipants, setUserParticipants] = useState<ParticipantDTO[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  // useEffect(() => {
+  //   const getParticipants = async () => {
+  //     const participants = await GetUserParticipants(user.id);
+  //     setUserParticipants(participants);
+  //     setIsLoading(false);
+  //   };
+  //   getParticipants();
+  // }, [user]);
+
   return (
     <Dialog
       title={`Participants List for ${user.firstName} ${user.lastName}`}
       onOpenChange={onOpenChange}
       closeButtonText='Cancel'
     >
-      {user.userToParticipantRoles?.find((role) => role.userRoleId === UserRoleId.UID2Support) ? (
-        <div>This user has the UID2 support role and has admin access to all participants.</div>
+      {isLoading ? (
+        <Loading message='Loading audit trail...' />
       ) : (
         <div>
-          <UserParticipantsTable user={user} userParticipants={userParticipants} />
+          {user.userToParticipantRoles?.find(
+            (role) => role.userRoleId === UserRoleId.UID2Support
+          ) ? (
+            <div>This user has the UID2 support role and has admin access to all participants.</div>
+          ) : (
+            <div>
+              <UserParticipantsTable user={user} userParticipants={userParticipants ?? []} />
+            </div>
+          )}
         </div>
       )}
     </Dialog>

src/web/screens/manageUsers.tsx

@@ -5,18 +5,14 @@ import { defer, useLoaderData } from 'react-router-typesafe';
 import { Loading } from '../components/Core/Loading/Loading';
 import { ScreenContentContainer } from '../components/Core/ScreenContentContainer/ScreenContentContainer';
 import UserManagementTable from '../components/UserManagement/UserManagementTable';
-// import { GetAuditTrail } from '../services/auditTrailService';
-import { GetAllParticipants } from '../services/participant';
 import { ChangeUserLock, GetAllUsers } from '../services/userAccount';
-import { AwaitTypesafe, resolveAll } from '../utils/AwaitTypesafe';
+import { AwaitTypesafe } from '../utils/AwaitTypesafe';
 import { RouteErrorBoundary } from '../utils/RouteErrorBoundary';
 import { PortalRoute } from './routeUtils';
 
 const loader = () => {
   const userList = GetAllUsers();
-  const participantsList = GetAllParticipants();
-  // const auditTrail = GetAuditTrail();
-  return defer({ userList, participantsList });
+  return defer({ userList });
 };
 
 function ManageUsers() {
@@ -36,21 +32,8 @@ function ManageUsers() {
       </p>
       <ScreenContentContainer>
         <Suspense fallback={<Loading message='Loading users...' />}>
-          <AwaitTypesafe
-            resolve={resolveAll({
-              users: data.userList,
-              participants: data.participantsList,
-              // auditTrail: data.auditTrail,
-            })}
-          >
-            {(loadedData) => (
-              <UserManagementTable
-                users={loadedData.users}
-                allParticipants={loadedData.participants}
-                // auditTrail={loadedData.auditTrail}
-                onChangeUserLock={onChangeUserLock}
-              />
-            )}
+          <AwaitTypesafe resolve={data.userList}>
+            {(users) => <UserManagementTable users={users} onChangeUserLock={onChangeUserLock} />}
           </AwaitTypesafe>
         </Suspense>
       </ScreenContentContainer>

src/web/services/participant.ts

@@ -44,6 +44,17 @@ export async function GetAllParticipants() {
   }
 }
 
+export async function GetUserParticipants(userId: number) {
+  try {
+    const result = await axios.get<ParticipantDTO[]>(`/manage/${userId}/participants`, {
+      validateStatus: (status) => status === 200,
+    });
+    return result.data;
+  } catch (e: unknown) {
+    throw backendError(e, 'Could not load user participants');
+  }
+}
+
 export async function GetSignedParticipants() {
   try {
     const result = await axios.get<SignedParticipantDTO[]>(`/participants/signed`, {