diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-08 16:08:02 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-08 16:08:02 +0200 |
| commit | 1a2416043f0b877f570e89da74e0d0a4aff1d8ae (patch) | |
| tree | 1bed18bb62d223be954faca87b0736d2a571b443 /opendc-web/opendc-web-ui/src/redux/actions | |
| parent | dfd2ded56780995cec6d91af37443b710d4ddb3b (diff) | |
| parent | 2c8d675c2cf140eac05988065a9d20fd2773399a (diff) | |
ui: Simplify data fetching in frontend
This pull request aims to simplify the data fetching logic in the OpenDC frontend.
Previously, the frontend used Redux extensively to sync the server state with the
client state, which introduced a lot of unnecessary complexity.
With this pull request, we move most of the data fetching logic out of Redux and
instead use React Query to perform the logic for fetching and caching API requests.
* Move all server data except topologies outside Redux
* Use React Query for fetching server data
* (De)normalize topology using Normalizr
* Remove current ids state from Redux
* Combine fetching of project relations
Diffstat (limited to 'opendc-web/opendc-web-ui/src/redux/actions')
6 files changed, 12 insertions, 145 deletions
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js b/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js deleted file mode 100644 index d37886d8..00000000 --- a/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js +++ /dev/null @@ -1,41 +0,0 @@ -export const ADD_PORTFOLIO = 'ADD_PORTFOLIO' -export const UPDATE_PORTFOLIO = 'UPDATE_PORTFOLIO' -export const DELETE_PORTFOLIO = 'DELETE_PORTFOLIO' -export const OPEN_PORTFOLIO_SUCCEEDED = 'OPEN_PORTFOLIO_SUCCEEDED' -export const SET_CURRENT_PORTFOLIO = 'SET_CURRENT_PORTFOLIO' - -export function addPortfolio(portfolio) { - return { - type: ADD_PORTFOLIO, - portfolio, - } -} - -export function updatePortfolio(portfolio) { - return { - type: UPDATE_PORTFOLIO, - portfolio, - } -} - -export function deletePortfolio(id) { - return { - type: DELETE_PORTFOLIO, - id, - } -} - -export function openPortfolioSucceeded(projectId, portfolioId) { - return { - type: OPEN_PORTFOLIO_SUCCEEDED, - projectId, - portfolioId, - } -} - -export function setCurrentPortfolio(portfolioId) { - return { - type: SET_CURRENT_PORTFOLIO, - portfolioId, - } -} diff --git a/opendc-web/opendc-web-ui/src/redux/actions/projects.js b/opendc-web/opendc-web-ui/src/redux/actions/projects.js index a6324c43..4fe6f6a8 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/projects.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/projects.js @@ -1,52 +1,5 @@ -export const FETCH_PROJECTS = 'FETCH_PROJECTS' -export const FETCH_PROJECTS_SUCCEEDED = 'FETCH_PROJECTS_SUCCEEDED' -export const ADD_PROJECT = 'ADD_PROJECT' -export const ADD_PROJECT_SUCCEEDED = 'ADD_PROJECT_SUCCEEDED' -export const DELETE_PROJECT = 'DELETE_PROJECT' -export const DELETE_PROJECT_SUCCEEDED = 'DELETE_PROJECT_SUCCEEDED' export const OPEN_PROJECT_SUCCEEDED = 'OPEN_PROJECT_SUCCEEDED' -export function fetchProjects() { - return { - type: FETCH_PROJECTS, - } -} - -export function fetchProjectsSucceeded(projects) { - return { - type: FETCH_PROJECTS_SUCCEEDED, - projects, - } -} - -export function addProject(name) { - return { - type: ADD_PROJECT, - name, - } -} - -export function addProjectSucceeded(project) { - return { - type: ADD_PROJECT_SUCCEEDED, - project, - } -} - -export function deleteProject(id) { - return { - type: DELETE_PROJECT, - id, - } -} - -export function deleteProjectSucceeded(id) { - return { - type: DELETE_PROJECT_SUCCEEDED, - id, - } -} - export function openProjectSucceeded(id) { return { type: OPEN_PROJECT_SUCCEEDED, diff --git a/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js b/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js deleted file mode 100644 index c8a90762..00000000 --- a/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js +++ /dev/null @@ -1,43 +0,0 @@ -export const ADD_SCENARIO = 'ADD_SCENARIO' -export const UPDATE_SCENARIO = 'UPDATE_SCENARIO' -export const DELETE_SCENARIO = 'DELETE_SCENARIO' -export const OPEN_SCENARIO_SUCCEEDED = 'OPEN_SCENARIO_SUCCEEDED' -export const SET_CURRENT_SCENARIO = 'SET_CURRENT_SCENARIO' - -export function addScenario(scenario) { - return { - type: ADD_SCENARIO, - scenario, - } -} - -export function updateScenario(scenario) { - return { - type: UPDATE_SCENARIO, - scenario, - } -} - -export function deleteScenario(id) { - return { - type: DELETE_SCENARIO, - id, - } -} - -export function openScenarioSucceeded(projectId, portfolioId, scenarioId) { - return { - type: OPEN_SCENARIO_SUCCEEDED, - projectId, - portfolioId, - scenarioId, - } -} - -export function setCurrentScenario(portfolioId, scenarioId) { - return { - type: SET_CURRENT_SCENARIO, - portfolioId, - scenarioId, - } -} diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js index dcce3b7d..529e8663 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js @@ -1,17 +1,18 @@ export const ADD_TOPOLOGY = 'ADD_TOPOLOGY' -export const DELETE_TOPOLOGY = 'DELETE_TOPOLOGY' +export const STORE_TOPOLOGY = 'STORE_TOPOLOGY' -export function addTopology(name, duplicateId) { +export function addTopology(projectId, name, duplicateId) { return { type: ADD_TOPOLOGY, + projectId, name, duplicateId, } } -export function deleteTopology(id) { +export function storeTopology(entities) { return { - type: DELETE_TOPOLOGY, - id, + type: STORE_TOPOLOGY, + entities, } } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js index 72deda6f..f1a7d569 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js @@ -32,7 +32,7 @@ export function startNewRoomConstructionSucceeded(roomId) { export function finishNewRoomConstruction() { return (dispatch, getState) => { const { objects, construction } = getState() - if (objects.room[construction.currentRoomInConstruction].tileIds.length === 0) { + if (objects.room[construction.currentRoomInConstruction].tiles.length === 0) { dispatch(cancelNewRoomConstruction()) return } @@ -75,13 +75,10 @@ export function toggleTileAtLocation(positionX, positionY) { return (dispatch, getState) => { const { objects, construction } = getState() - const tileIds = objects.room[construction.currentRoomInConstruction].tileIds - for (let index in tileIds) { - if ( - objects.tile[tileIds[index]].positionX === positionX && - objects.tile[tileIds[index]].positionY === positionY - ) { - dispatch(deleteTile(tileIds[index])) + const tileIds = objects.room[construction.currentRoomInConstruction].tiles + for (const tileId of tileIds) { + if (objects.tile[tileId].positionX === positionX && objects.tile[tileId].positionY === positionY) { + dispatch(deleteTile(tileId)) return } } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js index 61eea7fe..80ef7c5e 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js @@ -29,7 +29,7 @@ export function addRackToTile(positionX, positionY) { return (dispatch, getState) => { const { objects, interactionLevel } = getState() const currentRoom = objects.room[interactionLevel.roomId] - const tiles = currentRoom.tileIds.map((tileId) => objects.tile[tileId]) + const tiles = currentRoom.tiles.map((tileId) => objects.tile[tileId]) const tile = findTileWithPosition(tiles, positionX, positionY) if (tile !== null) { |
