From 883f0b6887ea48bec08deb157cb0910a69bf5254 Mon Sep 17 00:00:00 2001 From: drewetstreiber Date: Tue, 5 Dec 2023 11:04:30 +0100 Subject: [PATCH 1/3] completed the task --- src/App.tsx | 51 ++- src/components/HomePage.tsx | 5 + src/components/PeopleFilters.tsx | 136 ++++-- src/components/PeoplePage.tsx | 95 +++- src/components/PeopleTable.tsx | 730 +++---------------------------- src/components/PersonLink.tsx | 20 + src/index.tsx | 24 +- src/types/Filters.ts | 5 + src/utils/FilterPeople.tsx | 43 ++ 9 files changed, 357 insertions(+), 752 deletions(-) create mode 100644 src/components/HomePage.tsx create mode 100644 src/components/PersonLink.tsx create mode 100644 src/types/Filters.ts create mode 100644 src/utils/FilterPeople.tsx 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..2cba8fe74 100644 --- a/src/components/PeopleFilters.tsx +++ b/src/components/PeopleFilters.tsx @@ -1,21 +1,83 @@ -export const PeopleFilters = () => { +import { useEffect, useMemo } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { SearchLink } from './SearchLink'; +import { Filters } from '../types/Filters'; + +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') || '', [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 (