From 55e0dd5da85dae5348a2955f91f59d466e134818 Mon Sep 17 00:00:00 2001 From: kunal prakash Date: May 04 2021 13:42:06 +0000 Subject: Making redux section of this project more robust, scalable and nice way to handle asynchronous activity Used combineReducer to combine multiple reducer and made redux folder for respective LandingPage and Wizard --- diff --git a/src/actions/reduxActions.js b/src/actions/reduxActions.js deleted file mode 100644 index 80a3461..0000000 --- a/src/actions/reduxActions.js +++ /dev/null @@ -1,43 +0,0 @@ -import ActionTypes from '../constants'; - -export const loadDataResp = payload => ({ - type: ActionTypes.LOAD_DATA_RESP, - payload: payload -}) - -export const loadData = payload => dispatch => { - dispatch({ - type: ActionTypes.LOAD_DATA, - payload: payload - }); - - fetch(window.env.ORACULUM_API_URL_v1 + "landing_page") - .then(blob => blob.json()) - .then(data => { - dispatch(loadDataResp(data)) - }) - .catch((error) => { - console.error('Error:', error); - }); -} - -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 - }); - - fetch(window.env.ORACULUM_API_URL_v1 + "actions/all") - .then(blob => blob.json()) - .then(data => { - dispatch(loadWizardDataResp(data)) - }) - .catch((error) => { - console.error('Error:', error); - }); -} diff --git a/src/constants/index.js b/src/constants/index.js deleted file mode 100644 index c6bfe99..0000000 --- a/src/constants/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - LOAD_DATA: 'LOAD_DATA', - LOAD_DATA_RESP: 'LOAD_DATA_RESP', - LOAD_WIZARD_DATA: 'LOAD_WIZARD_DATA', - LOAD_WIZARD_DATA_RESP: 'LOAD_WIZARD_DATA_RESP', -} diff --git a/src/index.js b/src/index.js index 35f417c..6de1701 100644 --- a/src/index.js +++ b/src/index.js @@ -13,10 +13,10 @@ 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 rootReducer from './redux/rootReducer' const loggerMiddleware = createLogger(); -const store = createStore(reducer, applyMiddleware( +const store = createStore(rootReducer, applyMiddleware( thunkMiddleware, loggerMiddleware )); diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js index b1bee82..6dea638 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 { loadData } from "../redux/landinpage/action" import Cookies from "universal-cookie" 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/redux/landinpage/action.js b/src/redux/landinpage/action.js new file mode 100644 index 0000000..827f7c3 --- /dev/null +++ b/src/redux/landinpage/action.js @@ -0,0 +1,27 @@ +import ActionTypes from './constants' + +export const fetchDataStart = () => ({ + type: ActionTypes.LOAD_DATA_START +}) + +export const fetchDataSuccess = (payload) => ({ + type: ActionTypes.LOAD_DATA_SUCCESS, + payload: payload +}) + +export const fetchDataFail = (errorMessage) => ({ + type: ActionTypes.LOAD_DATA_FAILURE, + payload: errorMessage +}) + +export const loadData = () => { + return dispatch => { + dispatch(fetchDataStart()) + + fetch(window.env.ORACULUM_API_URL_v1 + "landing_page") + .then(blob => blob.json()) + .then(data => { + dispatch(fetchDataSuccess(data)) + }).catch(error => dispatch(fetchDataFail(error.message))) + } +} \ No newline at end of file diff --git a/src/redux/landinpage/constants.js b/src/redux/landinpage/constants.js new file mode 100644 index 0000000..dc975e6 --- /dev/null +++ b/src/redux/landinpage/constants.js @@ -0,0 +1,5 @@ +export default { + LOAD_DATA_START: 'LOAD_DATA_START', + LOAD_DATA_SUCCESS: 'LOAD_DATA_SUCCESS', + LOAD_DATA_FAILURE: 'LOAD_DATA_FAILURE', +} \ No newline at end of file diff --git a/src/redux/landinpage/index.js b/src/redux/landinpage/index.js new file mode 100644 index 0000000..5241e6e --- /dev/null +++ b/src/redux/landinpage/index.js @@ -0,0 +1,42 @@ +import ActionTypes from "./constants" + +const defaultState = { + blockerbugs: {}, + devel: 0, + meetings: [], + schedule: [], + last_qa_meeting: {}, + stable: 0, + config_mode: false, + enabled_components: ["events", "blockers", "minutes"], + errorMessage: "", +} + +const LandingPageReducer = (state = defaultState, action) => { + switch (action.type) { + + case ActionTypes.LOAD_DATA_START: + return { + ...state, + } + + case ActionTypes.LOAD_DATA_SUCCESS: + return { + ...state, + ...action.payload + } + + case ActionTypes.LOAD_DATA_FAILURE: + return { + ...state, + errorMessage: action.payload + } + + default : + return { + ...state + } + } +} + +export default LandingPageReducer \ No newline at end of file diff --git a/src/redux/rootReducer.js b/src/redux/rootReducer.js new file mode 100644 index 0000000..4b3773c --- /dev/null +++ b/src/redux/rootReducer.js @@ -0,0 +1,11 @@ +import { combineReducers } from "redux" + +import LandingPageReducer from "./landinpage/index" +import WizardReducer from "./wizard/index" + +const rootReducer = combineReducers({ + landing_page: LandingPageReducer, + wizard: WizardReducer +}) + +export default rootReducer \ No newline at end of file diff --git a/src/redux/wizard/action.js b/src/redux/wizard/action.js new file mode 100644 index 0000000..9ce79d8 --- /dev/null +++ b/src/redux/wizard/action.js @@ -0,0 +1,28 @@ +import ActionTypes from './constants' + +export const fetchWizardDataStart = () => ({ + type: ActionTypes.LOAD_WIZARD_DATA_START +}) + +export const fetchWizardDataSuccess = (payload) => ({ + type: ActionTypes.LOAD_WIZARD_DATA_SUCCESS, + payload: payload +}) + +export const fetchWizardDataFail = (errorMessage) => ({ + type: ActionTypes.LOAD_WIZARD_DATA_FAIL, + payload: errorMessage +}) + +export const loadWizardData = () => { + return dispatch => { + dispatch(fetchWizardDataStart()) + + fetch(window.env.ORACULUM_API_URL_v1 + "actions/all") + .then(blob => blob.json()) + .then(data => { + dispatch(fetchWizardDataSuccess(data)) + }) + .catch(error => dispatch(fetchWizardDataFail(error.message))) + } +} \ No newline at end of file diff --git a/src/redux/wizard/constants.js b/src/redux/wizard/constants.js new file mode 100644 index 0000000..8baa10f --- /dev/null +++ b/src/redux/wizard/constants.js @@ -0,0 +1,5 @@ +export default { + LOAD_WIZARD_DATA_START: 'LOAD_WIZARD_DATA_START', + LOAD_WIZARD_DATA_SUCCESS: 'LOAD_WIZARD_DATA_SUCCESS', + LOAD_WIZARD_DATA_FAIL: 'LOAD_WIZARD_DATA_FAIL', +} \ No newline at end of file diff --git a/src/redux/wizard/index.js b/src/redux/wizard/index.js new file mode 100644 index 0000000..594dfb5 --- /dev/null +++ b/src/redux/wizard/index.js @@ -0,0 +1,38 @@ +import ActionTypes from './constants' + +const defaultState = { + actions: [], + providers: [], + all_actions: [], + errorMessage: "", +} + +const WizardReducer = (state = defaultState, action) => { + switch (action.type) { + + case ActionTypes.LOAD_WIZARD_DATA_START: + return { + ...state, + } + + case ActionTypes.LOAD_WIZARD_DATA_SUCCESS: + return { + ...state, + providers: action.payload.providers, + all_actions: action.payload.actions, + } + + case ActionTypes.LOAD_WIZARD_DATA_FAIL: + return { + ...state, + errorMessage: action.payload + } + + default: + return { + ...state, + } + } +} + +export default WizardReducer \ No newline at end of file diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js index a9ecb3e..7cccc53 100644 --- a/src/wizard/Wizard.js +++ b/src/wizard/Wizard.js @@ -1,12 +1,11 @@ import React, { Component } from "react" import WizardForm from "./WizardForm" import Layout from "../layout/Layout" -import { oraculumApiUrl_v1 } from "../config" import Actions from "./Actions" import { Container, Row } from "reactstrap" import { connect } from "react-redux" -import { loadWizardData } from "../actions/reduxActions" +import { loadWizardData } from "../redux/wizard/action" class Wizard extends Component { constructor(props) { @@ -17,14 +16,14 @@ class Wizard extends Component { } componentDidMount() { - fetch(oraculumApiUrl_v1 + "actions/all") - .then((resp) => resp.json()) - .then((data) => { - this.setState({ - providers: data.providers, - all_actions: data.actions, - }) - }) + // fetch(oraculumApiUrl_v1 + "actions/all") + // .then((resp) => resp.json()) + // .then((data) => { + // this.setState({ + // providers: data.providers, + // all_actions: data.actions, + // }) + // }) this.props.dispatch(loadWizardData()) }