From d21606bd238702645690586df5ad5b5075ca09c9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 11 May 2021 16:45:23 +0200 Subject: ui: Ensure Redux logger is last in middleware chain This change updates the Redux store initialization to ensure that the Redux logger is last in the middleware change. If we do not do this, Redux Logger might log thunds and promises, but not actual actions. See https://github.com/LogRocket/redux-logger/issues/20 --- opendc-web/opendc-web-ui/src/store/configure-store.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/store/configure-store.js') diff --git a/opendc-web/opendc-web-ui/src/store/configure-store.js b/opendc-web/opendc-web-ui/src/store/configure-store.js index d8f343ed..13bcd69e 100644 --- a/opendc-web/opendc-web-ui/src/store/configure-store.js +++ b/opendc-web/opendc-web-ui/src/store/configure-store.js @@ -6,24 +6,16 @@ import thunk from 'redux-thunk' import { authRedirectMiddleware } from '../auth/index' import rootReducer from '../reducers/index' import rootSaga from '../sagas/index' -import { dummyMiddleware } from './middlewares/dummy-middleware' import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment' const sagaMiddleware = createSagaMiddleware() -let logger +const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware] + if (process.env.NODE_ENV !== 'production') { - logger = createLogger() + middlewares.push(createLogger()) } -const middlewares = [ - process.env.NODE_ENV === 'production' ? dummyMiddleware : logger, - thunk, - sagaMiddleware, - authRedirectMiddleware, - viewportAdjustmentMiddleware, -] - export let store = undefined export default function configureStore() { -- 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-ui/src/store/configure-store.js | 51 ++++++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/store/configure-store.js') diff --git a/opendc-web/opendc-web-ui/src/store/configure-store.js b/opendc-web/opendc-web-ui/src/store/configure-store.js index 13bcd69e..149536a3 100644 --- a/opendc-web/opendc-web-ui/src/store/configure-store.js +++ b/opendc-web/opendc-web-ui/src/store/configure-store.js @@ -1,6 +1,7 @@ +import { useMemo } from 'react' import { applyMiddleware, compose, createStore } from 'redux' -import persistState from 'redux-localstorage' import { createLogger } from 'redux-logger' +import persistState from 'redux-localstorage' import createSagaMiddleware from 'redux-saga' import thunk from 'redux-thunk' import { authRedirectMiddleware } from '../auth/index' @@ -8,20 +9,52 @@ import rootReducer from '../reducers/index' import rootSaga from '../sagas/index' import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment' -const sagaMiddleware = createSagaMiddleware() +let store -const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware] +function initStore(initialState) { + const sagaMiddleware = createSagaMiddleware() -if (process.env.NODE_ENV !== 'production') { - middlewares.push(createLogger()) -} + const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware] -export let store = undefined + if (process.env.NODE_ENV !== 'production') { + middlewares.push(createLogger()) + } -export default function configureStore() { - const configuredStore = createStore(rootReducer, compose(persistState('auth'), applyMiddleware(...middlewares))) + let enhancer = applyMiddleware(...middlewares) + + if (global.localStorage) { + enhancer = compose(persistState('auth'), enhancer) + } + + const configuredStore = createStore(rootReducer, enhancer) sagaMiddleware.run(rootSaga) store = configuredStore return configuredStore } + +export const initializeStore = (preloadedState) => { + let _store = store ?? initStore(preloadedState) + + // After navigating to a page with an initial Redux state, merge that state + // with the current state in the store, and create a new store + if (preloadedState && store) { + _store = initStore({ + ...store.getState(), + ...preloadedState, + }) + // Reset the current store + store = undefined + } + + // For SSG and SSR always create a new store + if (typeof window === 'undefined') return _store + // Create the store once in the client + if (!store) store = _store + + return _store +} + +export function useStore(initialState) { + return useMemo(() => initializeStore(initialState), [initialState]) +} -- cgit v1.2.3 From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 17:07:58 +0200 Subject: ui: Restructure OpenDC frontend This change updates the structure of the OpenDC frontend in order to improve the maintainability of the frontend. --- .../opendc-web-ui/src/store/configure-store.js | 60 ---------------------- 1 file changed, 60 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/store/configure-store.js (limited to 'opendc-web/opendc-web-ui/src/store/configure-store.js') diff --git a/opendc-web/opendc-web-ui/src/store/configure-store.js b/opendc-web/opendc-web-ui/src/store/configure-store.js deleted file mode 100644 index 149536a3..00000000 --- a/opendc-web/opendc-web-ui/src/store/configure-store.js +++ /dev/null @@ -1,60 +0,0 @@ -import { useMemo } from 'react' -import { applyMiddleware, compose, createStore } from 'redux' -import { createLogger } from 'redux-logger' -import persistState from 'redux-localstorage' -import createSagaMiddleware from 'redux-saga' -import thunk from 'redux-thunk' -import { authRedirectMiddleware } from '../auth/index' -import rootReducer from '../reducers/index' -import rootSaga from '../sagas/index' -import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment' - -let store - -function initStore(initialState) { - const sagaMiddleware = createSagaMiddleware() - - const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware] - - if (process.env.NODE_ENV !== 'production') { - middlewares.push(createLogger()) - } - - let enhancer = applyMiddleware(...middlewares) - - if (global.localStorage) { - enhancer = compose(persistState('auth'), enhancer) - } - - const configuredStore = createStore(rootReducer, enhancer) - sagaMiddleware.run(rootSaga) - store = configuredStore - - return configuredStore -} - -export const initializeStore = (preloadedState) => { - let _store = store ?? initStore(preloadedState) - - // After navigating to a page with an initial Redux state, merge that state - // with the current state in the store, and create a new store - if (preloadedState && store) { - _store = initStore({ - ...store.getState(), - ...preloadedState, - }) - // Reset the current store - store = undefined - } - - // For SSG and SSR always create a new store - if (typeof window === 'undefined') return _store - // Create the store once in the client - if (!store) store = _store - - return _store -} - -export function useStore(initialState) { - return useMemo(() => initializeStore(initialState), [initialState]) -} -- cgit v1.2.3