#2238 fixed table, removed team search

Author: walker-sean

src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx

@@ -1,48 +1,66 @@
 import React, { useState } from 'react';
-import {
-  TextField,
-  FormControl,
-  FormLabel,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-  TableCell,
-  TableRow,
-  Grid,
-  Typography
-} from '@mui/material';
+import { TextField, FormControl, FormLabel, TableCell, TableRow, Grid, Typography } from '@mui/material';
 import AdminToolTable from './AdminToolTable';
+import { useAllTeams } from '../../hooks/teams.hooks';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+import { fullNamePipe } from '../../utils/pipes';
+import { useAllUsers } from '../../hooks/users.hooks';
+import { useAllDesignReviews } from '../../hooks/design-reviews.hooks';
 
 const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
-  const [selectedTeam, setSelectedTeam] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
 
-  // TODO: to be deleted later, this is just stub data for filter options
-  const teams = ['All', 'Team A', 'Team B', 'Team C'];
+  const { data: allTeams, isLoading: teamsIsLoading, isError: teamsIsError, error: teamsError } = useAllTeams();
+  const { data: allUsers, isLoading: usersIsLoading, isError: usersIsError, error: usersError } = useAllUsers();
+  const {
+    data: allDesignReviews,
+    isLoading: designReviewsIsLoading,
+    isError: designReviewsIsError,
+    error: designReviewsError
+  } = useAllDesignReviews();
 
-  // TODO: Stub data for team members, replace with dynamic data here
-  const teamMembers = [
-    { name: 'Batman', reviewsAttended: 2, missedReviews: 4 },
-    { name: 'Superman', reviewsAttended: 4, missedReviews: 1 }
-  ];
+  if (!allTeams || teamsIsLoading || !allUsers || usersIsLoading || !allDesignReviews || designReviewsIsLoading)
+    return <LoadingIndicator />;
+  if (teamsIsError) return <ErrorPage message={teamsError.message} />;
+  if (usersIsError) return <ErrorPage message={usersError.message} />;
+  if (designReviewsIsError) return <ErrorPage message={designReviewsError.message} />;
 
-  // TODO: Filtering team members based on search query here
-  const filteredMembers = teamMembers.filter((member) => member.name.toLowerCase().includes(searchQuery.toLowerCase()));
-
-  // TODO: Filtering for teams backend logic comes here
-  const handleTeamChange = (event: SelectChangeEvent) => {
-    setSelectedTeam(event.target.value as string);
-  };
+  const filteredMembers = allUsers.filter((member) =>
+    fullNamePipe(member).toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
   };
 
+  const attendanceDict: Map<number, number> = new Map();
+  const missedDict: Map<number, number> = new Map();
+
+  allDesignReviews.forEach((review) => {
+    review.attendees.forEach((member) => {
+      if (attendanceDict.has(member.userId)) {
+        attendanceDict.set(member.userId, attendanceDict.get(member.userId)! + 1);
+      } else {
+        attendanceDict.set(member.userId, 1);
+      }
+    });
+    review.requiredMembers.forEach((member) => {
+      if (!review.attendees.map((user) => user.userId).includes(member.userId)) {
+        if (missedDict.has(member.userId)) {
+          missedDict.set(member.userId, missedDict.get(member.userId)! + 1);
+        } else {
+          missedDict.set(member.userId, 1);
+        }
+      }
+    });
+  });
+
   const attendeeRows = filteredMembers.map((member, index) => (
     <TableRow key={index}>
-      <TableCell sx={{ border: '2px solid black' }}>{member.name}</TableCell>
-      <TableCell sx={{ border: '2px solid black' }}>{member.reviewsAttended}</TableCell>
-      <TableCell sx={{ border: '2px solid black' }}>{member.missedReviews}</TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>{fullNamePipe(member)}</TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>{attendanceDict.get(member.userId) ?? 0}</TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>{missedDict.get(member.userId) ?? 0}</TableCell>
     </TableRow>
   ));
 
@@ -55,24 +73,6 @@ const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
         <FormLabel htmlFor="search-by-name">Search by team member name</FormLabel>
         <TextField id="search-by-name" variant="outlined" value={searchQuery} onChange={handleSearchChange} fullWidth />
       </FormControl>
-      <FormControl fullWidth sx={{ marginBottom: 2 }}>
-        <FormLabel id="team-select-label">Team</FormLabel>
-        <Select
-          labelId="team-select-label"
-          id="team-select"
-          value={selectedTeam}
-          onChange={handleTeamChange}
-          displayEmpty
-          fullWidth
-        >
-          {teams.map((team) => (
-            <MenuItem key={team} value={team}>
-              {team}
-            </MenuItem>
-          ))}
-          {/* TODO: we'll have to change this here as well for backend logic, above is just a stub implementation. */}
-        </Select>
-      </FormControl>
       <AdminToolTable
         columns={[
           { name: 'Team Member Name', width: '33%' },