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/opendc-web-ui/src/redux/index.js | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 opendc-web/opendc-web-ui/src/redux/index.js (limited to 'opendc-web/opendc-web-ui/src/redux/index.js') diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js new file mode 100644 index 00000000..c706752b --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/index.js @@ -0,0 +1,60 @@ +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' +import rootReducer from './reducers' +import rootSaga from './sagas' +import { viewportAdjustmentMiddleware } from './middleware/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 From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 23:18:02 +0200 Subject: ui: Migrate to Auth0 as Identity Provider This change updates the frontend codebase to move away from the Google login and instead use Auth0 as generic Identity Provider. This allows users to login with other accounts as well. Since Auth0 has a free tier, users can experiment themselves with OpenDC locally without having to pay for the login functionality. The code has been written so that we should be able to migrate away from Auth0 once it is not a suitable Identity Provider for OpenDC anymore. --- opendc-web/opendc-web-ui/src/redux/index.js | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/index.js') diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js index c706752b..ee6ca3f5 100644 --- a/opendc-web/opendc-web-ui/src/redux/index.js +++ b/opendc-web/opendc-web-ui/src/redux/index.js @@ -1,40 +1,32 @@ import { useMemo } from 'react' -import { applyMiddleware, compose, createStore } from 'redux' +import { applyMiddleware, 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' import rootReducer from './reducers' import rootSaga from './sagas' import { viewportAdjustmentMiddleware } from './middleware/viewport-adjustment' let store -function initStore(initialState) { - const sagaMiddleware = createSagaMiddleware() +function initStore(initialState, ctx) { + const sagaMiddleware = createSagaMiddleware({ context: ctx }) - const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware] + const middlewares = [thunk, sagaMiddleware, 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) + const configuredStore = createStore(rootReducer, initialState, applyMiddleware(...middlewares)) sagaMiddleware.run(rootSaga) store = configuredStore return configuredStore } -export const initializeStore = (preloadedState) => { - let _store = store ?? initStore(preloadedState) +export const initializeStore = (preloadedState, ctx) => { + let _store = store ?? initStore(preloadedState, ctx) // 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 @@ -55,6 +47,6 @@ export const initializeStore = (preloadedState) => { return _store } -export function useStore(initialState) { - return useMemo(() => initializeStore(initialState), [initialState]) +export function useStore(initialState, ctx) { + return useMemo(() => initializeStore(initialState, ctx), [initialState, ctx]) } -- cgit v1.2.3 From 5c582427366a30a21df64db393ecb9e4d1379439 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 17 May 2021 17:32:00 +0200 Subject: ui: Re-add support for Sentry This change re-adds the support for Sentry. This was lost during the migration from CRA to Next.js. --- opendc-web/opendc-web-ui/src/redux/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/index.js') diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js index ee6ca3f5..5c908957 100644 --- a/opendc-web/opendc-web-ui/src/redux/index.js +++ b/opendc-web/opendc-web-ui/src/redux/index.js @@ -1,11 +1,12 @@ import { useMemo } from 'react' -import { applyMiddleware, createStore } from 'redux' +import {applyMiddleware, compose, createStore} from 'redux' import { createLogger } from 'redux-logger' import createSagaMiddleware from 'redux-saga' import thunk from 'redux-thunk' import rootReducer from './reducers' import rootSaga from './sagas' import { viewportAdjustmentMiddleware } from './middleware/viewport-adjustment' +import { createReduxEnhancer } from "@sentry/react"; let store @@ -18,7 +19,13 @@ function initStore(initialState, ctx) { middlewares.push(createLogger()) } - const configuredStore = createStore(rootReducer, initialState, applyMiddleware(...middlewares)) + let middleware = applyMiddleware(...middlewares) + + if (process.env.NEXT_PUBLIC_SENTRY_DSN) { + middleware = compose(middleware, createReduxEnhancer()) + } + + const configuredStore = createStore(rootReducer, initialState, middleware) sagaMiddleware.run(rootSaga) store = configuredStore -- cgit v1.2.3