From c5ebfa0a85e6406d91189bb4c6c07bd25d395393 Mon Sep 17 00:00:00 2001 From: Thieres Lima Date: Thu, 9 Jul 2020 15:36:50 -0300 Subject: [PATCH] refactoring redux --- react-app/src/App.js | 14 +++---- react-app/src/actions/store.js | 12 ------ react-app/src/components/DCandidateForm.js | 2 +- react-app/src/components/DCandidates.js | 6 +-- react-app/src/index.js | 20 +++++++++- react-app/src/reducers/dCandidate.js | 37 ------------------ react-app/src/reducers/index.js | 6 --- react-app/src/store/actions/actionTypes.js | 5 +++ .../src/{ => store}/actions/dCandidate.js | 30 +++++++-------- react-app/src/store/actions/index.js | 6 +++ react-app/src/{actions => store}/api.js | 0 react-app/src/store/reducers/dCandidate.js | 38 +++++++++++++++++++ 12 files changed, 90 insertions(+), 86 deletions(-) delete mode 100644 react-app/src/actions/store.js delete mode 100644 react-app/src/reducers/dCandidate.js delete mode 100644 react-app/src/reducers/index.js create mode 100644 react-app/src/store/actions/actionTypes.js rename react-app/src/{ => store}/actions/dCandidate.js (68%) create mode 100644 react-app/src/store/actions/index.js rename react-app/src/{actions => store}/api.js (100%) create mode 100644 react-app/src/store/reducers/dCandidate.js diff --git a/react-app/src/App.js b/react-app/src/App.js index 394e274..9bf2bdd 100644 --- a/react-app/src/App.js +++ b/react-app/src/App.js @@ -1,21 +1,17 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; -import { store } from "./actions/store"; -import { Provider } from "react-redux"; import DCandidates from './components/DCandidates'; import { Container } from "@material-ui/core"; import { ToastProvider } from "react-toast-notifications"; function App() { return ( - - - - - - - + + + + + ); } diff --git a/react-app/src/actions/store.js b/react-app/src/actions/store.js deleted file mode 100644 index 09ead90..0000000 --- a/react-app/src/actions/store.js +++ /dev/null @@ -1,12 +0,0 @@ -import { createStore, applyMiddleware, compose } from "redux"; -import thunk from "redux-thunk"; -import { reducers } from "../reducers"; - - -export const store = createStore( - reducers, - compose( - applyMiddleware(thunk), - // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() - ) -) \ No newline at end of file diff --git a/react-app/src/components/DCandidateForm.js b/react-app/src/components/DCandidateForm.js index 3adbea5..c8b05b8 100644 --- a/react-app/src/components/DCandidateForm.js +++ b/react-app/src/components/DCandidateForm.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { Grid, TextField, withStyles, FormControl, InputLabel, Select, MenuItem, Button, FormHelperText } from "@material-ui/core"; import useForm from "./useForm"; import { connect } from "react-redux"; -import * as actions from "../actions/dCandidate"; +import * as actions from "../store/actions"; import { useToasts } from "react-toast-notifications"; const styles = theme => ({ diff --git a/react-app/src/components/DCandidates.js b/react-app/src/components/DCandidates.js index 89d172e..9b0ad56 100644 --- a/react-app/src/components/DCandidates.js +++ b/react-app/src/components/DCandidates.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; -import * as actions from "../actions/dCandidate"; +import * as actions from "../store/actions"; import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, withStyles, ButtonGroup, Button } from "@material-ui/core"; import DCandidateForm from "./DCandidateForm"; import EditIcon from "@material-ui/icons/Edit"; @@ -27,13 +27,13 @@ const DCandidates = ({ classes, ...props }) => { useEffect(() => { props.fetchAllDCandidates() }, [])//componentDidMount - + //toast msg. const { addToast } = useToasts() const onDelete = id => { if (window.confirm('Are you sure to delete this record?')) - props.deleteDCandidate(id,()=>addToast("Deleted successfully", { appearance: 'info' })) + props.deleteDCandidate(id, () => addToast("Deleted successfully", { appearance: 'info' })) } return ( diff --git a/react-app/src/index.js b/react-app/src/index.js index 87d1be5..249730b 100644 --- a/react-app/src/index.js +++ b/react-app/src/index.js @@ -1,10 +1,28 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { Provider } from 'react-redux'; +import { createStore, applyMiddleware, combineReducers } from 'redux'; +import thunk from 'redux-thunk'; + import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; -ReactDOM.render(, document.getElementById('root')); +import dCandidateReducer from './store/reducers/dCandidate'; + +const rootReducer = combineReducers({ + dCandidate: dCandidateReducer +}); + +const store = createStore(rootReducer, applyMiddleware(thunk)); + +const app = ( + + + +) + +ReactDOM.render(app, 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/react-app/src/reducers/dCandidate.js b/react-app/src/reducers/dCandidate.js deleted file mode 100644 index 891e63a..0000000 --- a/react-app/src/reducers/dCandidate.js +++ /dev/null @@ -1,37 +0,0 @@ -import { ACTION_TYPES } from "../actions/dCandidate"; -const initialState = { - list: [] -} - - -export const dCandidate = (state = initialState, action) => { - - switch (action.type) { - case ACTION_TYPES.FETCH_ALL: - return { - ...state, - list: [...action.payload] - } - - case ACTION_TYPES.CREATE: - return { - ...state, - list: [...state.list, action.payload] - } - - case ACTION_TYPES.UPDATE: - return { - ...state, - list: state.list.map(x => x.id == action.payload.id ? action.payload : x) - } - - case ACTION_TYPES.DELETE: - return { - ...state, - list: state.list.filter(x => x.id != action.payload) - } - - default: - return state - } -} \ No newline at end of file diff --git a/react-app/src/reducers/index.js b/react-app/src/reducers/index.js deleted file mode 100644 index 45572ed..0000000 --- a/react-app/src/reducers/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import { combineReducers } from "redux"; -import { dCandidate } from "./dCandidate"; - -export const reducers = combineReducers({ - dCandidate -}) \ No newline at end of file diff --git a/react-app/src/store/actions/actionTypes.js b/react-app/src/store/actions/actionTypes.js new file mode 100644 index 0000000..08088be --- /dev/null +++ b/react-app/src/store/actions/actionTypes.js @@ -0,0 +1,5 @@ + +export const CREATE = 'CREATE'; +export const UPDATE = 'UPDATE'; +export const DELETE = 'DELETE'; +export const FETCH_ALL = 'FETCH_ALL'; diff --git a/react-app/src/actions/dCandidate.js b/react-app/src/store/actions/dCandidate.js similarity index 68% rename from react-app/src/actions/dCandidate.js rename to react-app/src/store/actions/dCandidate.js index 7cdebf4..a5998d5 100644 --- a/react-app/src/actions/dCandidate.js +++ b/react-app/src/store/actions/dCandidate.js @@ -1,13 +1,9 @@ -import api from "./api"; +import * as actionTypes from './actionTypes'; + +import api from '../api'; -export const ACTION_TYPES = { - CREATE: 'CREATE', - UPDATE: 'UPDATE', - DELETE: 'DELETE', - FETCH_ALL: 'FETCH_ALL' -} -const formateData = data => ({ +const formatData = data => ({ ...data, age: parseInt(data.age ? data.age : 0) }) @@ -16,19 +12,19 @@ export const fetchAll = () => dispatch => { api.dCandidate().fetchAll() .then(response => { dispatch({ - type: ACTION_TYPES.FETCH_ALL, + type: actionTypes.FETCH_ALL, payload: response.data - }) + }); }) - .catch(err => console.log(err)) -} + .catch(err => console.log(err)); +}; export const create = (data, onSuccess) => dispatch => { - data = formateData(data) + data = formatData(data) api.dCandidate().create(data) .then(res => { dispatch({ - type: ACTION_TYPES.CREATE, + type: actionTypes.CREATE, payload: res.data }) onSuccess() @@ -37,11 +33,11 @@ export const create = (data, onSuccess) => dispatch => { } export const update = (id, data, onSuccess) => dispatch => { - data = formateData(data) + data = formatData(data) api.dCandidate().update(id, data) .then(res => { dispatch({ - type: ACTION_TYPES.UPDATE, + type: actionTypes.UPDATE, payload: { id, ...data } }) onSuccess() @@ -53,7 +49,7 @@ export const Delete = (id, onSuccess) => dispatch => { api.dCandidate().delete(id) .then(res => { dispatch({ - type: ACTION_TYPES.DELETE, + type: actionTypes.DELETE, payload: id }) onSuccess() diff --git a/react-app/src/store/actions/index.js b/react-app/src/store/actions/index.js new file mode 100644 index 0000000..5181516 --- /dev/null +++ b/react-app/src/store/actions/index.js @@ -0,0 +1,6 @@ +export { + fetchAll, + create, + update, + Delete +} from './dCandidate' \ No newline at end of file diff --git a/react-app/src/actions/api.js b/react-app/src/store/api.js similarity index 100% rename from react-app/src/actions/api.js rename to react-app/src/store/api.js diff --git a/react-app/src/store/reducers/dCandidate.js b/react-app/src/store/reducers/dCandidate.js new file mode 100644 index 0000000..417827c --- /dev/null +++ b/react-app/src/store/reducers/dCandidate.js @@ -0,0 +1,38 @@ +import * as actionTypes from '../actions/actionTypes'; + +const initialState = { + list: [] +} + +const dCandidate = (state = initialState, action) => { + switch (action.type) { + case actionTypes.FETCH_ALL: + return { + ...state, + list: [...action.payload] + } + + case actionTypes.CREATE: + return { + ...state, + list: [...state.list, ...action.payload] + } + + case actionTypes.UPDATE: + return { + ...state, + list: state.list.map(x => x.id === action.payload.id ? action.payload : x) + } + + case actionTypes.DELETE: + return { + ...state, + list: state.list.filter(x => x.id !== action.payload) + } + + default: + return state; + } +} + +export default dCandidate; \ No newline at end of file