diff --git a/README.md b/README.md index 24519caab..e342f8499 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://mifyy.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..ae390851f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,43 @@ -import { PeoplePage } from './components/PeoplePage'; -import { Navbar } from './components/Navbar'; +import { NavLink, Outlet } from 'react-router-dom'; +import cn from 'classnames'; import './App.scss'; -export const App = () => { - return ( -
- +const getLinkClass = ({ isActive }: { isActive: boolean }) => { + return cn('navbar-item', { 'has-background-grey-lighter': isActive }); +}; + +export const App = () => ( +
+ + +
+
+ +
+
+
+); diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx new file mode 100644 index 000000000..0b41a51df --- /dev/null +++ b/src/components/HomePage.tsx @@ -0,0 +1,5 @@ +export const HomePage = () => { + return ( +

Home Page

+ ); +}; diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx index 2f1608bef..6ffccf6fd 100644 --- a/src/components/PeopleFilters.tsx +++ b/src/components/PeopleFilters.tsx @@ -1,21 +1,86 @@ -export const PeopleFilters = () => { +import { useEffect, useMemo } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { SearchLink } from './SearchLink'; +import { Filters } from '../types/Filters'; +import { Sex } from '../utils/FilterPeople'; + +interface Props { + handleFilterChange: (newFilters: Filters) => void; +} + +export const PeopleFilters: React.FC = ({ handleFilterChange }) => { + const [searchParams, setSearchParams] = useSearchParams(); + const query = useMemo(() => searchParams.get('query') || '', [searchParams]); + + const centuries = useMemo( + () => searchParams.getAll('centuries') || [], [searchParams], + ); + + const sex = useMemo( + () => (searchParams.get('sex') as Sex) || Sex.All, [searchParams], + ); + + function handleQueryChange(event: React.ChangeEvent) { + const newQuery = event.target.value; + const params = new URLSearchParams(searchParams); + + if (newQuery.trim() !== '') { + params.set('query', newQuery); + } else { + params.delete('query'); + } + + setSearchParams(params); + } + + useEffect(() => { + const applyFilters = () => { + const currentFilters = { + sex, + centuries, + query, + }; + + handleFilterChange(currentFilters); + }; + + applyFilters(); + }, [searchParams, sex, centuries, query, handleFilterChange]); + return (