improved code

src/components/PeopleFilters.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable prettier/prettier */
-import { Person } from '../types';
+import { CompletePerson } from '../types';
 import classNames from 'classnames';
 import { SearchParams } from '../utils/searchHelper';
 import { SearchLink } from './SearchLink';
 import { useEffect } from 'react';
 
 type Props = {
-  people: Person[];
-  setCurrentPeopleList: (filteredPeople: Person[]) => void;
+  people: CompletePerson[];
+  setCurrentPeopleList: (filteredPeople: CompletePerson[]) => void;
   searchParams: URLSearchParams;
   setSearchWith: (params: SearchParams) => void;
 };
@@ -38,16 +37,16 @@ export const PeopleFilters: React.FC<Props> = ({
 }) => {
   const query = searchParams.get('query') || '';
   const sex = searchParams.get('sex') || '';
-  const centuries = searchParams.getAll('centuries') || [];
+  const centuries = searchParams.getAll('centuries');
 
-  let newPeopleList: Person[] = people;
+  let newPeopleList: CompletePerson[] = people;
 
   const sexKeys = Object.keys(Sex);
   const sexValues = Object.values(Sex);
 
   const createNewCenturieList = (newCenturie: string) => {
     return centuries.includes(newCenturie)
-      ? centuries.filter(currentcenturie => currentcenturie !== newCenturie)
+      ? centuries.filter(currentCenturie => currentCenturie !== newCenturie)
       : [...centuries, newCenturie];
   };
 
@@ -84,7 +83,7 @@ export const PeopleFilters: React.FC<Props> = ({
     const firstPossibleYear = (centurie: number) => (centurie - 1) * 100 + 1;
     const lastPossibleYear = (centurie: number) => centurie * 100 - 1;
 
-    const bornFilteredList: Person[] = [];
+    const bornFilteredList: CompletePerson[] = [];
 
     if (centuries.length > 0) {
       for (const centurie of centuriesList) {

src/components/PeopleTable.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { useEffect, useState } from 'react';
-import { CompletePerson, Person } from '../types';
+import { CompletePerson } from '../types';
 import { PersonLink } from './PersonLink';
 import { SearchParams } from '../utils/searchHelper';
 import { SearchLink } from './SearchLink';
 
 type Props = {
-  peopleList: Person[];
+  peopleList: CompletePerson[];
   searchParams: URLSearchParams;
 };
 
@@ -26,20 +26,8 @@ export const PeopleTable: React.FC<Props> = ({ peopleList, searchParams }) => {
 
   const sortableKeys = Object.keys(SortableKeys);
 
-  const findParent = (parentName: string | null) => {
-    return parentName
-      ? peopleList.find(person => person.name === parentName) || null
-      : null;
-  };
-
-  const newPeopleList = peopleList.map(person => ({
-    ...person,
-    mother: findParent(person.motherName),
-    father: findParent(person.fatherName),
-  }));
-
   useEffect(() => {
-    setNewList(newPeopleList);
+    setNewList(peopleList);
   }, [peopleList]);
 
   const paramsFunction = (key: string) => {
@@ -99,7 +87,7 @@ export const PeopleTable: React.FC<Props> = ({ peopleList, searchParams }) => {
 
     if (sort === '' && order === '') {
       setClassName('fas fa-sort');
-      setNewList(newPeopleList);
+      setNewList(peopleList);
     }
   };
 

src/components/PersonLink.tsx

@@ -1,27 +1,36 @@
 import classNames from 'classnames';
 import { CompletePerson } from '../types';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 
 type Props = {
   person: CompletePerson;
 };
 
+enum Female {
+  female = 'f',
+}
+
 export const PersonLink: React.FC<Props> = ({ person }) => {
+  const location = useLocation();
   const { slug } = useParams();
 
+  const toFunc = (selectedPersonSlug: string) => ({
+    pathname: `/people/${selectedPersonSlug}`,
+    search: location.search,
+  });
+
   return (
     <tr
       data-cy="person"
-      key={person.name}
       className={classNames({
         'has-background-warning': person.slug === slug,
       })}
     >
       <td>
         <Link
-          to={`/people/${person.slug}`}
+          to={toFunc(person.slug)}
           className={classNames({
-            'has-text-danger': person.sex === 'f',
+            'has-text-danger': person.sex === Female.female,
           })}
         >
           {person.name}
@@ -34,9 +43,9 @@ export const PersonLink: React.FC<Props> = ({ person }) => {
       <td>
         {person.mother ? (
           <Link
-            to={`/people/${person.mother.slug}`}
+            to={toFunc(person.mother?.slug)}
             className={classNames({
-              'has-text-danger': person.mother.sex === 'f',
+              'has-text-danger': person.mother.sex === Female.female,
             })}
           >
             {person.mother.name}
@@ -49,14 +58,7 @@ export const PersonLink: React.FC<Props> = ({ person }) => {
       </td>
       <td>
         {person.father ? (
-          <Link
-            to={`/people/${person.father.slug}`}
-            className={classNames({
-              'has-text-danger': person.father.sex === 'f',
-            })}
-          >
-            {person.father.name}
-          </Link>
+          <Link to={toFunc(person.father?.slug)}>{person.father.name}</Link>
         ) : person.fatherName ? (
           person.fatherName
         ) : (

src/pages/PeoplePage.tsx

@@ -1,15 +1,21 @@
+/* eslint-disable @typescript-eslint/indent */
 import { PeopleFilters } from '../components/PeopleFilters';
 import { Loader } from '../components/Loader';
 import { PeopleTable } from '../components/PeopleTable';
 import { useEffect, useState } from 'react';
 import { getPeople } from '../api';
-import { Person } from '../types';
+import { CompletePerson, Person } from '../types';
 import { useSearchParams } from 'react-router-dom';
 import { getSearchWith, SearchParams } from '../utils/searchHelper';
 
 export const PeoplePage = () => {
   const [people, setPeople] = useState<Person[]>([]);
-  const [currentPeopleList, setCurrentPeopleList] = useState<Person[]>(people);
+  const [completePersonList, setCompletePersonList] = useState<
+    CompletePerson[]
+  >([]);
+  const [currentPeopleList, setCurrentPeopleList] = useState<CompletePerson[]>(
+    [],
+  );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
 
@@ -24,16 +30,28 @@ export const PeoplePage = () => {
       .finally(() => setLoading(false));
   }, []);
 
-  useEffect(() => {
-    setCurrentPeopleList(people);
-  }, [people]);
-
   const setSearchWith = (params: SearchParams) => {
     const search = getSearchWith(searchParams, params);
 
     setSearchParams(search);
   };
 
+  const findParent = (parentName: string | null) => {
+    return parentName
+      ? people.find(person => person.name === parentName) || null
+      : null;
+  };
+
+  const newPeopleList = people.map(person => ({
+    ...person,
+    mother: findParent(person.motherName),
+    father: findParent(person.fatherName),
+  }));
+
+  useEffect(() => {
+    setCompletePersonList(newPeopleList);
+  }, [people]);
+
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -43,7 +61,7 @@ export const PeoplePage = () => {
           <div className="column is-7-tablet is-narrow-desktop">
             {!loading && (
               <PeopleFilters
-                people={people}
+                people={completePersonList}
                 setCurrentPeopleList={setCurrentPeopleList}
                 searchParams={searchParams}
                 setSearchWith={setSearchWith}
@@ -59,18 +77,25 @@ export const PeoplePage = () => {
                 <p data-cy="peopleLoadingError">Something went wrong</p>
               )}
 
-              {!loading && people.length === 0 && (
+              {!loading && !people.length && (
                 <p data-cy="noPeopleMessage">
                   There are no people on the server
                 </p>
               )}
 
-              {!loading && !error && people.length > 0 && (
-                <PeopleTable
-                  peopleList={currentPeopleList}
-                  searchParams={searchParams}
-                />
+              {!loading && !error && !currentPeopleList.length && (
+                <p>There are no people matching the current search criteria</p>
               )}
+
+              {!loading &&
+                !error &&
+                !!currentPeopleList.length &&
+                !!people.length && (
+                  <PeopleTable
+                    peopleList={currentPeopleList}
+                    searchParams={searchParams}
+                  />
+                )}
             </div>
           </div>
         </div>