From 8388eaf94d23cd21ce9f3f6eeda3c49c2dbfbab9 Mon Sep 17 00:00:00 2001 From: Divyanshi Singh Date: Apr 07 2021 11:12:40 +0000 Subject: redux toolkit implemented --- diff --git a/package.json b/package.json index 20d0779..fab2975 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "homepage": ".", "dependencies": { + "@reduxjs/toolkit": "^1.5.1", "bootstrap": "^4.4.1", "dateformat": "^3.0.3", "react": "^16.5.2", diff --git a/src/actions/reduxActions.js b/src/actions/reduxActions.js index 80a3461..306bca1 100644 --- a/src/actions/reduxActions.js +++ b/src/actions/reduxActions.js @@ -1,15 +1,8 @@ -import ActionTypes from '../constants'; +import { loadData, loadDataResp } from '../reducers/landingPageSlice'; +import { loadWizardDataResp, loadWizardData } from '../reducers/wizardSlice'; -export const loadDataResp = payload => ({ - type: ActionTypes.LOAD_DATA_RESP, - payload: payload -}) - -export const loadData = payload => dispatch => { - dispatch({ - type: ActionTypes.LOAD_DATA, - payload: payload - }); +export const fetchLandingPageData = (dispatch) => dispatch => { + dispatch(loadData()); fetch(window.env.ORACULUM_API_URL_v1 + "landing_page") .then(blob => blob.json()) @@ -21,17 +14,8 @@ export const loadData = payload => dispatch => { }); } -export const loadWizardDataResp = payload => ({ - type: ActionTypes.LOAD_WIZARD_DATA_RESP, - payload: payload -}) - -export const loadWizardData = payload => dispatch => { - dispatch({ - type: ActionTypes.LOAD_WIZARD_DATA, - payload: payload - }); - +export const fetchWizardData = payload => dispatch => { + dispatch(loadWizardData()) fetch(window.env.ORACULUM_API_URL_v1 + "actions/all") .then(blob => blob.json()) .then(data => { diff --git a/src/configureStore.js b/src/configureStore.js new file mode 100644 index 0000000..4ac50f4 --- /dev/null +++ b/src/configureStore.js @@ -0,0 +1,19 @@ +import { configureStore, combineReducers } from '@reduxjs/toolkit'; +import logger from 'redux-logger'; +import thunkMiddleware from 'redux-thunk'; +import landingPageReducer from './reducers/landingPageSlice'; +import wizardReducer from './reducers/wizardSlice'; + +const reducer = combineReducers({ + landing_page: landingPageReducer, + wizard: wizardReducer +}) + +export default function configureAppStore() { + const store = configureStore({ + reducer, + middleware: [ thunkMiddleware, logger ], + devTools: process.env.NODE_ENV !== 'production', + }) + return store; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 35f417c..5c27953 100644 --- a/src/index.js +++ b/src/index.js @@ -9,17 +9,10 @@ import 'typeface-open-sans' import App from './App'; import * as serviceWorker from './serviceWorker'; -import { createStore, applyMiddleware } from 'redux' -import thunkMiddleware from 'redux-thunk' -import { createLogger } from 'redux-logger' -import { Provider } from 'react-redux' -import reducer from './reducers' +import { Provider } from 'react-redux'; +import configureAppStore from './configureStore'; -const loggerMiddleware = createLogger(); -const store = createStore(reducer, applyMiddleware( - thunkMiddleware, - loggerMiddleware -)); +const store= configureAppStore(); ReactDOM.render( diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js index b1bee82..aec079a 100644 --- a/src/landingpage/LandingPage.js +++ b/src/landingpage/LandingPage.js @@ -11,7 +11,7 @@ import Hideable from "./Hideable" import _ from "lodash" import { connect } from "react-redux" -import { loadData } from "../actions/reduxActions" +import { fetchLandingPageData } from "../actions/reduxActions" import Cookies from "universal-cookie" @@ -38,7 +38,7 @@ class LandingPage extends Component { } componentDidMount() { - this.props.dispatch(loadData()) + this.props.dispatch(fetchLandingPageData()) } toggle_config_mode(e) { diff --git a/src/reducers/index.js b/src/reducers/index.js deleted file mode 100644 index 5e628e0..0000000 --- a/src/reducers/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import ActionTypes from "../constants" - -const defaultState = { - landing_page: { - blockerbugs: {}, - devel: 0, - meetings: [], - schedule: [], - last_qa_meeting: {}, - stable: 0, - config_mode: false, - enabled_components: ["events", "blockers", "minutes"], - }, - wizard: { - actions: [], - providers: [], - all_actions: [], - }, -} - -export default (state = defaultState, action) => { - switch (action.type) { - case ActionTypes.LOAD_DATA_RESP: - return { - ...state, - landing_page: action.payload, - } - - case ActionTypes.LOAD_WIZARD_DATA_RESP: - return { - ...state, - wizard: { - ...state.wizard, - providers: action.payload.providers, - all_actions: action.payload.actions, - }, - } - - default: - return { - ...state, - } - } -} diff --git a/src/reducers/landingPageSlice.js b/src/reducers/landingPageSlice.js new file mode 100644 index 0000000..d1e2cbb --- /dev/null +++ b/src/reducers/landingPageSlice.js @@ -0,0 +1,28 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const landingPageReducer = createSlice({ + name: "landing_page", + initialState: { + blockerbugs: {}, + devel: 0, + meetings: [], + schedule: [], + last_qa_meeting: {}, + stable: 0, + config_mode: false, + enabled_components: ["events", "blockers", "minutes"], + + loading: false + }, + reducers: { + loadData(state, action) { + if (!state.loading) state.loading = true; + }, + loadDataResp(state, action) { + state.loading = false; + Object.assign(state, { ...action.payload }); + } + } +}); +export const { loadData, loadDataResp } = landingPageReducer.actions; +export default landingPageReducer.reducer; diff --git a/src/reducers/wizardSlice.js b/src/reducers/wizardSlice.js new file mode 100644 index 0000000..f48032b --- /dev/null +++ b/src/reducers/wizardSlice.js @@ -0,0 +1,24 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const wizardReducer = createSlice({ + name: "wizard", + initialState: { + actions: [], + providers: [], + all_actions: [], + + loading: false + }, + reducers: { + loadWizardData(state, action) { + if (!state.loading) state.loading = true; + }, + loadWizardDataResp(state, action) { + state.loading = false; + state.providers = action.payload.providers; + state.all_actions = action.payload.actions; + } + } +}); +export const { loadWizardData, loadWizardDataResp } = wizardReducer.actions; +export default wizardReducer.reducer; diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js index a9ecb3e..1b136bd 100644 --- a/src/wizard/Wizard.js +++ b/src/wizard/Wizard.js @@ -6,7 +6,7 @@ import Actions from "./Actions" import { Container, Row } from "reactstrap" import { connect } from "react-redux" -import { loadWizardData } from "../actions/reduxActions" +import { fetchWizardData } from "../actions/reduxActions" class Wizard extends Component { constructor(props) { @@ -26,7 +26,7 @@ class Wizard extends Component { }) }) - this.props.dispatch(loadWizardData()) + this.props.dispatch(fetchWizardData()) } show_actions(actions) { diff --git a/yarn.lock b/yarn.lock index 85bfaa4..626a2c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1359,6 +1359,16 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@reduxjs/toolkit@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5" + integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA== + dependencies: + immer "^8.0.1" + redux "^4.0.0" + redux-thunk "^2.3.0" + reselect "^4.0.0" + "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -5236,6 +5246,11 @@ immer@1.10.0: resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== +immer@^8.0.1: + version "8.0.4" + resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a" + integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -8837,7 +8852,7 @@ redux-thunk@^2.3.0: resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw== -redux@^4.0.5: +redux@^4.0.0, redux@^4.0.5: version "4.0.5" resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== @@ -9017,6 +9032,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +reselect@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" + integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"