refactor: update remove project function

frontend/src/component/menu/routes.js

@@ -15,7 +15,7 @@ import { P, C, E, EEA, RE } from '../common/flags';
 import { NewUser } from '../user/NewUser/NewUser';
 import ResetPassword from '../user/ResetPassword/ResetPassword';
 import ForgottenPassword from '../user/ForgottenPassword/ForgottenPassword';
-import ProjectListNew from '../project/ProjectList/ProjectList';
+import { ProjectListNew } from '../project/ProjectList/ProjectList';
 import Project from '../project/Project/Project';
 import RedirectArchive from '../archive/RedirectArchive';
 import EnvironmentList from '../environments/EnvironmentList/EnvironmentList';

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -1,18 +1,19 @@
 import { Card, Menu, MenuItem } from '@material-ui/core';
 import { useStyles } from './ProjectCard.styles';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-
 import { ReactComponent as ProjectIcon } from '../../../assets/icons/projectIcon.svg';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import Dialogue from '../../common/Dialogue';
+import Dialogue from 'component/common/Dialogue';
-import useProjectApi from '../../../hooks/api/actions/useProjectApi/useProjectApi';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
-import useProjects from '../../../hooks/api/getters/useProjects/useProjects';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Delete, Edit } from '@material-ui/icons';
-import { getProjectEditPath } from '../../../utils/route-path-helpers';
+import { getProjectEditPath } from 'utils/route-path-helpers';
-import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import useToast from '../../../hooks/useToast';
+import useToast from 'hooks/useToast';
-import { UPDATE_PROJECT } from '../../providers/AccessProvider/permissions';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
+import { formatUnknownError } from 'utils/format-unknown-error';
+
 interface IProjectCardProps {
     name: string;
     featureCount: number;
@@ -22,7 +23,7 @@ interface IProjectCardProps {
     onHover: () => void;
 }
 
-const ProjectCard = ({
+export const ProjectCard = ({
     name,
     featureCount,
     health,
@@ -43,6 +44,23 @@ const ProjectCard = ({
         setAnchorEl(e.currentTarget);
     };
 
+    const onRemoveProject = async (e: Event) => {
+        e.preventDefault();
+        try {
+            await deleteProject(id);
+            refetchProjectOverview();
+            setToastData({
+                title: 'Deleted project',
+                type: 'success',
+                text: 'Successfully deleted project',
+            });
+        } catch (e: unknown) {
+            setToastApiError(formatUnknownError(e));
+        }
+        setShowDelDialog(false);
+        setAnchorEl(null);
+    };
+
     return (
         <Card className={styles.projectCard} onMouseEnter={onHover}>
             <div className={styles.header} data-loading>
@@ -71,7 +89,6 @@ const ProjectCard = ({
                     <MenuItem
                         onClick={e => {
                             e.preventDefault();
-
                             history.push(getProjectEditPath(id));
                         }}
                     >
@@ -115,27 +132,8 @@ const ProjectCard = ({
             </div>
             <Dialogue
                 open={showDelDialog}
-                onClick={e => {
+                onClick={onRemoveProject}
-                    e.preventDefault();
+                onClose={() => {
-                    deleteProject(id)
-                        .then(() => {
-                            setToastData({
-                                title: 'Deleted project',
-                                type: 'success',
-                                text: 'Successfully deleted project',
-                            });
-                            refetchProjectOverview();
-                        })
-                        .catch(e => {
-                            setToastApiError(e.message);
-                        })
-                        .finally(() => {
-                            setShowDelDialog(false);
-                            setAnchorEl(null);
-                        });
-                }}
-                onClose={e => {
-                    e.preventDefault();
                     setAnchorEl(null);
                     setShowDelDialog(false);
                 }}
@@ -144,5 +142,3 @@ const ProjectCard = ({
         </Card>
     );
 };
-
-export default ProjectCard;

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -4,7 +4,7 @@ import { mutate } from 'swr';
 import { getProjectFetcher } from '../../../hooks/api/getters/useProject/getProjectFetcher';
 import useProjects from '../../../hooks/api/getters/useProjects/useProjects';
 import ConditionallyRender from '../../common/ConditionallyRender';
-import ProjectCard from '../ProjectCard/ProjectCard';
+import { ProjectCard } from '../ProjectCard/ProjectCard';
 import { useStyles } from './ProjectList.styles';
 import { IProjectCard } from '../../../interfaces/project';
 
@@ -43,7 +43,7 @@ function resolveCreateButtonData(isOss: boolean, hasAccess: boolean) {
     }
 }
 
-const ProjectListNew = () => {
+export const ProjectListNew = () => {
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
     const styles = useStyles();
@@ -157,5 +157,3 @@ const ProjectListNew = () => {
         </div>
     );
 };
-
-export default ProjectListNew;