ui: Move modal state outside of Redux

This change updates the frontend so that the modal state is not stored
inside Redux but instead is stored using the useState hook. This
simplifies the design of the modal components.

8 files changed, 0 insertions, 274 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
deleted file mode 100644
index 33b2612f..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteMachineModal } from '../../actions/modals/topology'
-import { deleteMachine } from '../../actions/topology/machine'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteMachineModal = () => {
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine())
-        }
-        dispatch(closeDeleteMachineModal())
-    }
-    const visible = useSelector((state) => state.modals.deleteMachineModalVisible)
-    return (
-        <ConfirmationModal
-            title="Delete this machine"
-            message="Are you sure you want to delete this machine?"
-            show={visible}
-            callback={callback}
-        />
-    )
-}
-
-export default DeleteMachineModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
deleted file mode 100644
index ca76fd04..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteRackModal } from '../../actions/modals/topology'
-import { deleteRack } from '../../actions/topology/rack'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteRackModal = (props) => {
-    const visible = useSelector((state) => state.modals.deleteRackModalVisible)
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack())
-        }
-        dispatch(closeDeleteRackModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete this rack"
-            message="Are you sure you want to delete this rack?"
-            show={visible}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default DeleteRackModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
deleted file mode 100644
index 9a7be6a6..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteRoomModal } from '../../actions/modals/topology'
-import { deleteRoom } from '../../actions/topology/room'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteRoomModal = (props) => {
-    const visible = useSelector((state) => state.modals.deleteRoomModalVisible)
-
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRoom())
-        }
-        dispatch(closeDeleteRoomModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete this room"
-            message="Are you sure you want to delete this room?"
-            show={visible}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default DeleteRoomModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
deleted file mode 100644
index edb57217..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeEditRackNameModal } from '../../actions/modals/topology'
-import { editRackName } from '../../actions/topology/rack'
-import TextInputModal from '../../components/modals/TextInputModal'
-
-const EditRackNameModal = (props) => {
-    const { visible, previousName } = useSelector((state) => {
-        return {
-            visible: state.modals.editRackNameModalVisible,
-            previousName:
-                state.interactionLevel.mode === 'RACK'
-                    ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
-                    : '',
-        }
-    })
-
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(name))
-        }
-        dispatch(closeEditRackNameModal())
-    }
-    return (
-        <TextInputModal
-            title="Edit rack name"
-            label="Rack name"
-            show={visible}
-            initialValue={previousName}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default EditRackNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
deleted file mode 100644
index a804c0b0..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeEditRoomNameModal } from '../../actions/modals/topology'
-import { editRoomName } from '../../actions/topology/room'
-import TextInputModal from '../../components/modals/TextInputModal'
-
-const EditRoomNameModal = (props) => {
-    const visible = useSelector((state) => state.modals.editRoomNameModalVisible)
-    const previousName = useSelector((state) =>
-        state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : ''
-    )
-
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRoomName(name))
-        }
-        dispatch(closeEditRoomNameModal())
-    }
-    return (
-        <TextInputModal
-            title="Edit room name"
-            label="Room name"
-            show={visible}
-            initialValue={previousName}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-export default EditRoomNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
deleted file mode 100644
index b364ed4c..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
-import NewPortfolioModalComponent from '../../components/modals/custom-components/NewPortfolioModalComponent'
-import { addPortfolio } from '../../actions/portfolios'
-
-const NewPortfolioModal = (props) => {
-    const show = useSelector((state) => state.modals.newPortfolioModalVisible)
-    const dispatch = useDispatch()
-    const callback = (name, targets) => {
-        if (name) {
-            dispatch(
-                addPortfolio({
-                    name,
-                    targets,
-                })
-            )
-        }
-        dispatch(closeNewPortfolioModal())
-    }
-    return <NewPortfolioModalComponent {...props} callback={callback} show={show} />
-}
-
-export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
deleted file mode 100644
index 18ad65f9..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NewScenarioModalComponent from '../../components/modals/custom-components/NewScenarioModalComponent'
-import { addScenario } from '../../actions/scenarios'
-import { closeNewScenarioModal } from '../../actions/modals/scenarios'
-
-const NewScenarioModal = (props) => {
-    const topologies = useSelector(({ currentProjectId, objects }) => {
-        if (currentProjectId === '-1' || !objects.project[currentProjectId]) {
-            return []
-        }
-
-        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
-
-        if (topologies.filter((t) => !t).length > 0) {
-            return []
-        }
-
-        return topologies
-    })
-    const state = useSelector((state) => {
-        return {
-            show: state.modals.newScenarioModalVisible,
-            currentPortfolioId: state.currentPortfolioId,
-            currentPortfolioScenarioIds:
-                state.currentPortfolioId !== '-1' && state.objects.portfolio[state.currentPortfolioId]
-                    ? state.objects.portfolio[state.currentPortfolioId].scenarioIds
-                    : [],
-            traces: Object.values(state.objects.trace),
-            schedulers: Object.values(state.objects.scheduler),
-        }
-    })
-
-    const dispatch = useDispatch()
-    const callback = (name, portfolioId, trace, topology, operational) => {
-        if (name) {
-            dispatch(
-                addScenario({
-                    portfolioId,
-                    name,
-                    trace,
-                    topology,
-                    operational,
-                })
-            )
-        }
-        dispatch(closeNewScenarioModal())
-    }
-
-    return <NewScenarioModalComponent {...props} {...state} topologies={topologies} callback={callback} />
-}
-
-export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
deleted file mode 100644
index 2f81706e..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NewTopologyModalComponent from '../../components/modals/custom-components/NewTopologyModalComponent'
-import { closeNewTopologyModal } from '../../actions/modals/topology'
-import { addTopology } from '../../actions/topologies'
-
-const NewTopologyModal = () => {
-    const show = useSelector((state) => state.modals.changeTopologyModalVisible)
-    const topologies = useSelector((state) => {
-        let topologies = state.objects.project[state.currentProjectId]
-            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-            : []
-        if (topologies.filter((t) => !t).length > 0) {
-            topologies = []
-        }
-
-        return topologies
-    })
-
-    const dispatch = useDispatch()
-    const onCreateTopology = (name) => {
-        if (name) {
-            dispatch(addTopology(name, undefined))
-        }
-        dispatch(closeNewTopologyModal())
-    }
-    const onDuplicateTopology = (name, id) => {
-        if (name) {
-            dispatch(addTopology(name, id))
-        }
-        dispatch(closeNewTopologyModal())
-    }
-    const onCancel = () => {
-        dispatch(closeNewTopologyModal())
-    }
-
-    return (
-        <NewTopologyModalComponent
-            show={show}
-            topologies={topologies}
-            onCreateTopology={onCreateTopology}
-            onDuplicateTopology={onDuplicateTopology}
-            onCancel={onCancel}
-        />
-    )
-}
-
-export default NewTopologyModal