From 9ea286dcabdd26d622795a11582da61b0f5f4c84 Mon Sep 17 00:00:00 2001 From: Serhii Beskrovnyi Date: Mon, 1 Jun 2026 20:01:03 +0300 Subject: [PATCH 1/2] add task solution --- README.md | 2 +- src/App.scss | 1 + src/App.tsx | 19 +- src/components/Navbar.tsx | 23 +- src/components/PeopleFilters.tsx | 134 +++--- src/components/PeoplePage.tsx | 137 +++++- src/components/PeopleTable.tsx | 748 +++++-------------------------- src/components/SearchLink.tsx | 1 + src/types/filter.ts | 7 + 9 files changed, 371 insertions(+), 701 deletions(-) create mode 100644 src/types/filter.ts diff --git a/README.md b/README.md index 064a39440..f0ed9fa2d 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. +- [DEMO LINK](https://SergGun.github.io/react_people-table-advanced/). diff --git a/src/App.scss b/src/App.scss index c17d529f4..36bb66acb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,3 +1,4 @@ iframe { display: none; } + diff --git a/src/App.tsx b/src/App.tsx index adcb8594e..7fbfb69c9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,19 +2,28 @@ import { PeoplePage } from './components/PeoplePage'; import { Navbar } from './components/Navbar'; import './App.scss'; +import { Navigate, Route, Routes } from 'react-router-dom'; export const App = () => { return (
-
-

Home Page

-

Page not found

- + + Home Page} /> + } /> + + } /> + } /> + + Page not found} + /> +
); -}; +}; \ No newline at end of file diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 3f63898b2..3981a9510 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,4 +1,14 @@ +import { NavLink, useSearchParams } from 'react-router-dom'; +import classNames from 'classnames'; + export const Navbar = () => { + const [searchParams] = useSearchParams(); + + const getLinkClass = ({ isActive }: { isActive: boolean }) => + classNames('navbar-item', { + 'is-active has-background-grey-lighter': isActive, + }); + return ( diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx index c9c819cd3..6325507fe 100644 --- a/src/components/PeopleFilters.tsx +++ b/src/components/PeopleFilters.tsx @@ -1,18 +1,49 @@ +import { useEffect, useState } from 'react'; +import classNames from 'classnames'; +import { useSearchParams } from 'react-router-dom'; +import { FILTER_KEYS } from '../types/filter'; +import { SearchLink } from './SearchLink'; +import { getSearchWith } from '../utils/searchHelper'; + +const CENTURIES = ['16', '17', '18', '19', '20']; + export const PeopleFilters = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const [inputValue, setInputValue] = useState( + searchParams.get(FILTER_KEYS.query) || '', + ); + + const queryParam = searchParams.get(FILTER_KEYS.query) || ''; + const sexParam = searchParams.get(FILTER_KEYS.sex) || ''; + const activeCenturies = searchParams.getAll(FILTER_KEYS.centuries); + + useEffect(() => { + setInputValue(queryParam); + }, [queryParam]); + return (