Merge pull request #2226 from Northeastern-Electric-Racing/#2028-delete-design-review-hook

#2028 use delete design review hook

Author: walker-sean

src/frontend/src/apis/design-reviews.api.ts

@@ -58,6 +58,14 @@ export const getSingleDesignReview = async (id: string) => {
   });
 };
 
+/**
+ * Deletes a design review
+ * @param id the ID of the design review to delete
+ */
+export const deleteDesignReview = async (id: string) => {
+  return axios.delete(apiUrls.designReviewDelete(id));
+};
+
 export const markUserConfirmed = async (id: string, payload: { availability: number[] }) => {
   return axios.post<DesignReview>(apiUrls.designReviewMarkUserConfirmed(id), payload);
 };

src/frontend/src/hooks/design-reviews.hooks.ts

@@ -5,6 +5,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { DesignReview, TeamType, WbsNumber, DesignReviewStatus } from 'shared';
 import {
+  deleteDesignReview,
   editDesignReview,
   createDesignReviews,
   getAllDesignReviews,
@@ -98,6 +99,26 @@ export const useAllTeamTypes = () => {
   });
 };
 
+/**
+ * Custom react hook to delete a design review
+ */
+
+export const useDeleteDesignReview = (id: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<DesignReview, Error>(
+    ['design-reviews', 'delete'],
+    async () => {
+      const { data } = await deleteDesignReview(id);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['design-reviews']);
+      }
+    }
+  );
+};
+
 /**
  * Custom react hook to get a single design review
  *

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx

@@ -1,33 +1,78 @@
-import { Autocomplete, Box, Checkbox, Grid, TextField, useTheme } from '@mui/material';
+import { Autocomplete, Box, Checkbox, Grid, IconButton, TextField, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../../components/PageLayout';
 import { usersToAvailabilities, existingMeetingData } from '../../../utils/design-review.utils';
 import AvailabilityView from './AvailabilityView';
-import { useAllUsers } from '../../../hooks/users.hooks';
+import { useAllUsers, useCurrentUser } from '../../../hooks/users.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { userToAutocompleteOption } from '../../../utils/teams.utils';
 import { useState } from 'react';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import { routes } from '../../../utils/routes';
-import { DesignReview, wbsPipe } from 'shared';
+import { DesignReview, isAdmin, wbsPipe } from 'shared';
+import { useDeleteDesignReview } from '../../../hooks/design-reviews.hooks';
+import { useHistory } from 'react-router-dom';
+import { useToast } from '../../../hooks/toasts.hooks';
+import NERModal from '../../../components/NERModal';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 interface DesignReviewDetailPageProps {
   designReview: DesignReview;
 }
 
 const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designReview, designReview: { teamType } }) => {
   const theme = useTheme();
+  const user = useCurrentUser();
   const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: allUsers } = useAllUsers();
   const [requiredUsers, setRequiredUsers] = useState([].map(userToAutocompleteOption));
   const [optionalUsers, setOptionalUsers] = useState([].map(userToAutocompleteOption));
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const { mutateAsync: deleteDesignReview } = useDeleteDesignReview(designReview.designReviewId);
+  const history = useHistory();
+  const toast = useToast();
   if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
   if (allUsersIsLoading || !allUsers) return <LoadingIndicator />;
   const designReviewName = `${wbsPipe(designReview.wbsNum)} - ${designReview.wbsName}`;
   const users = allUsers.map(userToAutocompleteOption);
 
+  const handleDelete = () => {
+    try {
+      deleteDesignReview();
+      history.push(routes.CALENDAR);
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        toast.error(e.message, 3000);
+      }
+    }
+  };
+
+  const DeleteModal = () => {
+    return (
+      <NERModal
+        open={showDeleteModal}
+        onHide={() => setShowDeleteModal(false)}
+        title="Warning!"
+        cancelText="No"
+        submitText="Yes"
+        onSubmit={handleDelete}
+      >
+        <Typography>Are you sure you want to delete this design review?</Typography>
+      </NERModal>
+    );
+  };
+
+  const hasDeletePerms = user.userId === designReview.userCreated.userId || isAdmin(user.role);
+
   return (
     <PageLayout
+      headerRight={
+        hasDeletePerms && (
+          <IconButton onClick={() => setShowDeleteModal(true)}>
+            <DeleteIcon />
+          </IconButton>
+        )
+      }
       title="Scheduling"
       previousPages={[
         {
@@ -36,6 +81,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
         }
       ]}
     >
+      <DeleteModal />
       <Grid container spacing={3} display={'flex'} paddingBottom={2}>
         <Grid item xs={1}>
           <Box

src/frontend/src/utils/urls.ts

@@ -137,6 +137,7 @@ const designReviewsCreate = () => `${designReviews()}/create`;
 const teamTypes = () => `${designReviews()}/teamType/all`;
 const designReviewsEdit = (designReviewId: string) => `${designReviews()}/${designReviewId}/edit`;
 const designReviewById = (id: string) => `${designReviews()}/${id}`;
+const designReviewDelete = (id: string) => `${designReviewById(id)}/delete`;
 const designReviewMarkUserConfirmed = (id: string) => `${designReviewById(id)}/confirm-schedule`;
 
 /**************** Other Endpoints ****************/
@@ -251,6 +252,7 @@ export const apiUrls = {
   designReviewsEdit,
   designReviewMarkUserConfirmed,
   teamTypes,
+  designReviewDelete,
 
   version
 };