From 80f8fe55a354876b36005bdb429023f32d0cb84e Mon Sep 17 00:00:00 2001 From: Roman Lysunets Date: Tue, 2 Jun 2026 15:53:33 +0300 Subject: [PATCH 1/5] add task solution --- src/App.tsx | 21 +- src/components/Navbar.tsx | 26 +- src/components/PeopleFilters.tsx | 109 ++++- src/components/PeoplePage.tsx | 33 -- src/components/PeopleTable.tsx | 681 +++---------------------------- src/components/PersonLink.tsx | 22 + src/pages/HomePage.tsx | 5 + src/pages/NotFoundPage.tsx | 5 + src/pages/PeoplePage.tsx | 106 +++++ 9 files changed, 318 insertions(+), 690 deletions(-) delete mode 100644 src/components/PeoplePage.tsx create mode 100644 src/components/PersonLink.tsx create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/NotFoundPage.tsx create mode 100644 src/pages/PeoplePage.tsx diff --git a/src/App.tsx b/src/App.tsx index adcb8594e..6e9e95693 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,11 @@ -import { PeoplePage } from './components/PeoplePage'; -import { Navbar } from './components/Navbar'; - import './App.scss'; +import { PeoplePage } from './pages/PeoplePage'; +import { Navbar } from './components/Navbar'; +import { HomePage } from './pages/HomePage'; +import { Navigate, Route, Routes } from 'react-router-dom'; +import { NotFoundPage } from './pages/NotFoundPage'; + export const App = () => { return (
@@ -10,9 +13,15 @@ export const App = () => {
-

Home Page

-

Page not found

- + + } /> + } /> + + } /> + } /> + + } /> +
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 3f63898b2..b64227fe3 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,3 +1,6 @@ +import { NavLink } from "react-router-dom"; +import classNames from 'classnames'; + export const Navbar = () => { return ( diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx index c9c819cd3..8fb437b9c 100644 --- a/src/components/PeopleFilters.tsx +++ b/src/components/PeopleFilters.tsx @@ -1,16 +1,88 @@ +import { useSearchParams } from 'react-router-dom'; + export const PeopleFilters = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const selectedCenturies = searchParams.getAll('centuries'); + + const sex = searchParams.get('sex') || 'all'; + + const setSex = (value: string) => { + const params = new URLSearchParams(searchParams); + + if (value === 'all') { + params.delete('sex'); + } else { + params.set('sex', value); + } + + setSearchParams(params); + }; + + const handleQueryChange = (e: React.ChangeEvent) => { + const params = new URLSearchParams(searchParams); + + const value = e.target.value; + + if (value) { + params.set('query', value); + } else { + params.delete('query'); + } + + setSearchParams(params); + }; + + const toggleCentury = (value: number) => { + const params = new URLSearchParams(searchParams); + const current = params.getAll('centuries'); + const strValue = String(value); + + if (current.includes(strValue)) { + const updated = current.filter(c => c !== strValue); + + params.delete('centuries'); + updated.forEach(c => params.append('centuries', c)); + } else { + params.append('centuries', strValue); + } + + setSearchParams(params); + }; + + const isSelected = (value: number) => + selectedCenturies.includes(String(value)); + + const resetCenturies = () => { + const params = new URLSearchParams(searchParams); + params.delete('centuries'); + setSearchParams(params); + }; + + const resetAllFilters = () => { + setSearchParams({}); + }; + return (