diff --git a/README.md b/README.md index 064a39440..184a265db 100644 --- a/README.md +++ b/README.md @@ -28,4 +28,4 @@ implement the ability to filter and sort people in the table. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_people-table-advanced/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://azesmmisha.github.io/react_people-table-advanced/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index adcb8594e..efb74eaac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,34 @@ -import { PeoplePage } from './components/PeoplePage'; -import { Navbar } from './components/Navbar'; +import { Navbar } from './components/NavBar/Navbar'; import './App.scss'; +import { Navigate, Route, Routes } from 'react-router-dom'; +import { HomePage } from './pages/HomePage/HomePage'; +import { NotFoundPage } from './pages/NotFoundPage/NotFoundPage'; +import { PeoplePage } from './pages/PeoplePage/PeoplePage'; +import { PeopleProvider } from './store/PeopleContext'; export const App = () => { return (
-
+
-

Home Page

-

Page not found

- + + } /> + } /> + + + + } + /> + } /> +
-
+
); }; diff --git a/src/components/NavBar/Navbar.tsx b/src/components/NavBar/Navbar.tsx new file mode 100644 index 000000000..f3ee5ac1d --- /dev/null +++ b/src/components/NavBar/Navbar.tsx @@ -0,0 +1,33 @@ +import { NavLink, useSearchParams } from 'react-router-dom'; + +const navClass = ({ isActive }: { isActive: boolean }) => + ['navbar-item', isActive && 'has-background-grey-lighter'] + .filter(Boolean) + .join(' '); + +export const Navbar = () => { + const [searchParams] = useSearchParams(); + + return ( + + ); +}; 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/PeopleFilter/PeopleFilters.tsx b/src/components/PeopleFilter/PeopleFilters.tsx new file mode 100644 index 000000000..3e1ce1167 --- /dev/null +++ b/src/components/PeopleFilter/PeopleFilters.tsx @@ -0,0 +1,110 @@ +import { useSearchParams } from 'react-router-dom'; +import { SearchLink } from '../SearchLink/SearchLink'; +import { getSearchWith, SearchParams } from '../../utils/searchHelper'; + +type Props = {}; + +export const PeopleFilters: React.FC = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const sex = searchParams.get('sex') || ''; + const query = searchParams.get('query') || ''; + const centuries = searchParams.getAll('centuries') || []; + + function setSearchWith(params: SearchParams) { + const search = getSearchWith(searchParams, params); + + setSearchParams(search); + } + + const handleQueryChange = (event: React.ChangeEvent) => { + setSearchWith({ query: event.target.value || null }); + }; + + const toggledCenturies = (century: number) => { + return centuries.includes(century.toString()) + ? centuries.filter(cent => cent !== century.toString()) + : [...centuries, century].map(String); + }; + + return ( +