#3097 delete checklist hook

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

@@ -39,6 +39,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 toggle a checklist
  */
@@ -47,7 +54,6 @@ export const toggleChecklist = (payload: ToggleChecklistPayload) => {
     ...payload
   });
 };
-
 /**
  * API Call to download a google image
  * @param fileId file id to be downloaded

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

@@ -5,6 +5,7 @@ import {
   getGeneralChecklists,
   getUsersChecklists,
   downloadGoogleImage,
+  deleteChecklist,
   toggleChecklist,
   getCheckedChecklists
 } from '../apis/onboarding.api';
@@ -41,6 +42,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 useToggleChecklist = () => {
   const queryClient = useQueryClient();
   return useMutation<Checklist, Error, ToggleChecklistPayload>(

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

@@ -5,17 +5,41 @@ import { useState } from 'react';
 import { Checklist } from 'shared';
 import AdminTask from './AdminTask';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import { useDeleteChecklist } from '../../../hooks/onboarding.hook';
+import NERDeleteModal from '../../../components/NERDeleteModal';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklistName?: string }> = ({
   parentChecklists,
   checklistName
 }) => {
   const [showTasks, setShowTasks] = useState(false);
+  const [tasksToDelete, setTasksToDelete] = useState<Checklist[] | null>(null);
 
   const toggleShowTasks = () => {
     setShowTasks((prev) => !prev);
   };
 
+  const toast = useToast();
+  const { mutateAsync: deleteChecklist } = useDeleteChecklist();
+
+  const handleDelete = async () => {
+    if (!tasksToDelete) return;
+
+    try {
+      for (const task of tasksToDelete) {
+        await deleteChecklist(task.checklistId);
+      }
+      toast.success('All tasks deleted successfully');
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    setTasksToDelete(null);
+  };
+
   return (
     <Box>
       <Grid container>
@@ -32,7 +56,10 @@ export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklist
               <Typography fontSize="2em" fontWeight="bold" color="black">
                 {checklistName} Checklist
               </Typography>
-              <Grid display="flex" alignItems="center" gap={2}>
+              <Grid display="flex" alignItems="center">
+                <IconButton onClick={() => setTasksToDelete(parentChecklists)}>
+                  <RemoveCircleOutlineIcon sx={{ color: 'black' }} />
+                </IconButton>
                 <IconButton onClick={toggleShowTasks}>
                   {showTasks ? (
                     <KeyboardArrowDown sx={{ color: 'black' }} />
@@ -69,6 +96,15 @@ export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklist
           )}
         </Grid>
       </Grid>
+      {tasksToDelete && (
+        <NERDeleteModal
+          open={!!tasksToDelete}
+          onHide={() => setTasksToDelete(null)}
+          formId="delete-task-form"
+          dataType="Checklist"
+          onFormSubmit={() => handleDelete()}
+        />
+      )}
     </Box>
   );
 };

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

@@ -7,18 +7,37 @@ 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 {
   parentTask: Checklist;
 }
 
 const AdminTask: React.FC<AdminTaskProps> = ({ 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>
@@ -28,7 +47,7 @@ const AdminTask: React.FC<AdminTaskProps> = ({ 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>
@@ -41,6 +60,15 @@ const AdminTask: React.FC<AdminTaskProps> = ({ parentTask }) => {
         </Box>
         {showSubtasks && <SubtaskSection 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/onboarding.utils.ts

@@ -18,5 +18,16 @@ export const groupChecklists = (checklists: Checklist[]) => {
     return groupedChecklists;
   }, {});
 
-  return groupedChecklists;
+  const sortedGroupNames = Object.keys(groupedChecklists).sort((group1, group2) => {
+    if (group1 === 'General') return -1;
+    if (group2 === 'General') return 1;
+    return group1.localeCompare(group2);
+  });
+
+  const sortedGroupedChecklists: Record<string, Checklist[]> = {};
+  sortedGroupNames.forEach((groupName) => {
+    sortedGroupedChecklists[groupName] = groupedChecklists[groupName];
+  });
+
+  return sortedGroupedChecklists;
 };

src/frontend/src/utils/urls.ts

@@ -202,6 +202,7 @@ const generalChecklists = () => `${allChecklists()}/general`;
 const checkedChecklists = () => `${allChecklists()}/checked`;
 const toggleChecklist = (checklistId: string) => `${allChecklists()}/${checklistId}/toggle`;
 const usersTeamTypeChecklists = () => `${allChecklists()}/usersChecklists`;
+const checklistDelete = (id: string) => `${onboarding()}/checklist/delete/${id}`;
 const imageById = (imageId: string) => `${onboarding()}/image/${imageId}`;
 
 /**************** Other Endpoints ****************/
@@ -368,6 +369,7 @@ export const apiUrls = {
   checkedChecklists,
   toggleChecklist,
   usersTeamTypeChecklists,
+  checklistDelete,
   imageById,
 
   version