From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:41:53 +0100
Subject: ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.
---
 .../src/containers/modals/NewTopologyModal.js      | 70 ++++++++++++----------
 1 file changed, 38 insertions(+), 32 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
index 0acf6cf2..2f81706e 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
@@ -1,42 +1,48 @@
-import { connect } from 'react-redux'
+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 mapStateToProps = (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 = []
-    }
+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 {
-        show: state.modals.changeTopologyModalVisible,
-        topologies,
-    }
-}
+        return topologies
+    })
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onCreateTopology: (name) => {
-            if (name) {
-                dispatch(addTopology(name, undefined))
-            }
-            dispatch(closeNewTopologyModal())
-        },
-        onDuplicateTopology: (name, id) => {
-            if (name) {
-                dispatch(addTopology(name, id))
-            }
-            dispatch(closeNewTopologyModal())
-        },
-        onCancel: () => {
-            dispatch(closeNewTopologyModal())
-        },
+    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())
     }
-}
 
-const NewTopologyModal = connect(mapStateToProps, mapDispatchToProps)(NewTopologyModalComponent)
+    return (
+        <NewTopologyModalComponent
+            show={show}
+            topologies={topologies}
+            onCreateTopology={onCreateTopology}
+            onDuplicateTopology={onDuplicateTopology}
+            onCancel={onCancel}
+        />
+    )
+}
 
 export default NewTopologyModal
-- 
cgit v1.2.3


From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 17:42:53 +0200
Subject: 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.
---
 .../src/containers/modals/NewTopologyModal.js      | 48 ----------------------
 1 file changed, 48 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js

(limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js')

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
-- 
cgit v1.2.3