From 6cc3643501eb11c98d43cf212bf1dd9aaa8aacc7 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Tue, 28 May 2019 04:39:50 +0200 Subject: [PATCH] install and use redux to fetch data from server --- client/package.json | 3 ++ client/src/index.js | 8 ++++- client/src/scenes/DoorLockCharges/index.js | 23 ++++++++++-- client/src/store/actions/doorLockActions.js | 17 +++++++++ client/src/store/actions/index.js | 1 + client/src/store/constants.js | 3 ++ client/src/store/reducers/doorLockReducers.js | 35 +++++++++++++++++++ client/src/store/reducers/index.js | 8 +++++ client/yarn.lock | 34 +++++++++++++++--- 9 files changed, 124 insertions(+), 8 deletions(-) create mode 100644 client/src/store/actions/doorLockActions.js create mode 100644 client/src/store/actions/index.js create mode 100644 client/src/store/constants.js create mode 100644 client/src/store/reducers/doorLockReducers.js create mode 100644 client/src/store/reducers/index.js diff --git a/client/package.json b/client/package.json index c5cd1e0..a44f884 100644 --- a/client/package.json +++ b/client/package.json @@ -5,8 +5,11 @@ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", + "react-redux": "^7.0.3", "react-router-dom": "^5.0.0", "react-scripts": "3.0.1", + "redux": "^4.0.1", + "redux-thunk": "^2.3.0", "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.87.1" }, diff --git a/client/src/index.js b/client/src/index.js index 59d987f..df0e4a4 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -4,8 +4,14 @@ import './index.css'; import 'semantic-ui-css/semantic.min.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import { Provider } from 'react-redux'; +import { createStore, applyMiddleware } from 'redux'; +import thunkMiddleware from 'redux-thunk'; +import { rootReducer } from "./store/reducers"; -ReactDOM.render(, document.getElementById('root')); +const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); + +ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/client/src/scenes/DoorLockCharges/index.js b/client/src/scenes/DoorLockCharges/index.js index 52020ee..b8fc383 100644 --- a/client/src/scenes/DoorLockCharges/index.js +++ b/client/src/scenes/DoorLockCharges/index.js @@ -1,12 +1,16 @@ import React, { Component } from 'react'; +import { connect } from 'react-redux'; -import { Container, Form } from "semantic-ui-react"; +import { Container, Form, Loader } from "semantic-ui-react"; import MainMenu from '../../components/MainMenu'; +import { fetchDoorLockCharges } from "../../store/actions"; class DoorLockCharges extends Component { render () { + console.log(this.props); + const pending = false; return ( @@ -33,11 +37,24 @@ class DoorLockCharges extends Component { label="Select DLock file" type="file" /> - Generate Report + Generate Report + { + pending && + } ); } } -export default DoorLockCharges; +const mapStateToProps = state => ({ + incidents: state.doorLockCharges.incidents, + pending: state.doorLockCharges.pending, + error: state.doorLockCharges.error, +}); + +const mapDispatchToProps = (dispatch) => ({ + fetchDoorLockCharges: () => fetchDoorLockCharges(dispatch), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(DoorLockCharges); diff --git a/client/src/store/actions/doorLockActions.js b/client/src/store/actions/doorLockActions.js new file mode 100644 index 0000000..4b09c0a --- /dev/null +++ b/client/src/store/actions/doorLockActions.js @@ -0,0 +1,17 @@ +import { + FETCH_DOOR_LOCK_CHARGES_PENDING, + FETCH_DOOR_LOCK_CHARGES_SUCCESS, + FETCH_DOOR_LOCK_CHARGES_FAILED +} from "../constants"; + +export const fetchDoorLockCharges = (dispatch) => { + dispatch({type: FETCH_DOOR_LOCK_CHARGES_PENDING}); + fetch('/api/doorLockCharges') + .then(response => response.json()) + .then(data => { + dispatch({type: FETCH_DOOR_LOCK_CHARGES_SUCCESS, payload: data}) + }) + .catch(err => { + dispatch({type: FETCH_DOOR_LOCK_CHARGES_FAILED, payload: err}) + }) +}; diff --git a/client/src/store/actions/index.js b/client/src/store/actions/index.js new file mode 100644 index 0000000..d21e20e --- /dev/null +++ b/client/src/store/actions/index.js @@ -0,0 +1 @@ +export * from './doorLockActions'; diff --git a/client/src/store/constants.js b/client/src/store/constants.js new file mode 100644 index 0000000..6dec00c --- /dev/null +++ b/client/src/store/constants.js @@ -0,0 +1,3 @@ +export const FETCH_DOOR_LOCK_CHARGES_PENDING = 'FETCH_DOOR_LOCK_CHARGES_PENDING'; +export const FETCH_DOOR_LOCK_CHARGES_SUCCESS = 'FETCH_DOOR_LOCK_CHARGES_SUCCESS'; +export const FETCH_DOOR_LOCK_CHARGES_FAILED = 'FETCH_DOOR_LOCK_CHARGES_FAILED'; diff --git a/client/src/store/reducers/doorLockReducers.js b/client/src/store/reducers/doorLockReducers.js new file mode 100644 index 0000000..ad22ac5 --- /dev/null +++ b/client/src/store/reducers/doorLockReducers.js @@ -0,0 +1,35 @@ +import { + FETCH_DOOR_LOCK_CHARGES_PENDING, + FETCH_DOOR_LOCK_CHARGES_SUCCESS, + FETCH_DOOR_LOCK_CHARGES_FAILED +} from "../constants"; + +const initialState = { + incidents: [], + pending: false, + error: '', +}; + +export const doorLockCharges = (state, action) => { + state = state || initialState; + action = action || {}; + + switch(action.type){ + case FETCH_DOOR_LOCK_CHARGES_PENDING: + return Object.assign({}, state, { + pending: true, + }); + case FETCH_DOOR_LOCK_CHARGES_SUCCESS: + return Object.assign({}, state, { + incidents: action.payload, + pending: false, + }); + case FETCH_DOOR_LOCK_CHARGES_FAILED: + return Object.assign({}, state, { + pending: false, + error: action.payload, + }); + default: + return state; + } +}; diff --git a/client/src/store/reducers/index.js b/client/src/store/reducers/index.js new file mode 100644 index 0000000..85381d2 --- /dev/null +++ b/client/src/store/reducers/index.js @@ -0,0 +1,8 @@ +import { combineReducers } from "redux"; + +import { doorLockCharges} from "./doorLockReducers"; + +export const rootReducer = combineReducers({ + doorLockCharges +}); + diff --git a/client/yarn.lock b/client/yarn.lock index 856d5a0..2f7cadb 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -761,7 +761,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" dependencies: @@ -3935,7 +3935,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" dependencies: @@ -6779,7 +6779,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.6.1, prop-types@^15.6.2: +prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" dependencies: @@ -6972,7 +6972,7 @@ react-error-overlay@^5.1.6: version "5.1.6" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" -react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" @@ -6987,6 +6987,17 @@ react-popper@^1.3.3: typed-styles "^0.0.7" warning "^4.0.2" +react-redux@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.0.3.tgz#983c5a6de81cb1e696bd1c090ba826545f9170f1" + dependencies: + "@babel/runtime" "^7.4.3" + hoist-non-react-statics "^3.3.0" + invariant "^2.2.4" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.8.6" + react-router-dom@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073" @@ -7152,6 +7163,17 @@ recursive-readdir@2.2.2: dependencies: minimatch "3.0.4" +redux-thunk@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" + +redux@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5" + dependencies: + loose-envify "^1.4.0" + symbol-observable "^1.2.0" + regenerate-unicode-properties@^8.0.2: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -8016,6 +8038,10 @@ svgo@^1.0.0, svgo@^1.2.1: unquote "~1.1.1" util.promisify "~1.0.0" +symbol-observable@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"