ui: Update frontend dependencies

This pull request updates the React dependencies used in the OpenDC frontend.

* Actualize React, react-konva and react-scripts
* Actualize Bootstrap and Reactstrap
* Migrate to Redux hooks to reduce clutter

1 files changed, 45 insertions, 40 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
index 7d774fa4..b588b4bc 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
@@ -1,50 +1,55 @@
-import { connect } from 'react-redux'
+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 mapStateToProps = (state) => {
-    let topologies =
-        state.currentProjectId !== '-1'
-            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-            : []
-    if (topologies.filter((t) => !t).length > 0) {
-        topologies = []
-    }
+const NewScenarioModal = (props) => {
+    const topologies = useSelector(({ currentProjectId, objects }) => {
+        console.log(currentProjectId, objects)
 
-    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),
-        topologies,
-        schedulers: Object.values(state.objects.scheduler),
-    }
-}
+        if (currentProjectId === '-1' || !objects.project[currentProjectId]) {
+            return []
+        }
+
+        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name, portfolioId, trace, topology, operational) => {
-            if (name) {
-                dispatch(
-                    addScenario({
-                        portfolioId,
-                        name,
-                        trace,
-                        topology,
-                        operational,
-                    })
-                )
-            }
-
-            dispatch(closeNewScenarioModal())
-        },
+        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())
     }
-}
 
-const NewScenarioModal = connect(mapStateToProps, mapDispatchToProps)(NewScenarioModalComponent)
+    return <NewScenarioModalComponent {...props} {...state} topologies={topologies} callback={callback} />
+}
 
 export default NewScenarioModal