Add ability to delete project from the project settings page

frontend/src/features/projects/hooks/useProjectSettings.ts

@@ -1,11 +1,21 @@
+import { ProjectsApi, useApiConfig } from 'api';
 import { useFormik } from 'formik';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useProjectsStore } from '../stores/useProjectsStore';
+import { useNavigate } from 'react-router';
+
 
 interface FormValues {
   projectName?: string;
+  //onDelete?: () => void;
 }
 
-const useSettings = ({ projectName: initialProjectName }: FormValues) => {
+const useSettings = ({ projectName: initialProjectName}: FormValues) => {
+  const [errors, setErrors] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { fetchAndSelectProject } = useProjectsStore();
+  const { config } = useApiConfig();
+  const navigate = useNavigate();
 
   const formik = useFormik({
     initialValues: {
@@ -22,14 +32,32 @@ const useSettings = ({ projectName: initialProjectName }: FormValues) => {
   });
 
   useEffect(() => {
-		// this is to prevent infinite re-render cycle
+    // this is to prevent infinite re-render cycle
     if (formik.values.projectName !== initialProjectName) {
       formik.setFieldValue('projectName', initialProjectName);
     }
   }, [initialProjectName, formik]);
 
+  const deleteProject = async (id: string, onDelete?: () => void) => {
+    setLoading(true);
+    try {
+      const response = await new ProjectsApi(config).destroyProject(id);
+      fetchAndSelectProject(config);
+      onDelete?.();
+      navigate('/flows');
+    } catch (error) {
+      //TODO: Toast
+      setErrors(['An error occurred']);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return {
     formik,
+    loading,
+    errors,
+    deleteProject,
   };
 };
 

frontend/src/features/projects/pages/ProjectSettings.tsx

@@ -7,6 +7,8 @@ import { MembersTable } from 'components/tables';
 import { useProjectsStore } from 'features/projects/stores/useProjectsStore';
 import { MdAdd } from 'react-icons/md';
 import useSettings from '../hooks/useProjectSettings';
+import toast from 'react-hot-toast';
+import Toast from 'components/Toast';
 
 const headers = [
   { propertyName: 'email', displayName: 'Email' },
@@ -23,7 +25,7 @@ type UserData = {
 const Settings = () => {
   const { selectedProject } = useProjectsStore();
   //TODO: Can we improve this to just pass in selectedProject as is without a check?
-  const { formik } = useSettings(
+  const { formik, deleteProject } = useSettings(
     selectedProject.state == 'hasData'
       ? { projectName: selectedProject?.data.name }
       : { projectName: '' },
@@ -90,9 +92,21 @@ const Settings = () => {
                 <div className="flex flex-col gap-2">
                   <div className="flex flex-col justify-start items-start gap-1">
                     <h4 className="text-oxford text-sm font-semibold">Danger Zone</h4>
-                    <p className="text-grey-700 text-sm">Delete your project and all associated data.</p>
+                    <p className="text-grey-700 text-sm">
+                      Delete your project and all associated data.
+                    </p>
                   </div>
-                  <OutlineButton label="Delete project" className="self-start"/>
+                  <OutlineButton
+                    label="Delete project"
+                    className="self-start"
+                    onClick={async () =>
+                      await deleteProject(selectedProject.data.id?.toString() ?? '', () =>
+                        toast.custom(t => (
+                          <Toast toast={t} customMessage="Project deleted successfully" />
+                        )),
+                      )
+                    }
+                  />
                 </div>
               </div>
             );

frontend/src/features/projects/stores/useProjectsStore.ts

@@ -7,7 +7,7 @@ type ProjectsStore = {
   projects: ApiState<Project[]>;
   fetchProjects: (config: Configuration) => void;
   setSelectedProject: (projectId: number) => void;
-	fetchAndSelectProject: (config: Configuration) => void;
+  fetchAndSelectProject: (config: Configuration) => void;
   createProject: (name: string, config: Configuration) => void;
 };