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/DeleteMachineModal.js | 43 +++++------- .../src/containers/modals/DeleteProfileModal.js | 42 +++++------- .../src/containers/modals/DeleteRackModal.js | 44 +++++------- .../src/containers/modals/DeleteRoomModal.js | 43 +++++------- .../src/containers/modals/EditRackNameModal.js | 57 ++++++++-------- .../src/containers/modals/EditRoomNameModal.js | 51 ++++++-------- .../src/containers/modals/NewPortfolioModal.js | 40 +++++------ .../src/containers/modals/NewProjectModal.js | 31 +++------ .../src/containers/modals/NewScenarioModal.js | 78 +++++++++++----------- .../src/containers/modals/NewTopologyModal.js | 70 ++++++++++--------- 10 files changed, 222 insertions(+), 277 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/modals') diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js index f30febdb..33b2612f 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js @@ -1,35 +1,26 @@ import React from 'react' -import { connect } from 'react-redux' +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 DeleteMachineModalComponent = ({ visible, callback }) => ( - -) - -const mapStateToProps = (state) => { - return { - visible: state.modals.deleteMachineModalVisible, +const DeleteMachineModal = () => { + const dispatch = useDispatch() + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteMachine()) + } + dispatch(closeDeleteMachineModal()) } + const visible = useSelector((state) => state.modals.deleteMachineModalVisible) + return ( + + ) } -const mapDispatchToProps = (dispatch) => { - return { - callback: (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteMachine()) - } - dispatch(closeDeleteMachineModal()) - }, - } -} - -const DeleteMachineModal = connect(mapStateToProps, mapDispatchToProps)(DeleteMachineModalComponent) - export default DeleteMachineModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js index e7c4014d..93a38642 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js @@ -1,35 +1,27 @@ import React from 'react' -import { connect } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { closeDeleteProfileModal } from '../../actions/modals/profile' import { deleteCurrentUser } from '../../actions/users' import ConfirmationModal from '../../components/modals/ConfirmationModal' -const DeleteProfileModalComponent = ({ visible, callback }) => ( - -) +const DeleteProfileModal = () => { + const visible = useSelector((state) => state.modals.deleteProfileModalVisible) -const mapStateToProps = (state) => { - return { - visible: state.modals.deleteProfileModalVisible, + const dispatch = useDispatch() + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteCurrentUser()) + } + dispatch(closeDeleteProfileModal()) } + return ( + + ) } -const mapDispatchToProps = (dispatch) => { - return { - callback: (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteCurrentUser()) - } - dispatch(closeDeleteProfileModal()) - }, - } -} - -const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)(DeleteProfileModalComponent) - export default DeleteProfileModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js index 0cb22a7e..ca76fd04 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js @@ -1,35 +1,27 @@ import React from 'react' -import { connect } from 'react-redux' +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 DeleteRackModalComponent = ({ visible, callback }) => ( - -) - -const mapStateToProps = (state) => { - return { - visible: state.modals.deleteRackModalVisible, +const DeleteRackModal = (props) => { + const visible = useSelector((state) => state.modals.deleteRackModalVisible) + const dispatch = useDispatch() + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteRack()) + } + dispatch(closeDeleteRackModal()) } + return ( + + ) } -const mapDispatchToProps = (dispatch) => { - return { - callback: (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteRack()) - } - dispatch(closeDeleteRackModal()) - }, - } -} - -const DeleteRackModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRackModalComponent) - 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 index 1f6eef92..9a7be6a6 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js @@ -1,35 +1,28 @@ import React from 'react' -import { connect } from 'react-redux' +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 DeleteRoomModalComponent = ({ visible, callback }) => ( - -) +const DeleteRoomModal = (props) => { + const visible = useSelector((state) => state.modals.deleteRoomModalVisible) -const mapStateToProps = (state) => { - return { - visible: state.modals.deleteRoomModalVisible, + const dispatch = useDispatch() + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteRoom()) + } + dispatch(closeDeleteRoomModal()) } + return ( + + ) } -const mapDispatchToProps = (dispatch) => { - return { - callback: (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteRoom()) - } - dispatch(closeDeleteRoomModal()) - }, - } -} - -const DeleteRoomModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRoomModalComponent) - 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 index 9128f449..edb57217 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js @@ -1,40 +1,37 @@ import React from 'react' -import { connect } from 'react-redux' +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 EditRackNameModalComponent = ({ visible, previousName, callback }) => ( - -) +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 mapStateToProps = (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 ( + + ) } -const mapDispatchToProps = (dispatch) => { - return { - callback: (name) => { - if (name) { - dispatch(editRackName(name)) - } - dispatch(closeEditRackNameModal()) - }, - } -} - -const EditRackNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRackNameModalComponent) - 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 index 8032a5d1..a804c0b0 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js @@ -1,38 +1,31 @@ import React from 'react' -import { connect } from 'react-redux' +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 EditRoomNameModalComponent = ({ visible, previousName, callback }) => ( - -) +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 mapStateToProps = (state) => { - return { - visible: state.modals.editRoomNameModalVisible, - previousName: - 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 ( + + ) } - -const mapDispatchToProps = (dispatch) => { - return { - callback: (name) => { - if (name) { - dispatch(editRoomName(name)) - } - dispatch(closeEditRoomNameModal()) - }, - } -} - -const EditRoomNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRoomNameModalComponent) - 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 index 6cf12d8e..b364ed4c 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js @@ -1,30 +1,24 @@ -import { connect } from 'react-redux' +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' -import { closeNewPortfolioModal } from '../../actions/modals/portfolios' - -const mapStateToProps = (state) => { - return { - show: state.modals.newPortfolioModalVisible, - } -} -const mapDispatchToProps = (dispatch) => { - return { - callback: (name, targets) => { - if (name) { - dispatch( - addPortfolio({ - name, - targets, - }) - ) - } - dispatch(closeNewPortfolioModal()) - }, +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 } -const NewPortfolioModal = connect(mapStateToProps, mapDispatchToProps)(NewPortfolioModalComponent) - export default NewPortfolioModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js index d306dc45..e63ba76b 100644 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js +++ b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js @@ -1,30 +1,19 @@ import React from 'react' -import { connect } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { closeNewProjectModal } from '../../actions/modals/projects' import { addProject } from '../../actions/projects' import TextInputModal from '../../components/modals/TextInputModal' -const NewProjectModalComponent = ({ visible, callback }) => ( - -) - -const mapStateToProps = (state) => { - return { - visible: state.modals.newProjectModalVisible, +const NewProjectModal = (props) => { + const visible = useSelector((state) => state.modals.newProjectModalVisible) + const dispatch = useDispatch() + const callback = (text) => { + if (text) { + dispatch(addProject(text)) + } + dispatch(closeNewProjectModal()) } + return } -const mapDispatchToProps = (dispatch) => { - return { - callback: (text) => { - if (text) { - dispatch(addProject(text)) - } - dispatch(closeNewProjectModal()) - }, - } -} - -const NewProjectModal = connect(mapStateToProps, mapDispatchToProps)(NewProjectModalComponent) - export default NewProjectModal 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 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 ( + + ) +} export default NewTopologyModal -- 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') 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. --- .../src/containers/modals/DeleteProfileModal.js | 27 ---------------------- .../src/containers/modals/NewScenarioModal.js | 2 -- 2 files changed, 29 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js (limited to 'opendc-web/opendc-web-ui/src/containers/modals') diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js deleted file mode 100644 index 93a38642..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeDeleteProfileModal } from '../../actions/modals/profile' -import { deleteCurrentUser } from '../../actions/users' -import ConfirmationModal from '../../components/modals/ConfirmationModal' - -const DeleteProfileModal = () => { - const visible = useSelector((state) => state.modals.deleteProfileModalVisible) - - const dispatch = useDispatch() - const callback = (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteCurrentUser()) - } - dispatch(closeDeleteProfileModal()) - } - return ( - - ) -} - -export default DeleteProfileModal 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 1891a6f3963d3ddeae0ea093f9a7e3608a97b4d7 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 13 May 2021 16:35:01 +0200 Subject: ui: Simplify projects page This change simplifies the logic and components of the projects page and reduces its dependency on Redux for simple operations. --- .../src/containers/modals/NewProjectModal.js | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js (limited to 'opendc-web/opendc-web-ui/src/containers/modals') diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js deleted file mode 100644 index e63ba76b..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeNewProjectModal } from '../../actions/modals/projects' -import { addProject } from '../../actions/projects' -import TextInputModal from '../../components/modals/TextInputModal' - -const NewProjectModal = (props) => { - const visible = useSelector((state) => state.modals.newProjectModalVisible) - const dispatch = useDispatch() - const callback = (text) => { - if (text) { - dispatch(addProject(text)) - } - dispatch(closeNewProjectModal()) - } - return -} - -export default NewProjectModal -- 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/DeleteMachineModal.js | 26 ----------- .../src/containers/modals/DeleteRackModal.js | 27 ----------- .../src/containers/modals/DeleteRoomModal.js | 28 ------------ .../src/containers/modals/EditRackNameModal.js | 37 --------------- .../src/containers/modals/EditRoomNameModal.js | 31 ------------- .../src/containers/modals/NewPortfolioModal.js | 24 ---------- .../src/containers/modals/NewScenarioModal.js | 53 ---------------------- .../src/containers/modals/NewTopologyModal.js | 48 -------------------- 8 files changed, 274 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js (limited to 'opendc-web/opendc-web-ui/src/containers/modals') 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 ( - - ) -} - -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 ( - - ) -} - -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 ( - - ) -} - -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 ( - - ) -} - -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 ( - - ) -} -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 -} - -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 -} - -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 ( - - ) -} - -export default NewTopologyModal -- cgit v1.2.3