#1182 - clean up code

Author: RChandler234

src/backend/src/routes/teams.routes.ts

@@ -2,7 +2,7 @@ import express from 'express';
 import TeamsController from '../controllers/teams.controllers';
 import { body } from 'express-validator';
 import { validateInputs } from '../utils/utils';
-import { intMinZero } from '../utils/validation.utils';
+import { intMinZero, nonEmptyString } from '../utils/validation.utils';
 
 const teamsRouter = express.Router();
 
@@ -24,10 +24,10 @@ teamsRouter.post(
 teamsRouter.post('/:teamId/set-head', intMinZero(body('userId')), validateInputs, TeamsController.setTeamHead);
 teamsRouter.post(
   '/create',
-  body('teamName').isString(),
+  nonEmptyString(body('teamName')),
   intMinZero(body('headId')),
-  body('slackId').isString(),
-  body('description').isString(),
+  nonEmptyString(body('slackId')),
+  nonEmptyString(body('description')),
   TeamsController.createTeam
 );
 

src/backend/src/services/teams.services.ts

@@ -192,12 +192,12 @@ export default class TeamsService {
     if (!newHead) throw new NotFoundException('User', headId);
     if (!isHead(newHead.role)) throw new HttpException(400, 'The team head must be at least a head');
 
-    // checking to see if any other teams have the new head as their current head or lead
+    // checking to see if any other teams have the new head as their current head
     const newHeadTeam = await prisma.team.findFirst({
       where: { headId }
     });
 
-    if (newHeadTeam) throw new HttpException(400, 'The new team head must not be a head or lead of another team');
+    if (newHeadTeam) throw new HttpException(400, 'The new team head must not be a head of another team');
 
     const duplicateName = await prisma.team.findFirst({
       where: { teamName }

src/frontend/src/components/NERAutocomplete.tsx

@@ -6,6 +6,7 @@
 import {
   Autocomplete,
   AutocompleteRenderInputParams,
+  FormHelperText,
   InputAdornment,
   SxProps,
   TextField,
@@ -14,6 +15,7 @@ import {
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { HTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
 
 interface NERAutocompleteProps {
   id: string;
@@ -25,6 +27,7 @@ interface NERAutocompleteProps {
   value?: { label: string; id: string } | null;
   listboxProps?: HTMLAttributes<HTMLUListElement>;
   filterSelectedOptions?: boolean;
+  errorMessage?: FieldError;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
@@ -36,7 +39,8 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   sx,
   value,
   listboxProps,
-  filterSelectedOptions
+  filterSelectedOptions,
+  errorMessage
 }) => {
   const theme = useTheme();
 
@@ -75,19 +79,22 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   };
 
   return (
-    <Autocomplete
-      isOptionEqualToValue={(option, value) => option.id === value.id}
-      disablePortal
-      id={id}
-      onChange={onChange}
-      options={options}
-      sx={autocompleteStyle}
-      size={size}
-      renderInput={autocompleteRenderInput}
-      value={value}
-      filterSelectedOptions={filterSelectedOptions}
-      ListboxProps={listboxProps}
-    />
+    <>
+      <Autocomplete
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        disablePortal
+        id={id}
+        onChange={onChange}
+        options={options}
+        sx={autocompleteStyle}
+        size={size}
+        renderInput={autocompleteRenderInput}
+        value={value}
+        filterSelectedOptions={filterSelectedOptions}
+        ListboxProps={listboxProps}
+      />
+      <FormHelperText error={!!errorMessage}>{errorMessage?.message}</FormHelperText>
+    </>
   );
 };
 

src/frontend/src/components/NERFormModal.tsx

@@ -42,7 +42,7 @@ const NERFormModal = ({
       disabled={disabled}
       showCloseButton={showCloseButton}
     >
-      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)}>
+      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)} noValidate>
         {children}
       </form>
     </NERModal>

src/frontend/src/pages/AdminToolsPage/AdminToolsUserManagement.tsx

@@ -82,7 +82,7 @@ const AdminToolsUserManagement: React.FC = () => {
     }
   };
 
-  const userToAutocompleteOption = (user: User): { label: string; id: string } => {
+  const userToAutocompleteOptionWithRole = (user: User): { label: string; id: string } => {
     return { label: `${fullNamePipe(user)} (${user.email}) - ${user.role}`, id: user.userId.toString() };
   };
 
@@ -93,10 +93,10 @@ const AdminToolsUserManagement: React.FC = () => {
           <NERAutocomplete
             id="users-autocomplete"
             onChange={usersSearchOnChange}
-            options={users.filter((user) => rankUserRole(user.role) < currentUserRank).map(userToAutocompleteOption)}
+            options={users.filter((user) => rankUserRole(user.role) < currentUserRank).map(userToAutocompleteOptionWithRole)}
             size="small"
             placeholder="Select a User"
-            value={user ? userToAutocompleteOption(user) : null}
+            value={user ? userToAutocompleteOptionWithRole(user) : null}
           />
         </Grid>
         <Grid item xs={12} md={4}>

src/frontend/src/pages/AdminToolsPage/CreateTeamModal.tsx

@@ -6,12 +6,12 @@ import { CreateTeamPayload, useCreateTeam } from '../../hooks/teams.hooks';
 import ErrorPage from '../ErrorPage';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import NERFormModal from '../../components/NERFormModal';
-import { FormControl, FormHelperText, FormLabel } from '@mui/material';
+import { FormControl, FormLabel } from '@mui/material';
 import ReactHookTextField from '../../components/ReactHookTextField';
 import { useAllUsers } from '../../hooks/users.hooks';
-import { User, isHead } from 'shared';
+import { isHead } from 'shared';
 import NERAutocomplete from '../../components/NERAutocomplete';
-import { fullNamePipe } from '../../utils/pipes';
+import { userComparator, userToAutocompleteOption } from '../../utils/teams.utils';
 
 const schema = yup.object().shape({
   teamName: yup.string().required('Team Name is Required'),
@@ -25,10 +25,6 @@ interface CreateTeamModalProps {
   handleClose: () => void;
 }
 
-const userToAutocompleteOption = (user: User): { label: string; id: string } => {
-  return { label: `${fullNamePipe(user)} (${user.email})`, id: `${user.userId}` };
-};
-
 const CreateTeamModal = ({ showModal, handleClose }: CreateTeamModalProps) => {
   const { isLoading, mutateAsync } = useCreateTeam();
   const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: users } = useAllUsers();
@@ -68,7 +64,7 @@ const CreateTeamModal = ({ showModal, handleClose }: CreateTeamModalProps) => {
 
   const headOptions = users
     .filter((user) => isHead(user.role))
-    .sort((a, b) => (a.firstName > b.firstName ? 1 : -1))
+    .sort(userComparator)
     .map(userToAutocompleteOption);
 
   return (
@@ -84,8 +80,7 @@ const CreateTeamModal = ({ showModal, handleClose }: CreateTeamModalProps) => {
     >
       <FormControl fullWidth>
         <FormLabel>Team Name</FormLabel>
-        <ReactHookTextField name="teamName" control={control} fullWidth />
-        <FormHelperText error>{errors.teamName?.message}</FormHelperText>
+        <ReactHookTextField name="teamName" control={control} fullWidth errorMessage={errors.teamName} />
       </FormControl>
       <FormControl fullWidth>
         <FormLabel>Head</FormLabel>
@@ -100,20 +95,25 @@ const CreateTeamModal = ({ showModal, handleClose }: CreateTeamModalProps) => {
               id="create-team-head"
               size="small"
               placeholder="Choose a user"
+              errorMessage={errors.headId}
             />
           )}
         />
-        <FormHelperText error>{errors.headId?.message}</FormHelperText>
       </FormControl>
       <FormControl fullWidth>
         <FormLabel>Slack Channel ID</FormLabel>
-        <ReactHookTextField name="slackId" control={control} fullWidth />
-        <FormHelperText error>{errors.slackId?.message}</FormHelperText>
+        <ReactHookTextField name="slackId" control={control} fullWidth errorMessage={errors.slackId} />
       </FormControl>
       <FormControl fullWidth>
         <FormLabel>Description</FormLabel>
-        <ReactHookTextField name="description" control={control} fullWidth multiline rows={5} />
-        <FormHelperText error>{errors.description?.message}</FormHelperText>
+        <ReactHookTextField
+          name="description"
+          control={control}
+          fullWidth
+          multiline
+          rows={5}
+          errorMessage={errors.description}
+        />
       </FormControl>
     </NERFormModal>
   );

src/frontend/src/pages/AdminToolsPage/TeamsTools.tsx

@@ -32,28 +32,13 @@ const TeamsTools = () => {
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
-            <TableCell
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="50%"
-            >
+            <TableCell align="left" sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }} width="50%">
               Team Name
             </TableCell>
-            <TableCell
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="30%"
-            >
+            <TableCell align="left" sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }} width="30%">
               Head
             </TableCell>
-            <TableCell
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="30%"
-            >
+            <TableCell align="left" sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }} width="30%">
               Number of Members
             </TableCell>
           </TableHead>

src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditDetails.tsx

@@ -2,11 +2,11 @@ import { User } from 'shared';
 import { FormControl, FormLabel, Grid } from '@mui/material';
 import PageBlock from '../../../layouts/PageBlock';
 import ReactHookTextField from '../../../components/ReactHookTextField';
-import { fullNamePipe } from '../../../utils/pipes';
 import NERAutocomplete from '../../../components/NERAutocomplete';
 import { ProjectEditFormInput } from './ProjectEditContainer';
 import { Control, FieldErrorsImpl } from 'react-hook-form';
 import { AttachMoney } from '@mui/icons-material';
+import { userToAutocompleteOption } from '../../../utils/teams.utils';
 
 interface ProjectEditDetailsProps {
   users: User[];
@@ -18,11 +18,6 @@ interface ProjectEditDetailsProps {
   setProjectLead: (projectLead?: string) => void;
 }
 
-const userToAutocompleteOption = (user?: User): { label: string; id: string } => {
-  if (!user) return { label: '', id: '' };
-  return { label: `${fullNamePipe(user)} (${user.email}) - ${user.role}`, id: user.userId.toString() };
-};
-
 const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
   users,
   control,

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskListComponents.tsx

@@ -7,7 +7,7 @@ import { Autocomplete, MenuItem, TextField } from '@mui/material';
 import { GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { DatePicker } from '@mui/x-date-pickers';
 import { UserPreview } from 'shared';
-import { getTaskAssigneeOptions, userToAutocompleteOption } from '../../../../utils/task.utils';
+import { getTaskAssigneeOptions, taskUserToAutocompleteOption } from '../../../../utils/task.utils';
 import ErrorPage from '../../../ErrorPage';
 
 export const TitleEdit = (params: GridRenderEditCellParams) => {
@@ -99,7 +99,7 @@ export const AssigneeEdit = (params: GridRenderEditCellParams) => {
 
   const teamMembers = getTaskAssigneeOptions(teams);
 
-  const autocompleteOptions = teamMembers.map(userToAutocompleteOption);
+  const autocompleteOptions = teamMembers.map(taskUserToAutocompleteOption);
 
   const handleValueChange = (
     newValue: {

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskListNotesModal.tsx

@@ -33,7 +33,7 @@ import { isUnderWordCount, countWords } from 'shared';
 import { useAuth } from '../../../../hooks/auth.hooks';
 import { useState } from 'react';
 import { Close, Edit } from '@mui/icons-material';
-import { getTaskAssigneeOptions, userToAutocompleteOption } from '../../../../utils/task.utils';
+import { getTaskAssigneeOptions, taskUserToAutocompleteOption } from '../../../../utils/task.utils';
 
 interface TaskListNotesModalProps {
   task: Task;
@@ -89,7 +89,7 @@ const TaskListNotesModal: React.FC<TaskListNotesModalProps> = ({
   });
   if (!auth.user) return <LoadingIndicator />;
 
-  const options: { label: string; id: number }[] = getTaskAssigneeOptions(teams).map(userToAutocompleteOption);
+  const options: { label: string; id: number }[] = getTaskAssigneeOptions(teams).map(taskUserToAutocompleteOption);
 
   const dialogWidth: Breakpoint = 'md';
   const priorityColor = task.priority === 'HIGH' ? '#ef4345' : task.priority === 'LOW' ? '#00ab41' : '#FFA500';