homePage et modale ok

MelanieSarrouy · Nov 18, 2021 · 9214f73 · 9214f73
1 parent 5e7f8e2
commit 9214f73
Show file tree

Hide file tree

Showing 17 changed files with 307 additions and 49 deletions.
diff --git 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
@@ -20,9 +20,7 @@
     <!-- Feuiles de styles -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Roboto:ital,wght@0,100;0,500;0,700;1,100;1,400&display=swap" rel="stylesheet"> 
-
-  </head>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,500;0,700;1,100;1,300;1,400&display=swap" rel="stylesheet">   </head>
 
   <body>
 

diff --git 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 (
     <>
-      <BrowserRouter>
-        <GlobalStyle />
-        <Header />
-        <Main>
-        <Routes>
-          <Route path="/" element={<Homepage />} />
-          <Route path="/employees-list" element={<EmployeesList />} />
-          {/* <Route component={NotFound} /> */}
-        </Routes>
-        </Main>
-      </BrowserRouter>
+      <Provider store={store}>
+        <BrowserRouter>
+          <GlobalStyle />
+          <Header />
+          <Main>
+            <Routes>
+              <Route path="/" element={<Homepage />} />
+              <Route path="/employees-list" element={<EmployeesList />} />
+              {/* <Route component={NotFound} /> */}
+            </Routes>
+          </Main>
+        </BrowserRouter>
+      </Provider>
     </>
   )
 }
 
-export default App
+
diff --git a/src/Redux/actions/actionCreateEmployee.js 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,
+    }
+  }
+)
diff --git a/src/Redux/reducers/newEmployeeReducer.js 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
+    })
+})
diff --git a/src/Redux/store/store.js 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,
+  }
+})
diff --git a/src/assets/close.svg b/src/assets/close.svg
diff --git a/src/components/Modale.jsx 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 (
+    <ModaleDiv>
+      <ModaleContent>
+        <p>Employee Created !</p>
+        <IMG src={close} alt="close" onClick={hideModale} />
+      </ModaleContent>
+    </ModaleDiv>
+  )
+}
+
+export default Modale
diff --git 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
diff --git 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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   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
@@ -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 (
     <>
       <h2 className="sr-only">Create employee</h2>
-      <Form>
+      <Form onSubmit={handleSubmit}>
         <DivInputWrapper>
           <Input // First Name
             direction={'column'}
@@ -103,7 +136,13 @@ const Homepage = () => {
 
           <InputWrapper direction={'column'}>
             <InputLabel htmlFor="state">State</InputLabel>
-            <SelectStyle name="state" id="state">
+            <SelectStyle
+              name="state"
+              id="state"
+              onChange={(e) => {
+                setState(e.target.value)
+              }}
+            >
               {USAStates.map((state, index) => {
                 return (
                   <option key={index} value={state.abbreviation}>
@@ -130,11 +169,17 @@ const Homepage = () => {
 
         <InputWrapper direction={'column'}>
           <InputLabel htmlFor="department">Department</InputLabel>
-          <SelectStyle name="department" id="department">
+          <SelectStyle
+            name="department"
+            id="department"
+            onChange={(e) => {
+              setDepartment(e.target.value)
+            }}
+          >
             {departmentSorted.map((department, index) => {
               return (
-                <option key={index} value={department}>
-                  {department}
+                <option key={index} value={department.name}>
+                  {department.name}
                 </option>
               )
             })}
@@ -145,8 +190,9 @@ const Homepage = () => {
         </DivButton>
       </Form>
 
-      <div id="confirmation-modale"></div>
-      </>
+      {modaleIsOpen && <Modale hideModale={closeModale}/>}
+
+    </>
   )
 }
 

diff --git a/src/styles/bases/colors.js b/src/styles/bases/colors.js
@@ -2,6 +2,7 @@ const colors = {
   primary: '#aa14f0', //vert
   secondary: '#bc8cf2', //bleu
   text: '#000000', //typo
+  textLight: '#bfc8d3',
   background: '#eeeeee', //gris clair
 }
 

diff --git a/src/styles/components/header.js b/src/styles/components/header.js
@@ -18,14 +18,14 @@ export const StyledLink = styled(NavLink)`
     background-color: ${colors.secondary};
     border-radius: 0.25rem 0.25rem 0px 0px;
     color: white;
-    border-bottom: 2px inset #bfc8d3;
+    border-bottom: 1px inset ${colors.textLight};
 
     &.active, &.active:hover {
       background-color: ${colors.background};
       color: ${colors.text};
-      border-top: 2px inset #bfc8d3;
-      border-left: 2px inset #bfc8d3;
-      border-right: 2px inset #bfc8d3;
+      border-top: 1px inset ${colors.textLight};
+      border-left: 1px inset ${colors.textLight};
+      border-right: 1px inset ${colors.textLight};
       border-bottom: none;
     }
     &:hover {

diff --git a/src/styles/components/modale.js b/src/styles/components/modale.js
@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const ModaleDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.8);
+  overflow: auto;
+`
+export const ModaleContent = styled.div`
+  width: 10rem;
+  height: auto;
+  background-color: white;
+  position: absolute;
+  top: 40vh;
+  padding: 1rem;
+  border-radius: 0.8rem;
+  text-align: center;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+`
+export const IMG = styled.img`
+  position: absolute;
+  top: -0.8rem;
+  right: -0.8rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  cursor: pointer;
+`
diff --git a/src/styles/components/table.js b/src/styles/components/table.js
@@ -25,7 +25,7 @@ export const TBody = styled.tr`
   }
   & > td {
     vertical-align: middle;
-    font-weight: 100;
+    font-weight: 300;
     padding: .2rem .4rem;
     font-size: 0.9rem;
   }
@@ -35,7 +35,4 @@ export const ThDiv = styled.div`
   justify-content: space-between;
   align-items: center;
   font-size: 0.9rem;
-  ${'' /* & > p {
-    white-space: nowrap;
-  } */}
 `