Merge pull request #2783 from Northeastern-Electric-Racing/2717-recru…

…itment-delete-faqs-and-milestones #2717 recruitment delete faqs and milestones
Northeastern-Electric-Racing · Sep 11, 2024 · 1b2023b · 1b2023b
2 parents 4e5ec12 + e2f8cca
commit 1b2023b
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 7 deletions.
diff --git a/src/backend/src/services/recruitment.services.ts b/src/backend/src/services/recruitment.services.ts
@@ -106,7 +106,7 @@ export default class RecruitmentServices {
    */
   static async getAllFaqs(organization: Organization) {
     const allFaqs = await prisma.frequentlyAskedQuestion.findMany({
-      where: { organizationId: organization.organizationId }
+      where: { dateDeleted: null, organizationId: organization.organizationId }
     });
 
     return allFaqs;

diff --git a/src/frontend/src/apis/recruitment.api.ts b/src/frontend/src/apis/recruitment.api.ts
@@ -22,6 +22,10 @@ export const editMilestone = (payload: MilestonePayload, id: string) => {
   });
 };
 
+export const deleteMilestone = (milestoneId: string) => {
+  return axios.delete<{ message: string }>(apiUrls.milestoneDelete(milestoneId));
+};
+
 export const getAllFaqs = () => {
   return axios.get<FrequentlyAskedQuestion[]>(apiUrls.allFaqs(), {
     transformResponse: (data) => JSON.parse(data)
@@ -39,3 +43,7 @@ export const editFaq = (payload: FaqPayload, id: string) => {
     ...payload
   });
 };
+
+export const deleteFaq = (faqId: string) => {
+  return axios.delete<{ message: string }>(apiUrls.faqDelete(faqId));
+};
diff --git a/src/frontend/src/components/NERDeleteModal.tsx b/src/frontend/src/components/NERDeleteModal.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { FieldValues, useForm } from 'react-hook-form';
+import { Typography } from '@mui/material';
+import NERFormModal from './NERFormModal';
+import { NERModalProps } from './NERModal';
+
+interface NERDeleteModalProps<T extends FieldValues> extends Omit<NERModalProps, 'title'> {
+  onFormSubmit: (data: T) => void;
+  dataType: string;
+}
+
+const NERDeleteModal = ({ open, onHide, dataType, onFormSubmit }: NERDeleteModalProps<any>) => {
+  const { handleSubmit, reset } = useForm({
+    mode: 'onChange'
+  });
+
+  return (
+    <NERFormModal
+      open={open}
+      onHide={onHide}
+      onFormSubmit={onFormSubmit}
+      handleUseFormSubmit={handleSubmit}
+      reset={reset}
+      formId="delete-cr-form"
+      title={dataType}
+    >
+      <Typography sx={{ marginBottom: '1rem' }}>Are you sure you want to delete this {dataType}?</Typography>
+      <Typography sx={{ fontWeight: 'bold' }}>This action cannot be undone!</Typography>
+    </NERFormModal>
+  );
+};
+
+export default NERDeleteModal;
diff --git a/src/frontend/src/hooks/recruitment.hooks.ts b/src/frontend/src/hooks/recruitment.hooks.ts
@@ -1,6 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { Milestone } from 'shared/src/types/milestone-types';
-import { createFaq, createMilestone, editFaq, editMilestone, getAllFaqs, getAllMilestones } from '../apis/recruitment.api';
+import {
+  createFaq,
+  createMilestone,
+  deleteFaq,
+  deleteMilestone,
+  editFaq,
+  editMilestone,
+  getAllFaqs,
+  getAllMilestones
+} from '../apis/recruitment.api';
 import { FrequentlyAskedQuestion } from 'shared/src/types/frequently-asked-questions-types';
 
 export interface MilestonePayload {
@@ -53,6 +62,22 @@ export const useEditMilestone = (id: string) => {
   );
 };
 
+export const useDeleteMilestone = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ message: string }, Error, any>(
+    ['milestones', 'delete'],
+    async (milestoneId: string) => {
+      const { data } = await deleteMilestone(milestoneId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['milestones']);
+      }
+    }
+  );
+};
+
 export const useAllFaqs = () => {
   return useQuery<FrequentlyAskedQuestion[], Error>(['faqs'], async () => {
     const { data } = await getAllFaqs();
@@ -91,3 +116,19 @@ export const useEditFaq = (id: string) => {
     }
   );
 };
+
+export const useDeleteFAQ = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ message: string }, Error, any>(
+    ['faqs', 'delete'],
+    async (faqId: string) => {
+      const { data } = await deleteFaq(faqId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['faqs']);
+      }
+    }
+  );
+};
diff --git a/src/frontend/src/pages/AdminToolsPage/RecruitmentConfig/FAQTable.tsx b/src/frontend/src/pages/AdminToolsPage/RecruitmentConfig/FAQTable.tsx
@@ -1,25 +1,43 @@
+import React, { useState } from 'react';
 import { TableRow, TableCell, Box, Table as MuiTable, TableHead, TableBody, Typography, Button } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { FrequentlyAskedQuestion } from 'shared/src/types/frequently-asked-questions-types';
 import { NERButton } from '../../../components/NERButton';
-import { useAllFaqs } from '../../../hooks/recruitment.hooks';
+import { useAllFaqs, useDeleteFAQ } from '../../../hooks/recruitment.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useHistoryState } from '../../../hooks/misc.hooks';
 import ErrorPage from '../../ErrorPage';
 import CreateFaqFormModal from './CreateFaqFormModal';
 import EditFaqFormModal from './EditFaqFormModal';
+import NERDeleteModal from '../../../components/NERDeleteModal';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 const FAQsTable = () => {
   const [createModalShow, setCreateModalShow] = useHistoryState<boolean>('', false);
   const [faqEditing, setFaqEditing] = useHistoryState<FrequentlyAskedQuestion | undefined>('', undefined);
+  const [faqToDelete, setFaqToDelete] = useState<FrequentlyAskedQuestion | undefined>(undefined);
+  const { mutateAsync: deleteFaq } = useDeleteFAQ();
+  const toast = useToast();
+
   const { isLoading: faqsIsLoading, isError: faqsIsError, error: faqsError, data: faqs } = useAllFaqs();
+  const handleDelete = (id: string) => {
+    setFaqToDelete(undefined);
+    try {
+      deleteFaq(id);
+      toast.success('Faq deleted successfully');
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        toast.error(e.message, 3000);
+      }
+    }
+  };
 
   if (!faqs || faqsIsLoading) return <LoadingIndicator />;
   if (faqsIsError) return <ErrorPage message={faqsError.message} />;
 
   const FAQsRows = faqs.map((faq: FrequentlyAskedQuestion, index: number) => (
-    <TableRow>
+    <TableRow key={faq.faqId}>
       <TableCell
         align="left"
         sx={{
@@ -44,7 +62,12 @@ const FAQsTable = () => {
           <Button sx={{ p: 0.5, color: 'white' }} onClick={() => setFaqEditing(faq)}>
             <EditIcon />
           </Button>
-          <Button sx={{ p: 0.5, color: 'white' }}>
+          <Button
+            sx={{ p: 0.5, color: 'white' }}
+            onClick={() => {
+              setFaqToDelete(faq);
+            }}
+          >
             <DeleteIcon />
           </Button>
         </Box>
@@ -96,6 +119,17 @@ const FAQsTable = () => {
           Add FAQ
         </NERButton>
       </Box>
+      <NERDeleteModal
+        open={!!faqToDelete}
+        onHide={() => setFaqToDelete(undefined)}
+        formId="delete-item-form"
+        dataType="FAQ"
+        onFormSubmit={() => {
+          if (faqToDelete) {
+            handleDelete(faqToDelete.faqId);
+          }
+        }}
+      />
     </Box>
   );
 };

diff --git a/src/frontend/src/pages/AdminToolsPage/RecruitmentConfig/MilestoneTable.tsx b/src/frontend/src/pages/AdminToolsPage/RecruitmentConfig/MilestoneTable.tsx
@@ -6,9 +6,12 @@ import CreateMilestoneFormModal from './CreateMilestoneFormModal';
 import EditMilestoneFormModal from './EditMilestoneFormModal';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useHistoryState } from '../../../hooks/misc.hooks';
-import { useAllMilestones } from '../../../hooks/recruitment.hooks';
+import { useAllMilestones, useDeleteMilestone } from '../../../hooks/recruitment.hooks';
 import ErrorPage from '../../ErrorPage';
 import { NERButton } from '../../../components/NERButton';
+import NERDeleteModal from '../../../components/NERDeleteModal';
+import { useState } from 'react';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 const MilestoneTable = () => {
   const [createModalShow, setCreateModalShow] = useHistoryState<boolean>('', false);
@@ -20,6 +23,22 @@ const MilestoneTable = () => {
     data: milestones
   } = useAllMilestones();
 
+  const handleDelete = (id: string) => {
+    setMilestoneToDelete(undefined);
+    try {
+      deleteMilestone(id);
+      toast.success('Milestone deleted successfully');
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        toast.error(e.message, 3000);
+      }
+    }
+  };
+
+  const [milestoneToDelete, setMilestoneToDelete] = useState<Milestone | undefined>(undefined);
+  const { mutateAsync: deleteMilestone } = useDeleteMilestone();
+  const toast = useToast();
+
   if (!milestones || milestonesIsLoading) return <LoadingIndicator />;
   if (milestonesIsError) return <ErrorPage message={milestonesError.message} />;
 
@@ -57,7 +76,12 @@ const MilestoneTable = () => {
           <Button sx={{ p: 0.5, color: 'white' }} onClick={() => setMilestoneEditing(milestone)}>
             <EditIcon />
           </Button>
-          <Button sx={{ p: 0.5, color: 'white' }}>
+          <Button
+            sx={{ p: 0.5, color: 'white' }}
+            onClick={() => {
+              setMilestoneToDelete(milestone);
+            }}
+          >
             <DeleteIcon />
           </Button>
         </Box>
@@ -117,6 +141,17 @@ const MilestoneTable = () => {
           Add Milestone
         </NERButton>
       </Box>
+      <NERDeleteModal
+        open={!!milestoneToDelete}
+        onHide={() => setMilestoneToDelete(undefined)}
+        formId="delete-item-form"
+        dataType="Milestone"
+        onFormSubmit={() => {
+          if (milestoneToDelete) {
+            handleDelete(milestoneToDelete.milestoneId);
+          }
+        }}
+      />
     </Box>
   );
 };

diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts
@@ -182,9 +182,11 @@ const recruitment = () => `${API_URL}/recruitment`;
 const allMilestones = () => `${recruitment()}/milestones`;
 const milestoneCreate = () => `${recruitment()}/milestone/create`;
 const milestoneEdit = (id: string) => `${recruitment()}/milestone/${id}/edit`;
+const milestoneDelete = (id: string) => `${recruitment()}/milestone/${id}/delete`;
 const allFaqs = () => `${recruitment()}/faqs`;
 const faqCreate = () => `${recruitment()}/faq/create`;
 const faqEdit = (id: string) => `${recruitment()}/faq/${id}/edit`;
+const faqDelete = (id: string) => `${recruitment()}/faq/${id}/delete`;
 
 /**************** Other Endpoints ****************/
 const version = () => `https://api.github.com/repos/Northeastern-Electric-Racing/FinishLine/releases/latest`;
@@ -331,9 +333,11 @@ export const apiUrls = {
   allMilestones,
   milestoneCreate,
   milestoneEdit,
+  milestoneDelete,
   allFaqs,
   faqCreate,
   faqEdit,
+  faqDelete,
 
   version
 };