From 35764f0096aa9b9306932976e8c745ee4d97a366 Mon Sep 17 00:00:00 2001 From: roman-logos-frontend Date: Thu, 21 Nov 2024 13:20:52 +0200 Subject: [PATCH] add task solution --- README.md | 2 +- src/App.tsx | 7 +- src/components/Loader/Loader.tsx | 1 + src/components/Navbar.tsx | 21 +- src/components/PeopleFilters.tsx | 131 +++--- src/components/PeoplePage.tsx | 74 ++- src/components/PeopleTable.tsx | 743 ++++++------------------------- src/components/SearchLink.tsx | 1 + src/index.tsx | 24 +- src/pages/HomePage.tsx | 3 + src/pages/NotFoundPage.tsx | 3 + 11 files changed, 339 insertions(+), 671 deletions(-) create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/NotFoundPage.tsx diff --git a/README.md b/README.md index 064a39440..5f55c8851 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://roman-logos-frontend.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..d2093204e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,8 @@ -import { PeoplePage } from './components/PeoplePage'; import { Navbar } from './components/Navbar'; +import React from 'react'; import './App.scss'; +import { Outlet } from 'react-router-dom'; export const App = () => { return ( @@ -10,9 +11,7 @@ export const App = () => {
-

Home Page

-

Page not found

- +
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx index dc5a52d28..7cecfe821 100644 --- a/src/components/Loader/Loader.tsx +++ b/src/components/Loader/Loader.tsx @@ -1,4 +1,5 @@ import './Loader.scss'; +import React from 'react'; export const Loader = () => (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 3f63898b2..b679b5c7f 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,3 +1,12 @@ +import classNames from 'classnames'; +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +const getLinkClass = ({ isActive }: { isActive: boolean }) => + classNames('navbar-item', { + 'has-background-grey-lighter': isActive, + }); + export const Navbar = () => { return ( diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx index c9c819cd3..3d271e058 100644 --- a/src/components/PeopleFilters.tsx +++ b/src/components/PeopleFilters.tsx @@ -1,18 +1,62 @@ +import React, { useState } from 'react'; +import { SearchLink } from './SearchLink'; +import { useSearchParams } from 'react-router-dom'; + export const PeopleFilters = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const selectedCenturies = searchParams.getAll('centuries'); + const [query, setQuery] = useState(searchParams.get('query') || ''); + + const toggleCentury = (century: string): string[] => { + if (selectedCenturies.includes(century)) { + return selectedCenturies.filter(c => c !== century); + } + + return [...selectedCenturies, century]; + }; + + const handleQueryChange = (event: React.ChangeEvent) => { + const newQuery = event.target.value; + + setQuery(newQuery); + const newSearchParams = new URLSearchParams(searchParams); + + if (newQuery) { + newSearchParams.set('query', newQuery); + } else { + newSearchParams.delete('query'); + } + + setSearchParams(newSearchParams); + }; + + const isAllActive = selectedCenturies.length === 0; + return (