From fb632c011ce134068bb147de09443d15de389822 Mon Sep 17 00:00:00 2001 From: ab3MN Date: Mon, 18 Nov 2024 20:57:36 +0200 Subject: [PATCH 01/13] feat:implemented filters --- src/App.tsx | 11 +- src/Roots.tsx | 27 + src/Routing/Routing.tsx | 18 + src/components/Nav/Nav.tsx | 29 + src/components/Navbar.tsx | 26 - src/components/People/People.tsx | 43 ++ src/components/PeopleFilter/PeopleFilters.tsx | 96 +++ src/components/PeopleFilters.tsx | 96 --- src/components/PeoplePage.tsx | 33 - src/components/PeopleTable.tsx | 645 ------------------ src/components/PeopleTable/PeopleTable.tsx | 31 + src/components/PersonItem/PersonItem.tsx | 38 ++ src/components/PersonLink/PersonLink.tsx | 20 + src/components/PersonParent/PersonParent.tsx | 15 + src/constants/navLinks.ts | 12 + src/constants/personFilterLinks.ts | 13 + src/context/PeopleContext.tsx | 50 ++ src/hooks/usePeople.ts | 30 + src/hooks/usePeopleRouting.ts | 35 + src/index.tsx | 9 +- src/pages/HomePage/HomePage.tsx | 5 + src/pages/NotFoundPage/NotFoundPage.tsx | 5 + src/pages/PeoplePage/PeoplePage.tsx | 18 + src/shared/ErrorNotification.tsx | 12 + src/{components => shared}/SearchLink.tsx | 0 src/shared/Title.tsx | 7 + src/utils/getFilteredPeople.ts | 30 + src/utils/getPeopleWithParents.ts | 20 + src/utils/searchHelper.ts | 2 + 29 files changed, 562 insertions(+), 814 deletions(-) create mode 100644 src/Roots.tsx create mode 100644 src/Routing/Routing.tsx create mode 100644 src/components/Nav/Nav.tsx delete mode 100644 src/components/Navbar.tsx create mode 100644 src/components/People/People.tsx create mode 100644 src/components/PeopleFilter/PeopleFilters.tsx delete mode 100644 src/components/PeopleFilters.tsx delete mode 100644 src/components/PeoplePage.tsx delete mode 100644 src/components/PeopleTable.tsx create mode 100644 src/components/PeopleTable/PeopleTable.tsx create mode 100644 src/components/PersonItem/PersonItem.tsx create mode 100644 src/components/PersonLink/PersonLink.tsx create mode 100644 src/components/PersonParent/PersonParent.tsx create mode 100644 src/constants/navLinks.ts create mode 100644 src/constants/personFilterLinks.ts create mode 100644 src/context/PeopleContext.tsx create mode 100644 src/hooks/usePeople.ts create mode 100644 src/hooks/usePeopleRouting.ts create mode 100644 src/pages/HomePage/HomePage.tsx create mode 100644 src/pages/NotFoundPage/NotFoundPage.tsx create mode 100644 src/pages/PeoplePage/PeoplePage.tsx create mode 100644 src/shared/ErrorNotification.tsx rename src/{components => shared}/SearchLink.tsx (100%) create mode 100644 src/shared/Title.tsx create mode 100644 src/utils/getFilteredPeople.ts create mode 100644 src/utils/getPeopleWithParents.ts diff --git a/src/App.tsx b/src/App.tsx index adcb8594e..dfaf7d915 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,15 @@ -import { PeoplePage } from './components/PeoplePage'; -import { Navbar } from './components/Navbar'; - import './App.scss'; +import { Outlet } from 'react-router-dom'; +import { Nav } from './components/Nav/Nav'; export const App = () => { return (
- +
diff --git a/src/Roots.tsx b/src/Roots.tsx new file mode 100644 index 000000000..5334b5a33 --- /dev/null +++ b/src/Roots.tsx @@ -0,0 +1,27 @@ +import { HashRouter, Navigate } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; +import { Suspense } from 'react'; +import { App } from './App'; +import { Routing } from './Routing/Routing'; +import { Loader } from './components/Loader'; + +const { HomePage, PeoplePage, NotFoundPage } = Routing; + +export const Root = () => ( + + }> + + }> + } /> + } /> + + + } /> + + + } /> + + + + +); diff --git a/src/Routing/Routing.tsx b/src/Routing/Routing.tsx new file mode 100644 index 000000000..a7ba75e93 --- /dev/null +++ b/src/Routing/Routing.tsx @@ -0,0 +1,18 @@ +import { lazy } from 'react'; +import { PeopleProvider } from '../context/PeopleContext'; + +const LazyPeoplePage = lazy(() => import('../pages/PeoplePage/PeoplePage')); +const HomePage = lazy(() => import('../pages/HomePage/HomePage')); +const NotFoundPage = lazy(() => import('../pages/NotFoundPage/NotFoundPage')); + +const PeoplePage = () => ( + + + +); + +export const Routing = { + PeoplePage, + HomePage, + NotFoundPage, +}; diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx new file mode 100644 index 000000000..20747b308 --- /dev/null +++ b/src/components/Nav/Nav.tsx @@ -0,0 +1,29 @@ +import { NavLink } from 'react-router-dom'; +import cn from 'classnames'; +import { navLinks } from '../../constants/navLinks'; + +export const Nav = () => ( + +); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx deleted file mode 100644 index 3f63898b2..000000000 --- a/src/components/Navbar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export const Navbar = () => { - return ( - - ); -}; diff --git a/src/components/People/People.tsx b/src/components/People/People.tsx new file mode 100644 index 000000000..c3d95a1d2 --- /dev/null +++ b/src/components/People/People.tsx @@ -0,0 +1,43 @@ +import { Loader } from '../Loader'; +import { ErrorNotification } from '../../shared/ErrorNotification'; +import { PeopleTable } from '../PeopleTable/PeopleTable'; +import { useContext } from 'react'; +import { PeopleContext } from '../../context/PeopleContext'; + +export const People = () => { + const { filtredPeople, isLoading, error } = useContext(PeopleContext); + + const isPeopleEmpthy = !filtredPeople.length && !isLoading; + + const getPeopleView = () => { + if (error) { + return ( + + ); + } + + if (isPeopleEmpthy) { + return

There are no people on the server

; + } + + if (!!filtredPeople.length) { + return ; + } + + return null; + }; + + return ( +
+
+ {isLoading && } + + {getPeopleView()} +
+
+ ); +}; + +{ + /*

There are no people matching the current search criteria

*/ +} diff --git a/src/components/PeopleFilter/PeopleFilters.tsx b/src/components/PeopleFilter/PeopleFilters.tsx new file mode 100644 index 000000000..dd3cfee7f --- /dev/null +++ b/src/components/PeopleFilter/PeopleFilters.tsx @@ -0,0 +1,96 @@ +import cn from 'classnames'; + +import { + centuryLinksParams, + sexLinksParams, +} from '../../constants/personFilterLinks'; +import { SearchLink } from '../../shared/SearchLink'; +import { usePeopleRouting } from '../../hooks/usePeopleRouting'; + +export const PeopleFilters = () => { + const { name, centuries, sex, handleChangeName, toogleCenturies } = + usePeopleRouting(); + + return ( +
+