From 9214f735db08b44d9342cfc08a2ba293fb2ad513 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9lanie=20Sarrouy?= Date: Thu, 18 Nov 2021 18:11:55 +0100 Subject: [PATCH] homePage et modale ok --- package.json | 5 ++ public/index.html | 4 +- src/App.jsx | 30 ++++--- src/Redux/actions/actionCreateEmployee.js | 10 +++ src/Redux/reducers/newEmployeeReducer.js | 17 ++++ src/Redux/store/store.js | 9 ++ src/assets/close.svg | 11 +++ src/components/Modale.jsx | 16 ++++ src/datas/department.js | 20 +++-- src/index.js | 12 +-- src/pages/Homepage.jsx | 60 +++++++++++-- src/styles/bases/colors.js | 1 + src/styles/components/header.js | 8 +- src/styles/components/modale.js | 36 ++++++++ src/styles/components/table.js | 5 +- src/styles/pages/homepage.js | 12 +-- yarn.lock | 100 +++++++++++++++++++++- 17 files changed, 307 insertions(+), 49 deletions(-) create mode 100644 src/Redux/actions/actionCreateEmployee.js create mode 100644 src/Redux/reducers/newEmployeeReducer.js create mode 100644 src/Redux/store/store.js create mode 100644 src/assets/close.svg create mode 100644 src/components/Modale.jsx create mode 100644 src/styles/components/modale.js diff --git a/package.json b/package.json index f0f25ee..2df9f45 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^1.6.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", + "redux": "^4.1.2", + "redux-thunk": "^2.4.0", "web-vitals": "^1.0.1" }, "scripts": { @@ -38,6 +42,7 @@ }, "devDependencies": { "prettier": "^2.4.1", + "redux-devtools-extension": "^2.13.9", "styled-components": "^5.3.3" } } diff --git a/public/index.html b/public/index.html index a3aa949..9b0fe24 100644 --- a/public/index.html +++ b/public/index.html @@ -20,9 +20,7 @@ - - - + diff --git a/src/App.jsx b/src/App.jsx index 8b58960..99206b5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,23 +4,27 @@ import { GlobalStyle } from './styles/bases/globalStyle' import Homepage from './pages/Homepage' import EmployeesList from './pages/EmployeesList' import { Main } from './styles/pages/homepage' +import { Provider } from 'react-redux' +import { store } from './Redux/store/store' -function App() { +export const App = () => { return ( <> - - -
-
- - } /> - } /> - {/* */} - -
- + + + +
+
+ + } /> + } /> + {/* */} + +
+ + ) } -export default App + diff --git a/src/Redux/actions/actionCreateEmployee.js b/src/Redux/actions/actionCreateEmployee.js new file mode 100644 index 0000000..9bf00b5 --- /dev/null +++ b/src/Redux/actions/actionCreateEmployee.js @@ -0,0 +1,10 @@ +import { createAction } from "@reduxjs/toolkit"; + +export const createNewEmployee = createAction( + 'create-new-employee', + (employee) => { + return { + payload: employee, + } + } +) \ No newline at end of file diff --git a/src/Redux/reducers/newEmployeeReducer.js b/src/Redux/reducers/newEmployeeReducer.js new file mode 100644 index 0000000..8708855 --- /dev/null +++ b/src/Redux/reducers/newEmployeeReducer.js @@ -0,0 +1,17 @@ +import { createReducer } from "@reduxjs/toolkit" +import { createNewEmployee } from "../actions/actionCreateEmployee" + + +const initialStateNewEmployee = { + employee: {}, + isCreated: false, +} + +export const newEmployeeReducer = createReducer(initialStateNewEmployee, (builder) => { + return builder + .addCase(createNewEmployee, (draft, action) => { + draft.employee = action.payload + draft.isCreated = true + return + }) +}) \ No newline at end of file diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js new file mode 100644 index 0000000..bbc1a23 --- /dev/null +++ b/src/Redux/store/store.js @@ -0,0 +1,9 @@ +import { configureStore } from "@reduxjs/toolkit"; +import { newEmployeeReducer } from "../reducers/newEmployeeReducer"; + + +export const store = configureStore({ + reducer: { + newEmployee: newEmployeeReducer, + } +}) \ No newline at end of file diff --git a/src/assets/close.svg b/src/assets/close.svg new file mode 100644 index 0000000..fe0ff9d --- /dev/null +++ b/src/assets/close.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/src/components/Modale.jsx b/src/components/Modale.jsx new file mode 100644 index 0000000..9cff57c --- /dev/null +++ b/src/components/Modale.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import close from '../assets/close.svg' +import { IMG, ModaleContent, ModaleDiv } from '../styles/components/modale' + +const Modale = ({hideModale}) => { + return ( + + +

Employee Created !

+ close + + + ) +} + +export default Modale diff --git a/src/datas/department.js b/src/datas/department.js index 9226f29..b699ad9 100644 --- a/src/datas/department.js +++ b/src/datas/department.js @@ -1,9 +1,19 @@ const departments = [ - 'Sales', - 'Marketing', - 'Engineering', - 'Human Resources', - 'Legal' + { + name: 'Sales', + }, + { + name: 'Marketing', + }, + { + name: 'Engineering', + }, + { + name: 'Human Resources', + }, + { + name: 'Legal', + }, ] export default departments \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6358aff..b5dca24 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.jsx'; -import reportWebVitals from './reportWebVitals'; +import React from 'react' +import ReactDOM from 'react-dom' +import { App } from './App.jsx' +import reportWebVitals from './reportWebVitals' ReactDOM.render( , document.getElementById('root') -); +) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +reportWebVitals() diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx index 4fef89a..0e5da74 100644 --- a/src/pages/Homepage.jsx +++ b/src/pages/Homepage.jsx @@ -1,7 +1,10 @@ import React, { useState } from 'react' +import { useDispatch, useSelector } from 'react-redux' import Input from '../components/Input' +import Modale from '../components/Modale' import departments from '../datas/department' import states from '../datas/states' +import { createNewEmployee } from '../Redux/actions/actionCreateEmployee' import { InputLabel, InputWrapper } from '../styles/components/input' import { Form, @@ -22,14 +25,44 @@ const Homepage = () => { const [startDate, setStartDate] = useState('') const [street, setStreet] = useState('') const [city, setCity] = useState('') + const [state, setState] = useState('') const [zipCode, setZipCode] = useState('') + const [department, setDepartment] = useState('') + const departmentSorted = departments.sort() const USAStates = states + const [modaleIsOpen, setModaleIsOpen] = useState(false) + const closeModale = () => { + setModaleIsOpen(false) + } + + const dispatch = useDispatch() + + const employee = useSelector((state) => state.newEmployee.employee) + console.log(employee) + const newEmployee = { + firstName: firstName, + lastName: lastName, + dateOfBirth: dateOfBirth, + startDate: startDate, + street: street, + city: city, + state: state, + zipCode: zipCode, + department: department, + } + + const handleSubmit = (e) => { + e.preventDefault() + dispatch(createNewEmployee(newEmployee)) + setModaleIsOpen(true) + } + return ( <>

Create employee

-
+ { State - + { + setState(e.target.value) + }} + > {USAStates.map((state, index) => { return (