From f41a14af76d9d899807d0a33be7cca2bae7cfeae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9lanie=20Sarrouy?= <sarsarmel@gmail.com>
Date: Tue, 30 Nov 2021 15:45:19 +0100
Subject: [PATCH] refactoring

---
 src/{ => React}/App.jsx                       | 10 ++++----
 src/{ => React}/components/Header.jsx         |  2 +-
 src/{ => React}/components/Input.jsx          |  4 ++--
 src/{ => React}/components/Modale.jsx         |  4 ++--
 src/{ => React}/components/Select.jsx         |  6 ++---
 .../tableWithSortingAndFilters/Entries.jsx    |  2 +-
 .../EntriesDisplayed.jsx                      |  2 +-
 .../tableWithSortingAndFilters/Pagination.jsx |  4 ++--
 .../tableWithSortingAndFilters/Search.jsx     |  2 +-
 .../tableWithSortingAndFilters/Sorts.jsx      |  8 +++----
 .../tableWithSortingAndFilters/Table.jsx      |  2 +-
 .../TableBodyRow.jsx                          |  0
 .../TableHeadRow.jsx                          |  2 +-
 .../TableWithSortingandFilters.jsx            |  4 ++--
 src/{ => React}/pages/EmployeesList.jsx       |  4 ++--
 src/{ => React}/pages/Homepage.jsx            | 10 ++++----
 src/React/pages/NotFoundPage.jsx              | 13 ++++++++++
 src/helpers/form/sortDepartments.js           | 10 +++-----
 src/index.js                                  |  2 +-
 src/pages/NotFound.jsx                        | 12 ----------
 src/styles/pages/notFoundPage.js              | 24 +++++++++++++++++++
 21 files changed, 74 insertions(+), 53 deletions(-)
 rename src/{ => React}/App.jsx (72%)
 rename src/{ => React}/components/Header.jsx (83%)
 rename src/{ => React}/components/Input.jsx (86%)
 rename src/{ => React}/components/Modale.jsx (69%)
 rename src/{ => React}/components/Select.jsx (76%)
 rename src/{ => React}/components/tableWithSortingAndFilters/Entries.jsx (86%)
 rename src/{ => React}/components/tableWithSortingAndFilters/EntriesDisplayed.jsx (85%)
 rename src/{ => React}/components/tableWithSortingAndFilters/Pagination.jsx (92%)
 rename src/{ => React}/components/tableWithSortingAndFilters/Search.jsx (80%)
 rename src/{ => React}/components/tableWithSortingAndFilters/Sorts.jsx (78%)
 rename src/{ => React}/components/tableWithSortingAndFilters/Table.jsx (94%)
 rename src/{ => React}/components/tableWithSortingAndFilters/TableBodyRow.jsx (100%)
 rename src/{ => React}/components/tableWithSortingAndFilters/TableHeadRow.jsx (78%)
 rename src/{ => React}/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx (91%)
 rename src/{ => React}/pages/EmployeesList.jsx (86%)
 rename src/{ => React}/pages/Homepage.jsx (94%)
 create mode 100644 src/React/pages/NotFoundPage.jsx
 delete mode 100644 src/pages/NotFound.jsx
 create mode 100644 src/styles/pages/notFoundPage.js

diff --git a/src/App.jsx b/src/React/App.jsx
similarity index 72%
rename from src/App.jsx
rename to src/React/App.jsx
index b4e692b..8d40d8f 100644
--- a/src/App.jsx
+++ b/src/React/App.jsx
@@ -1,13 +1,13 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Header from './components/Header'
-import { GlobalStyle } from './styles/bases/globalStyle'
+import { GlobalStyle } from '../styles/bases/globalStyle'
 import Homepage from './pages/Homepage'
 import EmployeesList from './pages/EmployeesList'
-import { Main } from './styles/pages/homepage'
+import { Main } from '../styles/pages/homepage'
 import { useStore } from 'react-redux'
 import { useEffect } from 'react'
-import { getEmployees } from './firebase/firebaseServices'
-import { NotFound } from 'http-errors'
+import { getEmployees } from '../firebase/firebaseServices'
+import NotFoundPage from './pages/NotFoundPage'
 
 export const App = () => {
   const store = useStore()
@@ -26,7 +26,7 @@ export const App = () => {
           <Routes>
             <Route path="/" element={<Homepage />} />
             <Route path="/employees-list" element={<EmployeesList />} />
-            <Route element={<NotFound />} />
+            <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </Main>
       </BrowserRouter>
diff --git a/src/components/Header.jsx b/src/React/components/Header.jsx
similarity index 83%
rename from src/components/Header.jsx
rename to src/React/components/Header.jsx
index a376804..fc3d775 100644
--- a/src/components/Header.jsx
+++ b/src/React/components/Header.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { NavStyled, StyledLink, Title1 } from '../styles/components/header'
+import { NavStyled, StyledLink, Title1 } from '../../styles/components/header'
 
 const Header = () => {
   return (
diff --git a/src/components/Input.jsx b/src/React/components/Input.jsx
similarity index 86%
rename from src/components/Input.jsx
rename to src/React/components/Input.jsx
index 325f6ad..7acf2e2 100644
--- a/src/components/Input.jsx
+++ b/src/React/components/Input.jsx
@@ -1,9 +1,9 @@
-import { capitalizeFirstLetter } from '../helpers/capitalizeFirstLetter'
+import { capitalizeFirstLetter } from '../../helpers/capitalizeFirstLetter'
 import {
   InputLabel,
   InputStyle,
   InputWrapper,
-} from '../styles/components/input'
+} from '../../styles/components/input'
 
 /**
  * Input component to display input buttons
diff --git a/src/components/Modale.jsx b/src/React/components/Modale.jsx
similarity index 69%
rename from src/components/Modale.jsx
rename to src/React/components/Modale.jsx
index 93f9ead..68ad3d6 100644
--- a/src/components/Modale.jsx
+++ b/src/React/components/Modale.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import close from '../assets/close.svg'
-import { IMG, ModaleContent, ModaleDiv } from '../styles/components/modale'
+import close from '../../assets/close.svg'
+import { IMG, ModaleContent, ModaleDiv } from '../../styles/components/modale'
 
 const Modale = ({ hideModale }) => {
   return (
diff --git a/src/components/Select.jsx b/src/React/components/Select.jsx
similarity index 76%
rename from src/components/Select.jsx
rename to src/React/components/Select.jsx
index e4b1980..42f9010 100644
--- a/src/components/Select.jsx
+++ b/src/React/components/Select.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { capitalizeFirstLetter } from '../helpers/capitalizeFirstLetter'
-import { InputLabel, InputWrapper } from '../styles/components/input'
-import { SelectStyle } from '../styles/components/select'
+import { capitalizeFirstLetter } from '../../helpers/capitalizeFirstLetter'
+import { InputLabel, InputWrapper } from '../../styles/components/input'
+import { SelectStyle } from '../../styles/components/select'
 
 const Select = ({
   direction,
diff --git a/src/components/tableWithSortingAndFilters/Entries.jsx b/src/React/components/tableWithSortingAndFilters/Entries.jsx
similarity index 86%
rename from src/components/tableWithSortingAndFilters/Entries.jsx
rename to src/React/components/tableWithSortingAndFilters/Entries.jsx
index b6f48f6..fbab09f 100644
--- a/src/components/tableWithSortingAndFilters/Entries.jsx
+++ b/src/React/components/tableWithSortingAndFilters/Entries.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {
   EntriesText,
   EntriesStyle,
-} from '../../styles/components/tableWithSortingAndFilters/entries'
+} from '../../../styles/components/tableWithSortingAndFilters/entries'
 import Select from '../Select'
 
 const Entries = ({ value, onChange, entriesNumber }) => {
diff --git a/src/components/tableWithSortingAndFilters/EntriesDisplayed.jsx b/src/React/components/tableWithSortingAndFilters/EntriesDisplayed.jsx
similarity index 85%
rename from src/components/tableWithSortingAndFilters/EntriesDisplayed.jsx
rename to src/React/components/tableWithSortingAndFilters/EntriesDisplayed.jsx
index 4086370..bc32bf2 100644
--- a/src/components/tableWithSortingAndFilters/EntriesDisplayed.jsx
+++ b/src/React/components/tableWithSortingAndFilters/EntriesDisplayed.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Span } from '../../styles/components/tableWithSortingAndFilters/entriesDisplayed'
+import { Span } from '../../../styles/components/tableWithSortingAndFilters/entriesDisplayed'
 
 const EntriesDisplayed = ({
   page,
diff --git a/src/components/tableWithSortingAndFilters/Pagination.jsx b/src/React/components/tableWithSortingAndFilters/Pagination.jsx
similarity index 92%
rename from src/components/tableWithSortingAndFilters/Pagination.jsx
rename to src/React/components/tableWithSortingAndFilters/Pagination.jsx
index 660cdf7..9da4617 100644
--- a/src/components/tableWithSortingAndFilters/Pagination.jsx
+++ b/src/React/components/tableWithSortingAndFilters/Pagination.jsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import colors from '../../styles/bases/colors'
+import colors from '../../../styles/bases/colors'
 import {
   DivPagination,
   ButtonNumber,
   ButtonText,
   TextNoButton,
-} from '../../styles/components/tableWithSortingAndFilters/pagination'
+} from '../../../styles/components/tableWithSortingAndFilters/pagination'
 
 const Pagination = ({ setPage, page, pageCount, pageCountRange }) => {
   return (
diff --git a/src/components/tableWithSortingAndFilters/Search.jsx b/src/React/components/tableWithSortingAndFilters/Search.jsx
similarity index 80%
rename from src/components/tableWithSortingAndFilters/Search.jsx
rename to src/React/components/tableWithSortingAndFilters/Search.jsx
index e99c131..aa33101 100644
--- a/src/components/tableWithSortingAndFilters/Search.jsx
+++ b/src/React/components/tableWithSortingAndFilters/Search.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { SearchDiv } from '../../styles/components/tableWithSortingAndFilters/search'
+import { SearchDiv } from '../../../styles/components/tableWithSortingAndFilters/search'
 import Input from '../Input'
 
 const Search = ({ value, onChange }) => {
diff --git a/src/components/tableWithSortingAndFilters/Sorts.jsx b/src/React/components/tableWithSortingAndFilters/Sorts.jsx
similarity index 78%
rename from src/components/tableWithSortingAndFilters/Sorts.jsx
rename to src/React/components/tableWithSortingAndFilters/Sorts.jsx
index 045b854..1b1bf7a 100644
--- a/src/components/tableWithSortingAndFilters/Sorts.jsx
+++ b/src/React/components/tableWithSortingAndFilters/Sorts.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { dynamicSortDown } from '../../helpers/dynamicSortDown'
-import { dynamicSortUp } from '../../helpers/dynamicSortUp'
-import { employeesListSuccess } from '../../Redux/actions/actionGetEmployees'
+import { dynamicSortDown } from '../../../helpers/dynamicSortDown'
+import { dynamicSortUp } from '../../../helpers/dynamicSortUp'
+import { employeesListSuccess } from '../../../Redux/actions/actionGetEmployees'
 import {
   IconButton,
   IconsDiv,
-} from '../../styles/components/tableWithSortingAndFilters/sorts'
+} from '../../../styles/components/tableWithSortingAndFilters/sorts'
 
 const Sorts = ({ id, list }) => {
   const dispatch = useDispatch()
diff --git a/src/components/tableWithSortingAndFilters/Table.jsx b/src/React/components/tableWithSortingAndFilters/Table.jsx
similarity index 94%
rename from src/components/tableWithSortingAndFilters/Table.jsx
rename to src/React/components/tableWithSortingAndFilters/Table.jsx
index df6fada..3298bcd 100644
--- a/src/components/tableWithSortingAndFilters/Table.jsx
+++ b/src/React/components/tableWithSortingAndFilters/Table.jsx
@@ -5,7 +5,7 @@ import {
   TBody,
   TrBody,
   TrHead,
-} from '../../styles/components/tableWithSortingAndFilters/table'
+} from '../../../styles/components/tableWithSortingAndFilters/table'
 import TableBodyRow from './TableBodyRow'
 import TableHeadRow from './TableHeadRow'
 
diff --git a/src/components/tableWithSortingAndFilters/TableBodyRow.jsx b/src/React/components/tableWithSortingAndFilters/TableBodyRow.jsx
similarity index 100%
rename from src/components/tableWithSortingAndFilters/TableBodyRow.jsx
rename to src/React/components/tableWithSortingAndFilters/TableBodyRow.jsx
diff --git a/src/components/tableWithSortingAndFilters/TableHeadRow.jsx b/src/React/components/tableWithSortingAndFilters/TableHeadRow.jsx
similarity index 78%
rename from src/components/tableWithSortingAndFilters/TableHeadRow.jsx
rename to src/React/components/tableWithSortingAndFilters/TableHeadRow.jsx
index 6697e4f..87630ed 100644
--- a/src/components/tableWithSortingAndFilters/TableHeadRow.jsx
+++ b/src/React/components/tableWithSortingAndFilters/TableHeadRow.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThDiv } from '../../styles/components/tableWithSortingAndFilters/tableHeadRow'
+import { ThDiv } from '../../../styles/components/tableWithSortingAndFilters/tableHeadRow'
 import Sorts from './Sorts'
 
 const TableHeadRow = ({ element, list, employeesToDisplay }) => {
diff --git a/src/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx b/src/React/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx
similarity index 91%
rename from src/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx
rename to src/React/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx
index e5f0fa0..99bfd47 100644
--- a/src/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx
+++ b/src/React/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { standardizeAndLowerCase } from '../../helpers/standardizeAndLowerCase';
-import { FiltersWrapper, NoData } from '../../styles/components/tableWithSortingAndFilters/tableWithSortingAndFilters';
+import { standardizeAndLowerCase } from '../../../helpers/standardizeAndLowerCase';
+import { FiltersWrapper, NoData } from '../../../styles/components/tableWithSortingAndFilters/tableWithSortingAndFilters';
 import Entries from './Entries';
 import EntriesDisplayed from './EntriesDisplayed';
 import Pagination from './Pagination';
diff --git a/src/pages/EmployeesList.jsx b/src/React/pages/EmployeesList.jsx
similarity index 86%
rename from src/pages/EmployeesList.jsx
rename to src/React/pages/EmployeesList.jsx
index 9fc20f7..f768191 100644
--- a/src/pages/EmployeesList.jsx
+++ b/src/React/pages/EmployeesList.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import TableWithSortingandFilters from '../components/tableWithSortingAndFilters/TableWithSortingandFilters'
-import entriesQuantity from '../datas/entriesQuantity'
-import keys from '../datas/keys'
+import entriesQuantity from '../../datas/entriesQuantity'
+import keys from '../../datas/keys'
 
 const EmployeesList = () => {
 
diff --git a/src/pages/Homepage.jsx b/src/React/pages/Homepage.jsx
similarity index 94%
rename from src/pages/Homepage.jsx
rename to src/React/pages/Homepage.jsx
index 9567cb6..50244ab 100644
--- a/src/pages/Homepage.jsx
+++ b/src/React/pages/Homepage.jsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import Input from '../components/Input'
 import Modale from '../components/Modale'
-import departments from '../datas/departments'
-import states from '../datas/states'
+import departments from '../../datas/departments'
+import states from '../../datas/states'
 import {
   Form,
   DivButton,
@@ -12,11 +12,11 @@ import {
   FieldsetStyle,
   InputButton,
   Legend,
-} from '../styles/pages/homepage'
-import { addAndGetEmployees } from '../firebase/firebaseServices'
+} from '../../styles/pages/homepage'
+import { addAndGetEmployees } from '../../firebase/firebaseServices'
 import { useStore } from 'react-redux'
 import Select from '../components/Select'
-import { sortDepartments } from '../helpers/form/sortDepartments'
+import { sortDepartments } from '../../helpers/form/sortDepartments'
 
 const Homepage = () => {
   const [firstName, setFirstName] = useState('')
diff --git a/src/React/pages/NotFoundPage.jsx b/src/React/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..7d5ed06
--- /dev/null
+++ b/src/React/pages/NotFoundPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { H3Page404, NotFoundPageSection, Sentence } from '../../styles/pages/notFoundPage'
+
+const NotFoundPage = () => {
+  return (
+    <NotFoundPageSection>
+      <H3Page404>404</H3Page404>
+      <Sentence>Sorry, page not found</Sentence>
+    </NotFoundPageSection>
+  )
+}
+
+export default NotFoundPage
diff --git a/src/helpers/form/sortDepartments.js b/src/helpers/form/sortDepartments.js
index dd13e77..2aef64f 100644
--- a/src/helpers/form/sortDepartments.js
+++ b/src/helpers/form/sortDepartments.js
@@ -1,9 +1,5 @@
 export const sortDepartments = (x, y) => {
-  if (x.label < y.label) {
-    return -1
-  }
-  if (x.label > y.label) {
-    return 1
-  }
-  return 0
+  let a = x.label
+  let b = y.label
+  return a < b ? -1 : a === b ? 0 : 1
 }
diff --git a/src/index.js b/src/index.js
index fc2cc83..0efeadb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { App } from './App.jsx'
+import { App } from './React/App.jsx'
 import reportWebVitals from './reportWebVitals'
 import { Provider } from 'react-redux'
 import { store } from './Redux/store/store'
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
deleted file mode 100644
index f36d9d0..0000000
--- a/src/pages/NotFound.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-const NotFound = () => {
-  return (
-    <div>
-      <h2>404</h2>
-      <p>Sorry, page not found</p>
-    </div>
-  )
-}
-
-export default NotFound
diff --git a/src/styles/pages/notFoundPage.js b/src/styles/pages/notFoundPage.js
new file mode 100644
index 0000000..b73df1c
--- /dev/null
+++ b/src/styles/pages/notFoundPage.js
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const NotFoundPageSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center:
+`
+export const H3Page404 = styled.h3`
+  font-size: 18rem;
+  font-weight: bold;
+  padding: 2rem;
+  @media (max-width: 720px) {
+    font-size: 8rem;
+  }
+`
+export const Sentence = styled.p`
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 2rem;
+  @media (max-width: 720px) {
+    font-size: 1rem;
+  }
+`
\ No newline at end of file