#3097 delete checklist hook

src/frontend/src/apis/onboarding.api.ts

@@ -29,6 +29,13 @@ export const getUsersChecklists = () => {
   });
 };
 
+/**
+ * API call to delete a checklist
+ */
+export const deleteChecklist = (checklistId: string) => {
+  return axios.post<{ message: string }>(apiUrls.checklistDelete(checklistId));
+};
+
 /**
  * API Call to download a google image
  * @param fileId file id to be downloaded

src/frontend/src/hooks/onboarding.hook.ts

@@ -1,6 +1,12 @@
-import { useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { Checklist } from 'shared';
-import { getAllChecklists, getGeneralChecklists, getUsersChecklists, downloadGoogleImage } from '../apis/onboarding.api';
+import {
+  getAllChecklists,
+  getGeneralChecklists,
+  getUsersChecklists,
+  downloadGoogleImage,
+  deleteChecklist
+} from '../apis/onboarding.api';
 
 export const useAllChecklists = () => {
   return useQuery<Checklist[], Error>(['checklists'], async () => {
@@ -23,6 +29,22 @@ export const useUsersTeamTypeChecklists = () => {
   });
 };
 
+export const useDeleteChecklist = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ message: string }, Error, any>(
+    ['checklists', 'delete'],
+    async (checklistId: string) => {
+      const { data } = await deleteChecklist(checklistId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['checklists']);
+      }
+    }
+  );
+};
+
 export const useGetImageUrl = (imageFileId: string | null) => {
   return useQuery<string, Error>(
     ['image', imageFileId],

src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminTask.tsx

@@ -7,6 +7,9 @@ import SubtaskSection from '../../HomePage/components/SubtaskSection';
 import { GridDragIcon } from '@mui/x-data-grid';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import EditIcon from '@mui/icons-material/Edit';
+import NERDeleteModal from '../../../components/NERDeleteModal';
+import { useDeleteChecklist } from '../../../hooks/onboarding.hook';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 interface AdminTaskProps {
   subtasks: Checklist[];
@@ -15,11 +18,27 @@ interface AdminTaskProps {
 
 const AdminTask: React.FC<AdminTaskProps> = ({ subtasks, parentTask }) => {
   const [showSubtasks, setShowSubtasks] = useState(false);
+  const [taskToDelete, setTaskToDelete] = useState<Checklist | null>(null);
 
   const toggleShowSubtasks = () => {
     setShowSubtasks((prev) => !prev);
   };
 
+  const toast = useToast();
+  const { mutateAsync: deleteChecklist } = useDeleteChecklist();
+
+  const handleDelete = async (taskId: string) => {
+    try {
+      await deleteChecklist(taskId);
+      toast.success('Task deleted successfully');
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    setTaskToDelete(null);
+  };
+
   return (
     <Box sx={{ width: '100%', mb: 1 }}>
       <Box>
@@ -29,7 +48,7 @@ const AdminTask: React.FC<AdminTaskProps> = ({ subtasks, parentTask }) => {
           </IconButton>
           <Typography sx={{ color: 'black', fontWeight: 'bold', fontSize: '1.1em' }}>{parentTask.name}</Typography>
           <Box sx={{ ml: 'auto' }}>
-            <IconButton>
+            <IconButton onClick={() => setTaskToDelete(parentTask)}>
               <RemoveCircleOutlineIcon sx={{ color: 'black' }} />
             </IconButton>
             <IconButton>
@@ -42,6 +61,15 @@ const AdminTask: React.FC<AdminTaskProps> = ({ subtasks, parentTask }) => {
         </Box>
         {showSubtasks && <SubtaskSection subtasks={subtasks} parentTask={parentTask} isAdmin={true} />}
       </Box>
+      {taskToDelete && (
+        <NERDeleteModal
+          open={!!taskToDelete}
+          onHide={() => setTaskToDelete(null)}
+          formId="delete-task-form"
+          dataType="Task"
+          onFormSubmit={() => handleDelete(taskToDelete.checklistId)}
+        />
+      )}
     </Box>
   );
 };

src/frontend/src/utils/urls.ts

@@ -199,6 +199,7 @@ const onboarding = () => `${API_URL}/onboarding`;
 const allChecklists = () => `${onboarding()}/checklists`;
 const generalChecklists = () => `${allChecklists()}/general`;
 const usersTeamTypeChecklists = () => `${allChecklists()}/usersChecklists`;
+const checklistDelete = (id: string) => `${onboarding()}/checklist/delete/${id}`;
 const imageById = (imageId: string) => `${onboarding()}/image/${imageId}`;
 
 /**************** Other Endpoints ****************/
@@ -362,6 +363,7 @@ export const apiUrls = {
   allChecklists,
   generalChecklists,
   usersTeamTypeChecklists,
+  checklistDelete,
   imageById,
 
   version