develop

src/components/PeopleFilters/PeopleFilters.tsx

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import { useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { SearchLink } from '../SearchLink';
@@ -76,7 +76,6 @@ export const PeopleFilters = () => {
             type="search"
             className="input"
             placeholder="Search"
-            value={query}
             onChange={handleQueryChange}
           />
 
@@ -120,9 +119,12 @@ export const PeopleFilters = () => {
       </div>
 
       <div className="panel-block">
-        <a className="button is-link is-outlined is-fullwidth" href="#/people">
+        <Link
+          className="button is-link is-outlined is-fullwidth"
+          to={{ search: '' }}
+        >
           Reset all filters
-        </a>
+        </Link>
       </div>
     </nav>
   );

src/components/PeopleTable/PeopleTable.tsx

@@ -1,17 +1,18 @@
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { Person } from '../../types';
 import { PersonLink } from '../PersonLink';
 
 type Props = {
-  peopleData: Person[];
+  filteredPeople: Person[];
 };
 
 /* eslint-disable jsx-a11y/control-has-associated-label */
-export const PeopleTable: React.FC<Props> = ({ peopleData }) => {
+export const PeopleTable: React.FC<Props> = ({ filteredPeople }) => {
   const { slug } = useParams();
-  const isSelect = peopleData.find(person => person.slug === slug);
+  const [searchParams] = useSearchParams();
+  const isSelect = filteredPeople.find(person => person.slug === slug);
 
   return (
     <table
@@ -70,11 +71,22 @@ export const PeopleTable: React.FC<Props> = ({ peopleData }) => {
       </thead>
 
       <tbody>
-        {peopleData.map(person => {
+        {filteredPeople.map(person => {
           const { sex, born, died, fatherName, motherName, slug } = person;
 
-          const mother = peopleData.find(p => p.name === motherName);
-          const father = peopleData.find(p => p.name === fatherName);
+          const getParent = (parentName: string | null) => {
+            if (!parentName) return '-';
+
+            const parent = filteredPeople.find(
+              ({ name }) => name === parentName,
+            );
+
+            return parent ? (
+              <PersonLink person={parent} search={searchParams.toString()} />
+            ) : (
+              parentName
+            );
+          };
 
           return (
             <tr
@@ -90,8 +102,8 @@ export const PeopleTable: React.FC<Props> = ({ peopleData }) => {
               <td>{sex}</td>
               <td>{born}</td>
               <td>{died}</td>
-              <td>{mother ? <PersonLink person={mother} /> : '-'}</td>
-              <td>{father ? <PersonLink person={father} /> : '-'}</td>
+              <td>{getParent(motherName)}</td>
+              <td>{getParent(fatherName)}</td>
             </tr>
           );
         })}

src/components/PersonLink/PersonLink.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Person } from '../../types';
 import { Link } from 'react-router-dom';
+import classNames from 'classnames';
 
 type Props = {
   person: Person;
+  search?: string;
 };
 
-export const PersonLink: React.FC<Props> = ({ person }) => {
+export const PersonLink: React.FC<Props> = ({ person, search = '' }) => {
   const { name, slug, sex } = person;
 
   return (
     <Link
       to={`/people/${slug}`}
-      className={sex === 'f' ? 'has-text-danger' : ''}
+      className={classNames({ 'has-text-danger': sex === 'f' })}
     >
       {name}
     </Link>

src/pages/PeoplePage.tsx

@@ -1,14 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Loader } from '../components/Loader';
 import { PeopleFilters } from '../components/PeopleFilters';
 import { PeopleTable } from '../components/PeopleTable';
 import { Person } from '../types';
+import { useSearchParams } from 'react-router-dom';
 
 export const PeoplePage = () => {
   const [peopleData, setPeopleData] = useState<Person[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState('');
+  const [searchParams] = useSearchParams();
 
   const fetchPeopleData = async () => {
     try {
@@ -30,6 +32,23 @@ export const PeoplePage = () => {
     fetchPeopleData();
   }, []);
 
+  console.log(peopleData);
+
+  const filteredPeople = useMemo(() => {
+    const query = searchParams.get('query')?.toLowerCase() || '';
+    const sex = searchParams.get('sex');
+    const centuries = searchParams.getAll('centuries').map(Number);
+
+    return peopleData.filter(person => {
+      const matchesQuery = !query || person.name.toLowerCase().includes(query);
+      const matchesSex = !sex || person.sex === sex;
+      const matchesCentury =
+        !centuries.length || centuries.includes(Math.ceil(person.died / 100));
+
+      return matchesQuery && matchesSex && matchesCentury;
+    });
+  }, [peopleData, searchParams]);
+
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -50,15 +69,23 @@ export const PeoplePage = () => {
                 </p>
               )}
 
-              {peopleData.length === 0 && !isLoading && !error && (
+              {!isLoading && !error && peopleData.length === 0 && (
                 <p data-cy="noPeopleMessage">
                   There are no people on the server
                 </p>
               )}
 
-              <p>There are no people matching the current search criteria</p>
-              {peopleData.length > 0 && !isLoading && !error && (
-                <PeopleTable peopleData={peopleData} />
+              {!isLoading &&
+                !error &&
+                peopleData.length > 0 &&
+                filteredPeople.length === 0 && (
+                  <p>
+                    There are no people matching the current search criteria
+                  </p>
+                )}
+
+              {!isLoading && !error && filteredPeople.length > 0 && (
+                <PeopleTable filteredPeople={filteredPeople} />
               )}
             </div>
           </div>