Added store, reducers and actions.

Refactored employees-components.

Author: merikbest

img/Employees_Add.jpg

@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-scripts": "3.4.3",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.1",
     "react-router-dom": "^5.2.0",
     "bootstrap": "^4.5.3",
-    "axios": "0.20.0"
+    "axios": "^0.21.0",
+    "redux": "^4.0.5",
+    "react-redux": "^7.2.2",
+    "redux-thunk": "^2.3.0",
+    "prop-types": "^15.7.2"
   },
   "scripts": {
     "start": "react-scripts start",

img/Employees_Edit.jpg

@@ -0,0 +1,60 @@
+import axios from "axios";
+import {GET_ERRORS, GET_EMPLOYEES, DELETE_EMPLOYEE, GET_EMPLOYEE_BY_ID} from "./types";
+
+const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/employees";
+
+export const createEmployee = (employee, history) => async dispatch => {
+    try {
+        await axios.post(EMPLOYEE_API_BASE_URL, employee);
+        history.push("/");
+        dispatch({
+            type: GET_ERRORS,
+            payload: {}
+        })
+    } catch (error) {
+        dispatch({
+            type: GET_ERRORS,
+            payload: error.response.data
+        })
+    }
+};
+
+export const updateEmployee = (employeeId, employee, history) => async dispatch => {
+    try {
+        await axios.put(EMPLOYEE_API_BASE_URL + "/" + employeeId, employee);
+        history.push("/");
+        dispatch({
+            type: GET_ERRORS,
+            payload: {}
+        })
+    } catch (error) {
+        dispatch({
+            type: GET_ERRORS,
+            payload: error.response.data
+        })
+    }
+};
+
+export const getEmployees = () => async dispatch => {
+    const response = await axios.get(EMPLOYEE_API_BASE_URL);
+    dispatch({
+        type: GET_EMPLOYEES,
+        payload: response.data
+    })
+};
+
+export const deleteEmployee = (employeeId) => async dispatch => {
+    await axios.delete(EMPLOYEE_API_BASE_URL + "/" + employeeId);
+    dispatch({
+        type: DELETE_EMPLOYEE,
+        payload: employeeId
+    })
+};
+
+export const getEmployeeById = (employeeId) => async dispatch => {
+    const response = await axios.get(EMPLOYEE_API_BASE_URL + "/" + employeeId);
+    dispatch({
+        type: GET_EMPLOYEE_BY_ID,
+        payload: response.data
+    })
+};

img/Employees_List.jpg

@@ -0,0 +1,4 @@
+export const GET_ERRORS = "GET_ERRORS";
+export const GET_EMPLOYEES = "GET_EMPLOYEES";
+export const DELETE_EMPLOYEE = "DELETE_EMPLOYEE";
+export const GET_EMPLOYEE_BY_ID = "GET_EMPLOYEE_BY_ID";

react-frontend/package-lock.json

@@ -1,3 +1,12 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    margin-bottom: 50px;
+}
+
 .footer {
     position: absolute;
     bottom: 0;

react-frontend/package.json

@@ -1,31 +1,34 @@
-import React, {Component} from 'react';
-import ListEmployeesComponent from "../employees-components/list-employees-component.jsx";
-import "./app.css"
+import React from 'react';
+import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {Provider} from "react-redux";
+import store from "../../store";
+
+import EmployeesListComponent from "../employees-components/employees-list-component";
+import EmployeeAddComponent from "../employees-components/employee-add-component";
+import EmployeeUpdateComponent from "../employees-components/employee-update-component";
+import EmployeeViewComponent from "../employees-components/employee-view-component";
 import Header from "../parts/header";
 import Footer from "../parts/footer";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
-import EmployeeComponent from "../employees-components/employee-component";
-import ViewEmployeeComponent from "../employees-components/view-employee-component";
 
-class App extends Component {
-    render() {
-        return (
-            <div>
-                <Router>
-                    <Header/>
-                    <div className="container">
-                        <Switch>
-                            <Route path="/" component={ListEmployeesComponent} exact />
-                            <Route path="/employees" component={ListEmployeesComponent} exact/>
-                            <Route path="/employees/:id" component={EmployeeComponent} exact/>
-                            <Route path="/employees/view/:id" component={ViewEmployeeComponent} exact/>
-                        </Switch>
-                    </div>
-                    <Footer/>
-                </Router>
-            </div>
-        );
-    }
-}
+import "./app.css"
+
+const App = () => {
+    return (
+        <Provider store={store}>
+            <Router>
+                <Header/>
+                <div className="container">
+                    <Switch>
+                        <Route exact path="/" component={EmployeesListComponent}/>
+                        <Route exact path="/employees/add" component={EmployeeAddComponent}/>
+                        <Route exact path="/employees/:id" component={EmployeeUpdateComponent}/>
+                        <Route exact path="/employees/view/:id" component={EmployeeViewComponent}/>
+                    </Switch>
+                </div>
+                <Footer/>
+            </Router>
+        </Provider>
+    );
+};
 
 export default App;

react-frontend/src/actions/employee-actions.js

@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import PropTypes from "prop-types";
+
+import {createEmployee} from "../../actions/employee-actions";
+import InputForm from "../parts/input-form";
+
+class EmployeeAddComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            firstName: "",
+            lastName: "",
+            city: "",
+            address: "",
+            telephone: "",
+            errors: {}
+        };
+
+        this.createEmployee = this.createEmployee.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    // static getDerivedStateFromProps(nextProps)
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.errors) {
+            this.setState({errors: nextProps.errors});
+        }
+    }
+
+    handleInputChange(event) {
+        const {name, value} = event.target;
+
+        this.setState({
+            [name]: value
+        });
+    };
+
+    createEmployee(event) {
+        event.preventDefault();
+
+        const {firstName, lastName, city, address, telephone} = this.state;
+
+        const employee = {
+            firstName,
+            lastName,
+            city,
+            address,
+            telephone
+        };
+
+        this.props.createEmployee(employee, this.props.history);
+    };
+
+    render() {
+        return (
+            <div>
+                <InputForm
+                    title={"Add Employee"}
+                    employee={this.state}
+                    errors={this.state.errors}
+                    onSubmitForm={this.createEmployee}
+                    handleInputChange={this.handleInputChange}
+                />
+            </div>
+        );
+    }
+}
+
+EmployeeAddComponent.propTypes = {
+    createEmployee: PropTypes.func.isRequired,
+    errors: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+    errors: state.errors,
+});
+
+export default connect(mapStateToProps, {createEmployee})(EmployeeAddComponent);