feat(frontend): project deletion capability

hotosm · Feb 2, 2024 · 81cd778 · 81cd778
1 parent 689a873
commit 81cd778
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 1 deletion.
diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { API } from '@/api';
 import { CreateProjectActions } from '@/store/slices/CreateProjectSlice';
 import {
   ProjectDetailsModel,
@@ -519,6 +520,46 @@ const ValidateCustomForm: Function = (url: string, formUpload: any) => {
     await validateCustomForm(url, formUpload);
   };
 };
+
+const DeleteProjectService: Function = (url: string) => {
+  return async (dispatch) => {
+    const deleteProject = async (url: string) => {
+      try {
+        await API.delete(url);
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Project deleted. Redirecting...',
+            variant: 'success',
+            duration: 2000,
+          }),
+        );
+        // Redirect to homepage
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 2000);
+      } catch (error) {
+        if (error.response.status === 404) {
+          dispatch(
+            CommonActions.SetSnackBar({
+              open: true,
+              message: 'Project already deleted',
+              variant: 'success',
+              duration: 2000,
+            }),
+          );
+        } else {
+          console.log(error);
+          console.log('Project deletion failed.');
+        }
+      }
+    };
+
+    await deleteProject(url);
+    // TODO extra cleanup required?
+  };
+};
+
 export {
   UploadAreaService,
   CreateProjectService,
@@ -534,4 +575,5 @@ export {
   PostFormUpdate,
   EditProjectBoundaryService,
   ValidateCustomForm,
+  DeleteProjectService,
 };
diff --git a/src/frontend/src/components/MapDescriptionComponents.jsx b/src/frontend/src/components/MapDescriptionComponents.jsx
@@ -5,7 +5,7 @@ import CoreModules from '@/shared/CoreModules';
 const MapDescriptionComponents = ({ type, state, defaultTheme }) => {
   const descriptionData = [
     {
-      value: 'Descriptions',
+      value: 'Description',
       element: <CoreModules.Typography align="center">{state.projectInfo.description}</CoreModules.Typography>,
     },
     // {

diff --git a/src/frontend/src/components/editproject/DeleteProject.tsx b/src/frontend/src/components/editproject/DeleteProject.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import CoreModules from '@/shared/CoreModules';
+import { DeleteProjectService } from '@/api/CreateProjectService';
+
+const DeleteProject = ({ projectId }) => {
+  const dispatch = CoreModules.useAppDispatch();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    dispatch(DeleteProjectService(`/projects/${projectId}`));
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <CoreModules.Stack flexDirection="row">
+        <CoreModules.Stack sx={{ width: '45%' }}>
+          <CoreModules.Stack sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4 }}>
+            <CoreModules.LoadingButton
+              // disabled={updateBoundaryLoading}
+              type="submit"
+              // loading={updateBoundaryLoading}
+              loadingPosition="end"
+              // endIcon={<AssetModules.SettingsSuggestIcon />}
+              variant="contained"
+              color="error"
+            >
+              Delete
+            </CoreModules.LoadingButton>
+          </CoreModules.Stack>
+        </CoreModules.Stack>
+      </CoreModules.Stack>
+    </form>
+  );
+};
+
+export default DeleteProject;
diff --git a/src/frontend/src/constants/EditProjectSidebarContent.ts b/src/frontend/src/constants/EditProjectSidebarContent.ts
@@ -21,6 +21,11 @@ const SidebarContent: ISidebarContent[] = [
     name: 'Update Project Boundary',
     slug: 'update-project-boundary',
   },
+  {
+    id: 4,
+    name: 'Delete Project',
+    slug: 'delete-project',
+  },
 ];
 
 export default SidebarContent;
diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx
@@ -315,6 +315,18 @@ const routes = createBrowserRouter([
           </ProtectedRoute>
         ),
       },
+      {
+        path: 'edit-project/delete/:projectId',
+        element: (
+          <ProtectedRoute>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ErrorBoundary>
+                <EditProject />
+              </ErrorBoundary>
+            </Suspense>
+          </ProtectedRoute>
+        ),
+      },
       {
         path: '/osmauth/',
         element: (

diff --git a/src/frontend/src/views/EditProject.tsx b/src/frontend/src/views/EditProject.tsx
@@ -9,6 +9,7 @@ import SidebarContent from '@/constants/EditProjectSidebarContent';
 import { useNavigate } from 'react-router-dom';
 import UpdateForm from '@/components/editproject/UpdateForm';
 import UpdateProjectArea from '@/components/editproject/UpdateProjectArea';
+import DeleteProject from '@/components/editproject/DeleteProject';
 
 const EditProject: React.FC = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -86,6 +87,7 @@ const EditProject: React.FC = () => {
             {selectedTab === 'project-description' ? <EditProjectDetails projectId={decodedProjectId} /> : null}
             {selectedTab === 'form-update' ? <UpdateForm projectId={decodedProjectId} /> : null}
             {selectedTab === 'update-project-boundary' ? <UpdateProjectArea projectId={decodedProjectId} /> : null}
+            {selectedTab === 'delete-project' ? <DeleteProject projectId={decodedProjectId} /> : null}
           </CoreModules.Stack>
         </CoreModules.Stack>
       </CoreModules.Stack>