senaduka/old-psihologija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

install and use redux to fetch data from server

Browse Source
This commit is contained in:
Bilal Catic
2019-05-28 04:39:50 +02:00
parent 0100f15960
commit 6cc3643501
9 changed files with 124 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/package.json
View File

@@ -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"
},

8
client/src/index.js
View File

@@ -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(<App />, document.getElementById('root'));
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
ReactDOM.render(<Provider store={store}><App /></Provider>, 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.

23
client/src/scenes/DoorLockCharges/index.js
View File

@@ -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 (
<Container>
<MainMenu/>
@@ -33,11 +37,24 @@ class DoorLockCharges extends Component {
label="Select DLock file"
type="file"
/>
<Form.Button>Generate Report</Form.Button>
<Form.Button onClick={this.props.fetchDoorLockCharges}>Generate Report</Form.Button>
</Form>
{
pending && <Loader active />
}
</Container>
);
}
}
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);

17
client/src/store/actions/doorLockActions.js Normal file
View File

@@ -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})
})
};

1
client/src/store/actions/index.js Normal file
View File

@@ -0,0 +1 @@
export * from './doorLockActions';

3
client/src/store/constants.js Normal file
View File

@@ -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';

35
client/src/store/reducers/doorLockReducers.js Normal file
View File

@@ -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;
}
};

8
client/src/store/reducers/index.js Normal file
View File

@@ -0,0 +1,8 @@
import { combineReducers } from "redux";
import { doorLockCharges} from "./doorLockReducers";
export const rootReducer = combineReducers({
doorLockCharges
});

34
client/yarn.lock
View File

@@ -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"