ui: Use React Query defaults to reduce duplication

3 files changed, 6 insertions, 19 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
index c844fe2d..ac0edae4 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
@@ -3,23 +3,17 @@ import TextInputModal from '../../components/modals/TextInputModal'
 import { Button } from 'reactstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { useMutation, useQueryClient } from 'react-query'
-import { addProject } from '../../api/projects'
-import { useAuth } from '../../auth'
+import { useMutation } from 'react-query'
 
 /**
  * A container for creating a new project.
  */
 const NewProjectContainer = () => {
     const [isVisible, setVisible] = useState(false)
-    const auth = useAuth()
-    const queryClient = useQueryClient()
-    const mutation = useMutation((data) => addProject(auth, data), {
-        onSuccess: (result) => queryClient.setQueryData('projects', (old) => [...(old || []), result]),
-    })
+    const { mutate: addProject } = useMutation('addProject')
     const callback = (text) => {
         if (text) {
-            mutation.mutate({ name: text })
+            addProject({ name: text })
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
index eba388d6..62985742 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
@@ -1,18 +1,12 @@
 import React from 'react'
 import ProjectActionButtons from '../../components/projects/ProjectActionButtons'
-import { useMutation, useQueryClient } from 'react-query'
-import { useAuth } from '../../auth'
-import { deleteProject } from '../../api/projects'
+import { useMutation } from 'react-query'
 
 const ProjectActions = (props) => {
-    const auth = useAuth()
-    const queryClient = useQueryClient()
-    const mutation = useMutation((projectId) => deleteProject(auth, projectId), {
-        onSuccess: () => queryClient.invalidateQueries('projects'),
-    })
+    const { mutate: deleteProject } = useMutation('deleteProject')
     const actions = {
         onViewUsers: (id) => {}, // TODO implement user viewing
-        onDelete: (id) => mutation.mutate(id),
+        onDelete: (id) => deleteProject(id),
     }
     return <ProjectActionButtons {...props} {...actions} />
 }
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
index 91e8ac5a..b5c5dd68 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import ProjectList from '../../components/projects/ProjectList'
 import { useAuth } from '../../auth'
 import { useProjects } from '../../data/project'
-import { useQueryClient } from 'react-query'
 
 const getVisibleProjects = (projects, filter, userId) => {
     switch (filter) {