refactoring

src/App.jsx → 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>

src/components/Header.jsx → 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 (

src/components/Input.jsx → 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

src/components/Modale.jsx → 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 (

src/components/Select.jsx → 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,

src/components/tableWithSortingAndFilters/Entries.jsx → 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 }) => {

src/components/tableWithSortingAndFilters/EntriesDisplayed.jsx → 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,

src/components/tableWithSortingAndFilters/Pagination.jsx → 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 (

src/components/tableWithSortingAndFilters/Search.jsx → 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 }) => {

src/components/tableWithSortingAndFilters/Sorts.jsx → 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()

src/components/tableWithSortingAndFilters/Table.jsx → 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'
 

src/components/tableWithSortingAndFilters/TableHeadRow.jsx → 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 }) => {

src/components/tableWithSortingAndFilters/TableWithSortingandFilters.jsx → 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';

src/pages/EmployeesList.jsx → 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 = () => {
 

src/pages/Homepage.jsx → 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('')

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

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
 }

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'

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;
+  }
+`