From 0a9ec0ca99c3896f0cf8d6ea20c36d50b0c11fcf Mon Sep 17 00:00:00 2001
From: Denys <denzzlle171@gmail.com>
Date: Tue, 21 Nov 2023 13:08:31 +0200
Subject: [PATCH 1/5] save

---
 src/App.tsx                      |  49 +-
 src/components/Navbar.tsx        |  19 +-
 src/components/PeopleFilters.tsx | 109 +++--
 src/components/PeoplePage.tsx    | 118 ++++-
 src/components/PeopleTable.tsx   | 772 +++++--------------------------
 src/components/PersonLink.tsx    |  20 +
 6 files changed, 342 insertions(+), 745 deletions(-)
 create mode 100644 src/components/PersonLink.tsx

diff --git a/src/App.tsx b/src/App.tsx
index adcb8594e..7418a0f83 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,39 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
 import { PeoplePage } from './components/PeoplePage';
 import { Navbar } from './components/Navbar';
-
 import './App.scss';
 
-export const App = () => {
-  return (
-    <div data-cy="app">
-      <Navbar />
-
-      <div className="section">
-        <div className="container">
-          <h1 className="title">Home Page</h1>
-          <h1 className="title">Page not found</h1>
-          <PeoplePage />
-        </div>
+export const App = () => (
+  <div data-cy="app">
+    <Navbar />
+    <main className="section">
+      <div className="container">
+        <Routes>
+          <Route path="/home" element={<Navigate to="/" replace />} />
+          <Route path="/" element={<h1 className="title">Home Page</h1>} />
+          <Route path="people">
+            <Route index element={<PeoplePage />} />
+            <Route path=":userSlug" element={<PeoplePage />} />
+          </Route>
+          <Route path="*" element={<h1 className="title">Page not found</h1>} />
+        </Routes>
       </div>
-    </div>
-  );
-};
+    </main>
+  </div>
+);
+
+// export const App = () => {
+//   return (
+//     <div data-cy="app">
+//       <Navbar />
+
+//       <div className="section">
+//         <div className="container">
+//           <h1 className="title">Home Page</h1>
+//           <h1 className="title">Page not found</h1>
+//           <PeoplePage />
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c2aa20f1c..67426c0ff 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,3 +1,10 @@
+import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) => {
+  return classNames('navbar-item', { 'has-background-grey-lighter': isActive });
+};
+
 export const Navbar = () => {
   return (
     <nav
@@ -8,15 +15,13 @@ export const Navbar = () => {
     >
       <div className="container">
         <div className="navbar-brand">
-          <a className="navbar-item" href="#/">Home</a>
+          <NavLink className={getLinkClass} to="/">
+            Home
+          </NavLink>
 
-          <a
-            aria-current="page"
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
-          >
+          <NavLink className={getLinkClass} to="/people">
             People
-          </a>
+          </NavLink>
         </div>
       </div>
     </nav>
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index 2f1608bef..e257b9f13 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -1,12 +1,52 @@
+import classnames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+import { SearchLink } from './SearchLink';
+import { getSearchWith } from '../utils/searchHelper';
+
 export const PeopleFilters = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const sex = searchParams.get('sex');
+  const query = searchParams.get('query') || '';
+  const centuries = searchParams.getAll('centuries') || [];
+
+  // console.log(centuries);
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newQueryParam = getSearchWith(searchParams, {
+      query: event.target.value.trim().toLocaleLowerCase() || null,
+    });
+
+    setSearchParams(newQueryParam);
+  };
+
+  const centuriesItem = ['16', '17', '18', '19', '20'];
+
   return (
     <nav className="panel">
       <p className="panel-heading">Filters</p>
 
       <p className="panel-tabs" data-cy="SexFilter">
-        <a className="is-active" href="#/people">All</a>
-        <a className="" href="#/people?sex=m">Male</a>
-        <a className="" href="#/people?sex=f">Female</a>
+        <SearchLink
+          className={classnames({ 'is-active': !sex })}
+          params={{ sex: null }}
+        >
+          All
+        </SearchLink>
+
+        <SearchLink
+          className={classnames({ 'is-active': sex === 'm' })}
+          params={{ sex: 'm' }}
+        >
+          Male
+        </SearchLink>
+
+        <SearchLink
+          className={classnames({ 'is-active': sex === 'f' })}
+          params={{ sex: 'f' }}
+        >
+          Female
+        </SearchLink>
       </p>
 
       <div className="panel-block">
@@ -16,6 +56,8 @@ export const PeopleFilters = () => {
             type="search"
             className="input"
             placeholder="Search"
+            value={query}
+            onChange={handleQueryChange}
           />
 
           <span className="icon is-left">
@@ -27,45 +69,23 @@ export const PeopleFilters = () => {
       <div className="panel-block">
         <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
           <div className="level-left">
-            <a
-              data-cy="century"
-              className="button mr-1"
-              href="#/people?centuries=16"
-            >
-              16
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=17"
-            >
-              17
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=18"
-            >
-              18
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=19"
-            >
-              19
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1"
-              href="#/people?centuries=20"
-            >
-              20
-            </a>
+            {centuriesItem.map(century => {
+              return (
+                <SearchLink
+                  key={century}
+                  params={{
+                    centuries: centuries.includes(century)
+                      ? centuries.filter((cent) => cent !== century)
+                      : [...centuries, century],
+                  }}
+                  className={classnames('button mr-1', {
+                    'is-info': centuries.includes(century),
+                  })}
+                >
+                  {century}
+                </SearchLink>
+              );
+            })}
           </div>
 
           <div className="level-right ml-4">
@@ -81,10 +101,7 @@ export const PeopleFilters = () => {
       </div>
 
       <div className="panel-block">
-        <a
-          className="button is-link is-outlined is-fullwidth"
-          href="#/people"
-        >
+        <a className="button is-link is-outlined is-fullwidth" href="#/people">
           Reset all filters
         </a>
       </div>
diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
index 4c8713b16..1be248f85 100644
--- a/src/components/PeoplePage.tsx
+++ b/src/components/PeoplePage.tsx
@@ -1,8 +1,91 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { PeopleFilters } from './PeopleFilters';
 import { Loader } from './Loader';
 import { PeopleTable } from './PeopleTable';
+import { getPeople } from '../api';
+
+import { Person } from '../types/Person';
 
 export const PeoplePage = () => {
+  const [people, setPeople] = useState<Person[] | null>(null);
+  const [isLoad, setIsLoad] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchParams] = useSearchParams();
+
+  const sex = searchParams.get('sex');
+  const query = searchParams.get('query')?.trim().toLocaleLowerCase();
+  const centuries = searchParams.getAll('centuries') || [];
+  const sort = searchParams.get('sort');
+  const order = searchParams.get('order');
+
+  // console.log(order);
+
+  useEffect(() => {
+    setIsLoad(true);
+    getPeople()
+      .then((peopleFromServer) => setPeople(peopleFromServer))
+      .catch(() => {
+        setError('Something went wrong');
+      })
+      .finally(() => setIsLoad(false));
+  }, []);
+
+  const getVisiblePeople = () => {
+    if (!people) {
+      return [];
+    }
+
+    let visiblePeople = [...people];
+
+    if (sex) {
+      visiblePeople = visiblePeople.filter((person) => person.sex === sex);
+    }
+
+    if (query) {
+      visiblePeople = visiblePeople.filter((person) => person
+        .name.toLocaleLowerCase().includes(query)
+        || person.motherName?.toLocaleLowerCase().includes(query)
+        || person.fatherName?.toLocaleLowerCase().includes(query));
+    }
+
+    if (centuries.length > 0) {
+      visiblePeople = visiblePeople.filter((person) => centuries
+        ?.includes(Math.ceil(person.born / 100).toString()));
+    }
+
+    if (sort) {
+      visiblePeople.sort((a, b) => {
+        switch (sort) {
+          case 'name':
+            return a.name.localeCompare(b.name);
+
+          case 'sex':
+            return a.sex.localeCompare(b.sex);
+
+          case 'born':
+            return (a.born - b.born);
+
+          case 'died':
+            return (a.died - b.died);
+
+          default:
+            return 0;
+        }
+      });
+    }
+
+    if (order) {
+      visiblePeople.reverse();
+    }
+
+    return visiblePeople;
+  };
+
+  // const visiblePeople = people
+  //   ? people.filter((person) => (sex ? person.sex === sex : true))
+  //   : [];
+
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -10,22 +93,21 @@ export const PeoplePage = () => {
       <div className="block">
         <div className="columns is-desktop is-flex-direction-row-reverse">
           <div className="column is-7-tablet is-narrow-desktop">
-            <PeopleFilters />
+            {people && <PeopleFilters />}
           </div>
 
           <div className="column">
             <div className="box table-container">
-              <Loader />
-
-              <p data-cy="peopleLoadingError">Something went wrong</p>
-
-              <p data-cy="noPeopleMessage">
-                There are no people on the server
-              </p>
-
-              <p>There are no people matching the current search criteria</p>
-
-              <PeopleTable />
+              {isLoad && <Loader />}
+              {error && (
+                <p data-cy="peopleLoadingError" className="has-text-danger">
+                  {error}
+                </p>
+              )}
+              {people && <PeopleTable people={getVisiblePeople()} />}
+              {!isLoad && !error && !people && (
+                <p data-cy="noPeopleMessage">no people</p>
+              )}
             </div>
           </div>
         </div>
@@ -33,3 +115,15 @@ export const PeoplePage = () => {
     </>
   );
 };
+
+// Something went wrong
+
+// There are no people on the server
+
+// There are no people matching the current search criteria
+//
+// <p data-cy="peopleLoadingError">Something went wrong</p>
+
+// <p data-cy="noPeopleMessage">There are no people on the server</p>
+
+// <p>There are no people matching the current search criteria</p>
diff --git a/src/components/PeopleTable.tsx b/src/components/PeopleTable.tsx
index 8ab5b90f7..83ad8418b 100644
--- a/src/components/PeopleTable.tsx
+++ b/src/components/PeopleTable.tsx
@@ -1,4 +1,44 @@
-export const PeopleTable = () => {
+import classnames from 'classnames';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { Person } from '../types/Person';
+import { PersonLink } from './PersonLink';
+import { SearchLink } from './SearchLink';
+
+type Props = {
+  people: Person[];
+};
+
+const columnsName = ['Name', 'Sex', 'Born', 'Died'];
+
+export const PeopleTable: React.FC<Props> = ({ people }) => {
+  const { userSlug } = useParams();
+
+  const [searchParams] = useSearchParams();
+
+  const sort = searchParams.get('sort');
+  const order = searchParams.get('order');
+
+  function togglesort(column: string) {
+    // console.log(`column-- ${column}`);
+    let newParam = {};
+
+    if (sort !== column.toLowerCase() && !order) {
+      newParam = { sort: column.toLowerCase(), order: null };
+    }
+
+    if (sort === column.toLowerCase() && !order) {
+      newParam = { sort: column.toLowerCase(), order: 'desc' };
+    }
+
+    if (sort === column.toLowerCase() && order) {
+      newParam = { sort: null, order: null };
+    }
+
+    return newParam;
+  }
+
+  // console.log(`sort-- ${sort}`);
+
   return (
     <table
       data-cy="peopleTable"
@@ -6,677 +46,79 @@ export const PeopleTable = () => {
     >
       <thead>
         <tr>
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Name
-              <a href="#/people?sort=name">
-                <span className="icon">
-                  <i className="fas fa-sort" />
+          {columnsName.map((colum) => {
+            console.log(sort);
+
+            return (
+              <th key={colum}>
+                <span className="is-flex is-flex-wrap-nowrap">
+                  {colum}
+                  <SearchLink
+                    params={{
+                      ...togglesort(colum),
+                    }}
+                  >
+                    <span className="icon">
+                      <i
+                        className={classnames('fas', {
+                          'fa-sort': sort !== colum.toLowerCase(),
+                          'fa-sort-up':
+                            sort === colum.toLowerCase() && order !== 'desc',
+                          'fa-sort-down':
+                            sort === colum.toLowerCase() && order === 'desc',
+                        })}
+                      />
+                    </span>
+                  </SearchLink>
                 </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Sex
-              <a href="#/people?sort=sex">
-                <span className="icon">
-                  <i className="fas fa-sort" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Born
-              <a href="#/people?sort=born&amp;order=desc">
-                <span className="icon">
-                  <i className="fas fa-sort-up" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Died
-              <a href="#/people?sort=died">
-                <span className="icon">
-                  <i className="fas fa-sort" />
-                </span>
-              </a>
-            </span>
-          </th>
+              </th>
+            );
+          })}
 
           <th>Mother</th>
           <th>Father</th>
         </tr>
       </thead>
-
       <tbody>
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-haverbeke-1602">Pieter Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1602</td>
-          <td>1642</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/lieven-van-haverbeke-1570">
-              Lieven van Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/anna-van-hecke-1607"
-            >
-              Anna van Hecke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1607</td>
-          <td>1670</td>
-          <td>Martijntken Beelaert</td>
-          <td>Paschasius van Hecke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1631</td>
-          <td>1676</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/anna-van-hecke-1607"
-            >
-              Anna van Hecke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-haverbeke-1602">Pieter Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1632</td>
-          <td>1674</td>
-          <td>Margriet de Brabander</td>
-          <td>Willem Hercke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/daniel-haverbeke-1652">Daniel Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1652</td>
-          <td>1723</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-pape-1654"
-            >
-              Joanna de Pape
-            </a>
-          </td>
-          <td>f</td>
-          <td>1654</td>
-          <td>1723</td>
-          <td>Petronella Wauters</td>
-          <td>Vincent de Pape</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/martina-de-pape-1666"
-            >
-              Martina de Pape
-            </a>
-          </td>
-          <td>f</td>
-          <td>1666</td>
-          <td>1727</td>
-          <td>Petronella Wauters</td>
-          <td>Vincent de Pape</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/willem-haverbeke-1668">Willem Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1668</td>
-          <td>1731</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1671</td>
-          <td>1731</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person" className="has-background-warning">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1683</td>
-          <td>1724</td>
-          <td>Laurentia van Vlaenderen</td>
-          <td>Frederik de Rycke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1692</td>
-          <td>1743</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-pape-1654"
-            >
-              Joanna de Pape
-            </a>
-          </td>
-          <td>
-            <a href="#/people/daniel-haverbeke-1652">Daniel Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1695</td>
-          <td>1762</td>
-          <td>Petronella Wauters</td>
-          <td>
-            <a href="#/people/willem-haverbeke-1668">Willem Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/lieven-de-causmaecker-1696">
-              Lieven de Causmaecker
-            </a>
-          </td>
-          <td>m</td>
-          <td>1696</td>
-          <td>1724</td>
-          <td>Joanna Claes</td>
-          <td>Carel de Causmaecker</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/jacoba-lammens-1699"
-            >
-              Jacoba Lammens
-            </a>
-          </td>
-          <td>f</td>
-          <td>1699</td>
-          <td>1740</td>
-          <td>Livina de Vrieze</td>
-          <td>Lieven Lammens</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-de-decker-1705">Pieter de Decker</a>
-          </td>
-          <td>m</td>
-          <td>1705</td>
-          <td>1780</td>
-          <td>Petronella van de Steene</td>
-          <td>Joos de Decker</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/laurentia-haverbeke-1710"
-            >
-              Laurentia Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1710</td>
-          <td>1786</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-haverbeke-1711"
-            >
-              Elisabeth Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1711</td>
-          <td>1754</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-van-brussel-1714">Jan van Brussel</a>
-          </td>
-          <td>m</td>
-          <td>1714</td>
-          <td>1748</td>
-          <td>Joanna van Rooten</td>
-          <td>Jacobus van Brussel</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/bernardus-de-causmaecker-1721">
-              Bernardus de Causmaecker
-            </a>
-          </td>
-          <td>m</td>
-          <td>1721</td>
-          <td>1789</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-de-causmaecker-1696">
-              Lieven de Causmaecker
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-francies-haverbeke-1725">
-              Jan Francies Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1725</td>
-          <td>1779</td>
-          <td>Livina de Vrieze</td>
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/angela-haverbeke-1728"
-            >
-              Angela Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1728</td>
-          <td>1734</td>
-          <td>Livina de Vrieze</td>
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/petronella-de-decker-1731"
-            >
-              Petronella de Decker
-            </a>
-          </td>
-          <td>f</td>
-          <td>1731</td>
-          <td>1781</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-de-decker-1705">Pieter de Decker</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jacobus-bernardus-van-brussel-1736">
-              Jacobus Bernardus van Brussel
-            </a>
-          </td>
-          <td>m</td>
-          <td>1736</td>
-          <td>1809</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-haverbeke-1711"
-            >
-              Elisabeth Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-van-brussel-1714">Jan van Brussel</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-antone-haverbeke-1753">
-              Pieter Antone Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1753</td>
-          <td>1798</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/petronella-de-decker-1731"
-            >
-              Petronella de Decker
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-francies-haverbeke-1725">
-              Jan Francies Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-frans-van-brussel-1761">
-              Jan Frans van Brussel
-            </a>
-          </td>
-          <td>m</td>
-          <td>1761</td>
-          <td>1833</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/jacobus-bernardus-van-brussel-1736">
-              Jacobus Bernardus van Brussel
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-sierens-1761"
-            >
-              Livina Sierens
-            </a>
-          </td>
-          <td>f</td>
-          <td>1761</td>
-          <td>1826</td>
-          <td>Maria van Waes</td>
-          <td>Jan Sierens</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-causmaecker-1762"
-            >
-              Joanna de Causmaecker
-            </a>
-          </td>
-          <td>f</td>
-          <td>1762</td>
-          <td>1807</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/bernardus-de-causmaecker-1721">
-              Bernardus de Causmaecker
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/carel-haverbeke-1796">Carel Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1796</td>
-          <td>1837</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-sierens-1761"
-            >
-              Livina Sierens
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-antone-haverbeke-1753">
-              Pieter Antone Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-van-brussel-1801"
-            >
-              Maria van Brussel
-            </a>
-          </td>
-          <td>f</td>
-          <td>1801</td>
-          <td>1834</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-causmaecker-1762"
-            >
-              Joanna de Causmaecker
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-frans-van-brussel-1761">
-              Jan Frans van Brussel
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/carolus-haverbeke-1832">Carolus Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1832</td>
-          <td>1905</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-van-brussel-1801"
-            >
-              Maria van Brussel
-            </a>
-          </td>
-          <td>
-            <a href="#/people/carel-haverbeke-1796">Carel Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-sturm-1835"
-            >
-              Maria Sturm
-            </a>
-          </td>
-          <td>f</td>
-          <td>1835</td>
-          <td>1917</td>
-          <td>Seraphina Spelier</td>
-          <td>Charles Sturm</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/emma-de-milliano-1876"
-            >
-              Emma de Milliano
-            </a>
-          </td>
-          <td>f</td>
-          <td>1876</td>
-          <td>1956</td>
-          <td>Sophia van Damme</td>
-          <td>Petrus de Milliano</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/emile-haverbeke-1877">Emile Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1877</td>
-          <td>1968</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-sturm-1835"
-            >
-              Maria Sturm
-            </a>
-          </td>
-          <td>
-            <a href="#/people/carolus-haverbeke-1832">Carolus Haverbeke</a>
-          </td>
-        </tr>
+        {people.map((person: Person) => {
+          const searchMother = people.find(
+            (pers) => pers.name === person.motherName,
+          );
+          const serchFather = people.find(
+            (pers) => pers.name === person.fatherName,
+          );
+
+          return (
+            <tr
+              data-cy="person"
+              key={person.slug}
+              className={classnames({
+                'has-background-warning': person.slug === userSlug,
+              })}
+            >
+              <td>
+                <PersonLink person={person} />
+              </td>
+              <td>{person.sex}</td>
+              <td>{person.born}</td>
+              <td>{person.died}</td>
+              <td>
+                {searchMother ? (
+                  <PersonLink person={searchMother} />
+                ) : (
+                  person.motherName || '-'
+                )}
+              </td>
+              <td>
+                {serchFather ? (
+                  <PersonLink person={serchFather} />
+                ) : (
+                  person.fatherName || '-'
+                )}
+              </td>
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );
diff --git a/src/components/PersonLink.tsx b/src/components/PersonLink.tsx
new file mode 100644
index 000000000..3afff860e
--- /dev/null
+++ b/src/components/PersonLink.tsx
@@ -0,0 +1,20 @@
+import classnames from 'classnames';
+import { Link } from 'react-router-dom';
+import { Person } from '../types/Person';
+
+type Props = {
+  person: Person;
+};
+
+export const PersonLink: React.FC<Props> = ({ person }) => {
+  return (
+    <Link
+      to={`/people/${person.slug}`}
+      className={classnames({
+        'has-text-danger': person.sex === 'f',
+      })}
+    >
+      {person.name}
+    </Link>
+  );
+};

From d2a660c710f27001844fa65f463232380473e945 Mon Sep 17 00:00:00 2001
From: Denys <denzzlle171@gmail.com>
Date: Tue, 21 Nov 2023 17:15:06 +0200
Subject: [PATCH 2/5] solution

---
 README.md                        |  2 +-
 src/components/PeopleFilters.tsx | 23 ++++++----
 src/components/PeopleTable.tsx   | 73 ++++++++++++++++----------------
 3 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/README.md b/README.md
index 24519caab..c26684e30 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 `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_people-table-advanced/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://denzzlle171.github.io/react_people-table-advanced/) and add it to the PR description.
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index e257b9f13..ea4e91c21 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -10,8 +10,6 @@ export const PeopleFilters = () => {
   const query = searchParams.get('query') || '';
   const centuries = searchParams.getAll('centuries') || [];
 
-  // console.log(centuries);
-
   const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newQueryParam = getSearchWith(searchParams, {
       query: event.target.value.trim().toLocaleLowerCase() || null,
@@ -69,7 +67,7 @@ export const PeopleFilters = () => {
       <div className="panel-block">
         <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
           <div className="level-left">
-            {centuriesItem.map(century => {
+            {centuriesItem.map((century) => {
               return (
                 <SearchLink
                   key={century}
@@ -89,21 +87,28 @@ export const PeopleFilters = () => {
           </div>
 
           <div className="level-right ml-4">
-            <a
+            <SearchLink
               data-cy="centuryALL"
-              className="button is-success is-outlined"
-              href="#/people"
+              className={classnames('button', 'is-success', {
+                'is-outlined': centuries.length > 0,
+              })}
+              params={{ centuries: null }}
+              // to="#/people"
             >
               All
-            </a>
+            </SearchLink>
           </div>
         </div>
       </div>
 
       <div className="panel-block">
-        <a className="button is-link is-outlined is-fullwidth" href="#/people">
+        <SearchLink
+          className="button is-link is-outlined is-fullwidth"
+          // to="#/people"
+          params={{ centuries: null, query: null, sex: null }}
+        >
           Reset all filters
-        </a>
+        </SearchLink>
       </div>
     </nav>
   );
diff --git a/src/components/PeopleTable.tsx b/src/components/PeopleTable.tsx
index 83ad8418b..0290468ad 100644
--- a/src/components/PeopleTable.tsx
+++ b/src/components/PeopleTable.tsx
@@ -19,7 +19,6 @@ export const PeopleTable: React.FC<Props> = ({ people }) => {
   const order = searchParams.get('order');
 
   function togglesort(column: string) {
-    // console.log(`column-- ${column}`);
     let newParam = {};
 
     if (sort !== column.toLowerCase() && !order) {
@@ -37,48 +36,48 @@ export const PeopleTable: React.FC<Props> = ({ people }) => {
     return newParam;
   }
 
-  // console.log(`sort-- ${sort}`);
-
   return (
     <table
       data-cy="peopleTable"
       className="table is-striped is-hoverable is-narrow is-fullwidth"
     >
-      <thead>
-        <tr>
-          {columnsName.map((colum) => {
-            console.log(sort);
-
-            return (
-              <th key={colum}>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  {colum}
-                  <SearchLink
-                    params={{
-                      ...togglesort(colum),
-                    }}
-                  >
-                    <span className="icon">
-                      <i
-                        className={classnames('fas', {
-                          'fa-sort': sort !== colum.toLowerCase(),
-                          'fa-sort-up':
-                            sort === colum.toLowerCase() && order !== 'desc',
-                          'fa-sort-down':
-                            sort === colum.toLowerCase() && order === 'desc',
-                        })}
-                      />
-                    </span>
-                  </SearchLink>
-                </span>
-              </th>
-            );
-          })}
+      {people.length > 0 ? (
+        <thead>
+          <tr>
+            {columnsName.map((colum) => {
+              return (
+                <th key={colum}>
+                  <span className="is-flex is-flex-wrap-nowrap">
+                    {colum}
+                    <SearchLink
+                      params={{
+                        ...togglesort(colum),
+                      }}
+                    >
+                      <span className="icon">
+                        <i
+                          className={classnames('fas', {
+                            'fa-sort': sort !== colum.toLowerCase(),
+                            'fa-sort-up':
+                              sort === colum.toLowerCase() && order !== 'desc',
+                            'fa-sort-down':
+                              sort === colum.toLowerCase() && order === 'desc',
+                          })}
+                        />
+                      </span>
+                    </SearchLink>
+                  </span>
+                </th>
+              );
+            })}
 
-          <th>Mother</th>
-          <th>Father</th>
-        </tr>
-      </thead>
+            <th>Mother</th>
+            <th>Father</th>
+          </tr>
+        </thead>
+      ) : (
+        <p>There are no people matching the current search criteria</p>
+      )}
       <tbody>
         {people.map((person: Person) => {
           const searchMother = people.find(

From e7f5a6ecde30a191b05c17439ca7f994784d3b60 Mon Sep 17 00:00:00 2001
From: Denys <denzzlle171@gmail.com>
Date: Tue, 21 Nov 2023 17:49:42 +0200
Subject: [PATCH 3/5] fix1

---
 src/App.tsx                      | 16 ----------------
 src/components/PeopleFilters.tsx |  2 --
 src/components/PeoplePage.tsx    | 18 ------------------
 src/components/PeopleTable.tsx   |  2 +-
 4 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7418a0f83..3bb1154d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,19 +21,3 @@ export const App = () => (
     </main>
   </div>
 );
-
-// export const App = () => {
-//   return (
-//     <div data-cy="app">
-//       <Navbar />
-
-//       <div className="section">
-//         <div className="container">
-//           <h1 className="title">Home Page</h1>
-//           <h1 className="title">Page not found</h1>
-//           <PeoplePage />
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index ea4e91c21..911b897da 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -93,7 +93,6 @@ export const PeopleFilters = () => {
                 'is-outlined': centuries.length > 0,
               })}
               params={{ centuries: null }}
-              // to="#/people"
             >
               All
             </SearchLink>
@@ -104,7 +103,6 @@ export const PeopleFilters = () => {
       <div className="panel-block">
         <SearchLink
           className="button is-link is-outlined is-fullwidth"
-          // to="#/people"
           params={{ centuries: null, query: null, sex: null }}
         >
           Reset all filters
diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
index 1be248f85..f6cba9591 100644
--- a/src/components/PeoplePage.tsx
+++ b/src/components/PeoplePage.tsx
@@ -19,8 +19,6 @@ export const PeoplePage = () => {
   const sort = searchParams.get('sort');
   const order = searchParams.get('order');
 
-  // console.log(order);
-
   useEffect(() => {
     setIsLoad(true);
     getPeople()
@@ -82,10 +80,6 @@ export const PeoplePage = () => {
     return visiblePeople;
   };
 
-  // const visiblePeople = people
-  //   ? people.filter((person) => (sex ? person.sex === sex : true))
-  //   : [];
-
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -115,15 +109,3 @@ export const PeoplePage = () => {
     </>
   );
 };
-
-// Something went wrong
-
-// There are no people on the server
-
-// There are no people matching the current search criteria
-//
-// <p data-cy="peopleLoadingError">Something went wrong</p>
-
-// <p data-cy="noPeopleMessage">There are no people on the server</p>
-
-// <p>There are no people matching the current search criteria</p>
diff --git a/src/components/PeopleTable.tsx b/src/components/PeopleTable.tsx
index 0290468ad..778bf8f52 100644
--- a/src/components/PeopleTable.tsx
+++ b/src/components/PeopleTable.tsx
@@ -21,7 +21,7 @@ export const PeopleTable: React.FC<Props> = ({ people }) => {
   function togglesort(column: string) {
     let newParam = {};
 
-    if (sort !== column.toLowerCase() && !order) {
+    if (sort !== column.toLowerCase()) {
       newParam = { sort: column.toLowerCase(), order: null };
     }
 

From a1d6e48f6bcd1ddddf007a757b53df1902fbb224 Mon Sep 17 00:00:00 2001
From: Denys <denzzlle171@gmail.com>
Date: Wed, 22 Nov 2023 20:14:58 +0200
Subject: [PATCH 4/5] fix3

---
 src/components/PeoplePage.tsx | 69 +++++++----------------------------
 src/utils/getVisiblePeople.ts | 61 +++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 55 deletions(-)
 create mode 100644 src/utils/getVisiblePeople.ts

diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
index f6cba9591..728d544f6 100644
--- a/src/components/PeoplePage.tsx
+++ b/src/components/PeoplePage.tsx
@@ -4,12 +4,12 @@ import { PeopleFilters } from './PeopleFilters';
 import { Loader } from './Loader';
 import { PeopleTable } from './PeopleTable';
 import { getPeople } from '../api';
-
+import { getVisiblePeople } from '../utils/getVisiblePeople';
 import { Person } from '../types/Person';
 
 export const PeoplePage = () => {
   const [people, setPeople] = useState<Person[] | null>(null);
-  const [isLoad, setIsLoad] = useState<boolean>(false);
+  const [isLoad, setIsLoad] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [searchParams] = useSearchParams();
 
@@ -20,7 +20,6 @@ export const PeoplePage = () => {
   const order = searchParams.get('order');
 
   useEffect(() => {
-    setIsLoad(true);
     getPeople()
       .then((peopleFromServer) => setPeople(peopleFromServer))
       .catch(() => {
@@ -29,57 +28,6 @@ export const PeoplePage = () => {
       .finally(() => setIsLoad(false));
   }, []);
 
-  const getVisiblePeople = () => {
-    if (!people) {
-      return [];
-    }
-
-    let visiblePeople = [...people];
-
-    if (sex) {
-      visiblePeople = visiblePeople.filter((person) => person.sex === sex);
-    }
-
-    if (query) {
-      visiblePeople = visiblePeople.filter((person) => person
-        .name.toLocaleLowerCase().includes(query)
-        || person.motherName?.toLocaleLowerCase().includes(query)
-        || person.fatherName?.toLocaleLowerCase().includes(query));
-    }
-
-    if (centuries.length > 0) {
-      visiblePeople = visiblePeople.filter((person) => centuries
-        ?.includes(Math.ceil(person.born / 100).toString()));
-    }
-
-    if (sort) {
-      visiblePeople.sort((a, b) => {
-        switch (sort) {
-          case 'name':
-            return a.name.localeCompare(b.name);
-
-          case 'sex':
-            return a.sex.localeCompare(b.sex);
-
-          case 'born':
-            return (a.born - b.born);
-
-          case 'died':
-            return (a.died - b.died);
-
-          default:
-            return 0;
-        }
-      });
-    }
-
-    if (order) {
-      visiblePeople.reverse();
-    }
-
-    return visiblePeople;
-  };
-
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -98,7 +46,18 @@ export const PeoplePage = () => {
                   {error}
                 </p>
               )}
-              {people && <PeopleTable people={getVisiblePeople()} />}
+              {people && (
+                <PeopleTable
+                  people={getVisiblePeople(
+                    people,
+                    sex,
+                    query,
+                    centuries,
+                    sort,
+                    order,
+                  )}
+                />
+              )}
               {!isLoad && !error && !people && (
                 <p data-cy="noPeopleMessage">no people</p>
               )}
diff --git a/src/utils/getVisiblePeople.ts b/src/utils/getVisiblePeople.ts
new file mode 100644
index 000000000..1d734050b
--- /dev/null
+++ b/src/utils/getVisiblePeople.ts
@@ -0,0 +1,61 @@
+import { Person } from '../types/Person';
+
+export const getVisiblePeople = (
+  people: Person[],
+  sex: string | null,
+  query: string | undefined,
+  centuries: string[],
+  sort: string | null,
+  order: string | null,
+) => {
+  if (!people) {
+    return [];
+  }
+
+  let visiblePeople = [...people];
+
+  if (sex) {
+    visiblePeople = visiblePeople.filter((person) => person.sex === sex);
+  }
+
+  if (query) {
+    visiblePeople = visiblePeople.filter(
+      (person) => person.name.toLocaleLowerCase().includes(query)
+        || person.motherName?.toLocaleLowerCase().includes(query)
+        || person.fatherName?.toLocaleLowerCase().includes(query),
+    );
+  }
+
+  if (centuries.length > 0) {
+    visiblePeople = visiblePeople
+      .filter((person) => centuries
+        ?.includes(Math.ceil(person.born / 100).toString()));
+  }
+
+  if (sort) {
+    visiblePeople.sort((a, b) => {
+      switch (sort) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+
+        case 'sex':
+          return a.sex.localeCompare(b.sex);
+
+        case 'born':
+          return a.born - b.born;
+
+        case 'died':
+          return a.died - b.died;
+
+        default:
+          return 0;
+      }
+    });
+  }
+
+  if (order) {
+    visiblePeople.reverse();
+  }
+
+  return visiblePeople;
+};

From f2ddd55467b2df76ae2b6e47cb4c6fdf7dc2b088 Mon Sep 17 00:00:00 2001
From: Denys <denzzlle171@gmail.com>
Date: Sun, 26 Nov 2023 01:36:50 +0200
Subject: [PATCH 5/5] fix--

---
 src/components/PeopleFilters.tsx | 35 ++++++++++++++------------------
 src/components/PeoplePage.tsx    | 24 ++++++++++------------
 src/utils/getVisiblePeople.ts    |  2 +-
 3 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index 911b897da..3cd9387a8 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -18,6 +18,12 @@ export const PeopleFilters = () => {
     setSearchParams(newQueryParam);
   };
 
+  const sexFilters = [
+    { label: 'All', value: null },
+    { label: 'Male', value: 'm' },
+    { label: 'Female', value: 'f' },
+  ];
+
   const centuriesItem = ['16', '17', '18', '19', '20'];
 
   return (
@@ -25,26 +31,15 @@ export const PeopleFilters = () => {
       <p className="panel-heading">Filters</p>
 
       <p className="panel-tabs" data-cy="SexFilter">
-        <SearchLink
-          className={classnames({ 'is-active': !sex })}
-          params={{ sex: null }}
-        >
-          All
-        </SearchLink>
-
-        <SearchLink
-          className={classnames({ 'is-active': sex === 'm' })}
-          params={{ sex: 'm' }}
-        >
-          Male
-        </SearchLink>
-
-        <SearchLink
-          className={classnames({ 'is-active': sex === 'f' })}
-          params={{ sex: 'f' }}
-        >
-          Female
-        </SearchLink>
+        {sexFilters.map(({ label, value }) => (
+          <SearchLink
+            key={value}
+            className={classnames({ 'is-active': sex === value })}
+            params={{ sex: value }}
+          >
+            {label}
+          </SearchLink>
+        ))}
       </p>
 
       <div className="panel-block">
diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
index 728d544f6..c49945133 100644
--- a/src/components/PeoplePage.tsx
+++ b/src/components/PeoplePage.tsx
@@ -21,13 +21,22 @@ export const PeoplePage = () => {
 
   useEffect(() => {
     getPeople()
-      .then((peopleFromServer) => setPeople(peopleFromServer))
+      .then(setPeople)
       .catch(() => {
         setError('Something went wrong');
       })
       .finally(() => setIsLoad(false));
   }, []);
 
+  const visiblePeople = getVisiblePeople(
+    people,
+    sex,
+    query,
+    centuries,
+    sort,
+    order,
+  );
+
   return (
     <>
       <h1 className="title">People Page</h1>
@@ -46,18 +55,7 @@ export const PeoplePage = () => {
                   {error}
                 </p>
               )}
-              {people && (
-                <PeopleTable
-                  people={getVisiblePeople(
-                    people,
-                    sex,
-                    query,
-                    centuries,
-                    sort,
-                    order,
-                  )}
-                />
-              )}
+              {people && <PeopleTable people={visiblePeople} />}
               {!isLoad && !error && !people && (
                 <p data-cy="noPeopleMessage">no people</p>
               )}
diff --git a/src/utils/getVisiblePeople.ts b/src/utils/getVisiblePeople.ts
index 1d734050b..dd1ef5f02 100644
--- a/src/utils/getVisiblePeople.ts
+++ b/src/utils/getVisiblePeople.ts
@@ -1,7 +1,7 @@
 import { Person } from '../types/Person';
 
 export const getVisiblePeople = (
-  people: Person[],
+  people: Person[] | null,
   sex: string | null,
   query: string | undefined,
   centuries: string[],