From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek 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/NewScenarioModal.js | 78 +++++++++++----------- 1 file changed, 38 insertions(+), 40 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js') 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..1de838e4 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,48 @@ -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 state = useSelector((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 = [] + } - 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), - } -} + 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), + } + }) -const mapDispatchToProps = (dispatch) => { - return { - callback: (name, portfolioId, trace, topology, operational) => { - if (name) { - dispatch( - addScenario({ - portfolioId, - name, - trace, - topology, - operational, - }) - ) - } - - dispatch(closeNewScenarioModal()) - }, + const dispatch = useDispatch() + const callback = (name, portfolioId, trace, topology, operational) => { + if (name) { + dispatch( + addScenario({ + portfolioId, + name, + trace, + topology, + operational, + }) + ) + } + dispatch(closeNewScenarioModal()) } + return } -const NewScenarioModal = connect(mapStateToProps, mapDispatchToProps)(NewScenarioModalComponent) - export default NewScenarioModal -- cgit v1.2.3 From 4d4fb1bb19c045e78c74e57816ebee251e1d7d08 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 23:41:16 +0100 Subject: ui: Fix undefined project in NewScenarioModal --- .../src/containers/modals/NewScenarioModal.js | 23 ++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js') 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 1de838e4..b588b4bc 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js @@ -5,15 +5,22 @@ import { addScenario } from '../../actions/scenarios' import { closeNewScenarioModal } from '../../actions/modals/scenarios' const NewScenarioModal = (props) => { - const state = useSelector((state) => { - let topologies = - state.currentProjectId !== '-1' - ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) - : [] + const topologies = useSelector(({ currentProjectId, objects }) => { + console.log(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) { - topologies = [] + return [] } + return topologies + }) + const state = useSelector((state) => { return { show: state.modals.newScenarioModalVisible, currentPortfolioId: state.currentPortfolioId, @@ -22,7 +29,6 @@ const NewScenarioModal = (props) => { ? state.objects.portfolio[state.currentPortfolioId].scenarioIds : [], traces: Object.values(state.objects.trace), - topologies, schedulers: Object.values(state.objects.scheduler), } }) @@ -42,7 +48,8 @@ const NewScenarioModal = (props) => { } dispatch(closeNewScenarioModal()) } - return + + return } export default NewScenarioModal -- cgit v1.2.3 From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 12 May 2021 22:42:12 +0200 Subject: ui: Migrate from CRA to Next.js This change updates the web frontend to use Next.js instead of Create React App (CRA). Next.js enables the possibility of rendering pages on the server side (which reduces the time to first frame) and overall provides a better development experience. Future commits will try to futher optimize the implementation for Next.js. --- opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js') 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 b588b4bc..18ad65f9 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js @@ -6,8 +6,6 @@ import { closeNewScenarioModal } from '../../actions/modals/scenarios' const NewScenarioModal = (props) => { const topologies = useSelector(({ currentProjectId, objects }) => { - console.log(currentProjectId, objects) - if (currentProjectId === '-1' || !objects.project[currentProjectId]) { return [] } -- cgit v1.2.3 From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek 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/NewScenarioModal.js | 53 ---------------------- 1 file changed, 53 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js (limited to 'opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js') 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 -} - -export default NewScenarioModal -- cgit v1.2.3