#1183 using NERFormModal

Author: walker-sean

src/frontend/src/apis/teams.api.ts

@@ -38,7 +38,7 @@ export const setTeamHead = (id: string, userId: number) => {
 };
 
 export const deleteTeam = (id: string) => {
-  return axios.post(apiUrls.teamsDelete(id));
+  return axios.post<{ message: string }>(apiUrls.teamsDelete(id));
 };
 
 export const setTeamLeads = (id: string, userIds: number[]) => {

src/frontend/src/pages/TeamsPage/DeleteTeamModal.tsx

@@ -0,0 +1,97 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import { useToast } from '../../hooks/toasts.hooks';
+import * as yup from 'yup';
+import { useDeleteTeam, useSingleTeam } from '../../hooks/teams.hooks';
+import { useHistory } from 'react-router-dom';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+import NERFormModal from '../../components/NERFormModal';
+import { Typography, FormControl, FormLabel } from '@mui/material';
+import ReactHookTextField from '../../components/ReactHookTextField';
+
+interface DeleteTeamInputs {
+  teamName: string;
+}
+
+interface DeleteTeamModalProps {
+  teamId: string;
+  showModal: boolean;
+  onHide: () => void;
+}
+
+const DeleteTeamModal: React.FC<DeleteTeamModalProps> = ({ teamId, showModal, onHide }: DeleteTeamModalProps) => {
+  const { data: team, isLoading: teamIsLoading, isError: teamIsError, error: teamError } = useSingleTeam(teamId);
+  const { isLoading: deleteIsLoading, isError: deleteIsError, error: deleteError, mutateAsync } = useDeleteTeam();
+  const toast = useToast();
+  const teamNameTester = (teamName: string | undefined) =>
+    team !== undefined && teamName !== undefined && teamName.toLowerCase() === team.teamName.toLowerCase();
+  const schema = yup.object().shape({
+    teamName: yup.string().required().test('team-name-test', 'Team name does not match', teamNameTester)
+  });
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isValid }
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      teamName: ''
+    },
+    mode: 'onChange'
+  });
+  const history = useHistory();
+
+  const handleConfirm = async ({ teamName }: DeleteTeamInputs) => {
+    if (team?.teamName.toLowerCase() === teamName.toLowerCase()) {
+      try {
+        await mutateAsync(teamId);
+        onHide();
+        history.goBack();
+        toast.success('Team deleted successfully!');
+      } catch (e) {
+        if (e instanceof Error) {
+          toast.error(e.message);
+        }
+      }
+    }
+  };
+
+  if (!team || teamIsLoading || deleteIsLoading) return <LoadingIndicator />;
+  if (teamIsError) return <ErrorPage message={teamError.message} />;
+  if (deleteIsError) return <ErrorPage message={deleteError?.message} />;
+
+  return (
+    <NERFormModal
+      open={showModal}
+      onHide={onHide}
+      title={`Delete Team ${team.teamName}`}
+      reset={() => reset({ teamName: '' })}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={handleConfirm}
+      formId="delete-team-form"
+      submitText="Delete"
+      disabled={!isValid}
+      showCloseButton
+    >
+      <Typography sx={{ marginBottom: '1rem' }}>Are you sure you want to delete Team {team.teamName}?</Typography>
+      <Typography sx={{ fontWeight: 'bold' }}>This action cannot be undone!</Typography>
+      <FormControl>
+        <FormLabel sx={{ marginTop: '1rem', marginBottom: '1rem' }}>
+          To confirm deletion, please type in the name of this team.
+        </FormLabel>
+        <ReactHookTextField
+          control={control}
+          name="teamName"
+          errorMessage={errors.teamName}
+          placeholder="Enter Team Name here"
+          sx={{ width: 1 }}
+          type="string"
+        />
+      </FormControl>
+    </NERFormModal>
+  );
+};
+
+export default DeleteTeamModal;

src/frontend/src/pages/TeamsPage/DeleteTeamModalContainer/DeleteTeam.tsx

@@ -14,7 +14,7 @@ import { NERButton } from '../../components/NERButton';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin } from 'shared';
 import { useState } from 'react';
-import DeleteTeam from './DeleteTeamModalContainer/DeleteTeam';
+import DeleteTeamModal from './DeleteTeamModal';
 
 interface ParamTypes {
   teamId: string;
@@ -42,7 +42,7 @@ const TeamSpecificPage: React.FC = () => {
 
   return (
     <PageLayout
-      headerRight={deleteButton}
+      headerRight={isAdmin(user.role) && deleteButton}
       title={`Team ${data.teamName}`}
       previousPages={[{ name: 'Teams', route: routes.TEAMS }]}
     >
@@ -63,9 +63,7 @@ const TeamSpecificPage: React.FC = () => {
           <DescriptionPageBlock team={data} />
         </Grid>
       </Grid>
-      {showDeleteModal && (
-        <DeleteTeam teamId={teamId} showModal={showDeleteModal} handleClose={() => setShowDeleteModal(false)} />
-      )}
+      <DeleteTeamModal teamId={teamId} showModal={showDeleteModal} onHide={() => setShowDeleteModal(false)} />
     </PageLayout>
   );
 };

src/frontend/src/pages/TeamsPage/DeleteTeamModalContainer/DeleteTeamView.tsx

@@ -6,12 +6,12 @@
 import { Route, Switch } from 'react-router-dom';
 import { routes } from '../../utils/routes';
 import TeamsPage from './TeamsPage';
-import TeamDetailPage from './TeamSpecificPage';
+import TeamSpecificPage from './TeamSpecificPage';
 
 const Teams: React.FC = () => {
   return (
     <Switch>
-      <Route path={routes.TEAMS_BY_ID} component={TeamDetailPage} />
+      <Route path={routes.TEAMS_BY_ID} component={TeamSpecificPage} />
       <Route path={routes.TEAMS} component={TeamsPage} />
     </Switch>
   );