implement remote project deletion client side

src/components/projects/ProjectList/ProjectList.js

@@ -41,6 +41,7 @@ import useDeleteProjectDialog from './useDeleteProjectDialog';
 import useRenameProjectDialog from './useRenameProjectDialog';
 import useProjectIndex from './useProjectIndex';
 import useCreateRemoteProject from './useCreateRemoteProject';
+import useDeleteRemoteProject from './useDeleteRemoteProject';
 
 import { useAuth } from '../../users/AuthProvider';
 
@@ -131,6 +132,7 @@ function ProjectList(_props: Props) {
   const intl = useIntl();
 
   const createProjectMutation = useCreateRemoteProject();
+  const deleteProjectMutation = useDeleteRemoteProject();
 
   const [
     { localProjects, remoteProjects, localToRemoteMap, remoteToLocalMap },
@@ -447,7 +449,10 @@ function ProjectList(_props: Props) {
                           aria-label={intl.formatMessage(messages.deleteExerciseTooltip, {
                             name: exercise.name,
                           })}
-                          // onClick={() => ...}
+                          onClick={async () => {
+                            await deleteProjectMutation(exercise.id);
+                            projectIndexDispatch({ type: 'REFRESH_REMOTE' });
+                          }}
                         >
                           <DeleteIcon />
                         </IconButton>

src/components/projects/ProjectList/useDeleteRemoteProject.js

@@ -0,0 +1,29 @@
+// @flow
+
+import gql from 'graphql-tag';
+
+import * as hooks from '../../misc/hooks';
+
+import { type DeleteProject, type DeleteProjectVariables } from './__generated__/DeleteProject';
+
+const useDeleteProjectMutation = hooks.makeMutation<DeleteProject, DeleteProjectVariables>(gql`
+  mutation DeleteProject($projectId: ID!) {
+    deleteProjectById(projectId: $projectId)
+  }
+`);
+
+export default function useCreateRemoteProject(): string => Promise<string | null> {
+  const [performDeleteProject, _deleteProjectResponse] = useDeleteProjectMutation();
+
+  async function deleteProject(projectId: string) {
+    const result = await performDeleteProject({ variables: { projectId } });
+
+    // we're not passing `ignoreResults`, so there will be a result
+    // eslint-disable-next-line no-throw-literal
+    if (!result.data) throw 'unreachable';
+
+    return result.data.deleteProjectById ?? null;
+  }
+
+  return deleteProject;
+}