fix(web/ui): Fix creation of topologies

This change fixes an issue with the creation of topologies in the
frontend. Previously, the frontend relied on Redux to update the state.
However, since we removed the reliance on Redux, we also need to create
a new topology using the functions from React Query to actually send a
request to the API server.

1 files changed, 11 insertions, 4 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
index bf59e020..77c57d26 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -21,19 +21,26 @@
  */
 
 import PropTypes from 'prop-types'
+import produce from 'immer'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { addTopology } from '../../redux/actions/topologies'
+import { useMutation } from "react-query";
+import { useProjectTopologies } from "../../data/topology";
 import NewTopologyModal from './NewTopologyModal'
 
 function NewTopology({ projectId }) {
     const [isVisible, setVisible] = useState(false)
-    const dispatch = useDispatch()
+    const { data: topologies = [] } = useProjectTopologies(projectId)
+    const { mutate: addTopology } = useMutation('addTopology')
 
     const onSubmit = (name, duplicateId) => {
-        dispatch(addTopology(projectId, name, duplicateId))
+        const candidate = topologies.find((topology) => topology._id === duplicateId) || { projectId, rooms: [] }
+        const topology = produce(candidate, (draft) => {
+            delete draft._id
+            draft.name = name
+        })
+        addTopology(topology)
         setVisible(false)
     }
     return (