From b89cdd11defde3045d8679ebc6b0b36f432620c7 Mon Sep 17 00:00:00 2001
From: Nazar <nazar.regalov@gmail.com>
Date: Wed, 3 Jun 2026 21:15:33 +0300
Subject: [PATCH 1/4] Solution

---
 README.md                                     |   2 +-
 src/App.scss                                  |   4 +
 src/App.tsx                                   |  24 +-
 .../CenturyFilter/CenturyFilter.tsx           |  60 ++
 src/components/CenturyFilter/index.ts         |   1 +
 src/components/HomePage/HomePage.tsx          |   3 +
 src/components/HomePage/index.ts              |   1 +
 src/components/NameFilter/NameFilter.tsx      |  26 +
 src/components/NameFilter/index.ts            |   1 +
 src/components/Navbar/Navbar.tsx              |  31 +
 src/components/Navbar/index.ts                |   1 +
 src/components/NotFoundPage/NotFoundPage.tsx  |   3 +
 src/components/NotFoundPage/index.ts          |   1 +
 src/components/PeopleFilters.tsx              |  77 +-
 src/components/PeoplePage/PeoplePage.tsx      | 160 +++++
 src/components/PeoplePage/index.ts            |   1 +
 src/components/PeopleTable.tsx                | 677 +++---------------
 src/components/PeopleTable/index.ts           |   1 +
 src/components/PersonLink/PersonLink.tsx      |  14 +
 src/components/PersonLink/index.ts            |   1 +
 .../PersonOfTable/PersonOfTable.tsx           |  42 ++
 src/components/PersonOfTable/index.ts         |   1 +
 src/index.tsx                                 |   6 +-
 tsconfig.json                                 |   3 +-
 24 files changed, 476 insertions(+), 665 deletions(-)
 create mode 100644 src/components/CenturyFilter/CenturyFilter.tsx
 create mode 100644 src/components/CenturyFilter/index.ts
 create mode 100644 src/components/HomePage/HomePage.tsx
 create mode 100644 src/components/HomePage/index.ts
 create mode 100644 src/components/NameFilter/NameFilter.tsx
 create mode 100644 src/components/NameFilter/index.ts
 create mode 100644 src/components/Navbar/Navbar.tsx
 create mode 100644 src/components/Navbar/index.ts
 create mode 100644 src/components/NotFoundPage/NotFoundPage.tsx
 create mode 100644 src/components/NotFoundPage/index.ts
 create mode 100644 src/components/PeoplePage/PeoplePage.tsx
 create mode 100644 src/components/PeoplePage/index.ts
 create mode 100644 src/components/PeopleTable/index.ts
 create mode 100644 src/components/PersonLink/PersonLink.tsx
 create mode 100644 src/components/PersonLink/index.ts
 create mode 100644 src/components/PersonOfTable/PersonOfTable.tsx
 create mode 100644 src/components/PersonOfTable/index.ts

diff --git a/README.md b/README.md
index 064a39440..fb020fddf 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://Palfinger2002.github.io/react_people-table-advanced/) and add it to the PR description.
diff --git a/src/App.scss b/src/App.scss
index c17d529f4..9708ec00e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,3 +1,7 @@
 iframe {
   display: none;
 }
+
+h1 {
+  margin-top: 52px;
+}
diff --git a/src/App.tsx b/src/App.tsx
index adcb8594e..6d28a7c0f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,28 @@
-import { PeoplePage } from './components/PeoplePage';
-import { Navbar } from './components/Navbar';
-
 import './App.scss';
+import { Navbar } from './components/Navbar';
+import { HomePage } from './components/HomePage/HomePage';
+import { PeoplePage } from './components/PeoplePage/PeoplePage';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { NotFoundPage } from './components/NotFoundPage';
 
-export const App = () => {
+export const App: React.FC = () => {
   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 />
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+
+            <Route path="people">
+              <Route index element={<PeoplePage />} />
+              <Route path=":slug?" element={<PeoplePage />} />
+            </Route>
+
+            <Route path="/home" element={<Navigate to="/" replace />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
         </div>
       </div>
     </div>
diff --git a/src/components/CenturyFilter/CenturyFilter.tsx b/src/components/CenturyFilter/CenturyFilter.tsx
new file mode 100644
index 000000000..def6d05c5
--- /dev/null
+++ b/src/components/CenturyFilter/CenturyFilter.tsx
@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+
+export const CenturyFilter = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const CENTURIES = ['16', '17', '18', '19', '20'];
+  const values = searchParams.getAll('centuries');
+
+  return (
+    <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
+      <div className="level-left">
+        {CENTURIES.map(century => {
+          return (
+            <a
+              key={century}
+              data-cy="century"
+              className={classNames('button mr-1', {
+                'is-info': values.includes(century),
+              })}
+              href={`#/people?centuries=${century}`}
+              onClick={event => {
+                event.preventDefault();
+                if (values.includes(century)) {
+                  const newValues = values.filter(value => value !== century);
+
+                  searchParams.delete('centuries');
+                  newValues.forEach(value =>
+                    searchParams.append('centuries', value),
+                  );
+                } else {
+                  searchParams.append('centuries', century);
+                }
+
+                setSearchParams(searchParams);
+              }}
+            >
+              {century}
+            </a>
+          );
+        })}
+      </div>
+
+      <div className="level-right ml-4">
+        <a
+          data-cy="centuryALL"
+          className="button is-success is-outlined"
+          href="#/people"
+          onClick={event => {
+            event.preventDefault();
+            searchParams.delete('centuries');
+            setSearchParams(searchParams);
+          }}
+        >
+          All
+        </a>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/CenturyFilter/index.ts b/src/components/CenturyFilter/index.ts
new file mode 100644
index 000000000..bf10644f6
--- /dev/null
+++ b/src/components/CenturyFilter/index.ts
@@ -0,0 +1 @@
+export * from './CenturyFilter';
diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx
new file mode 100644
index 000000000..e4cd51ac5
--- /dev/null
+++ b/src/components/HomePage/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage = () => {
+  return <h1 className="title">Home Page</h1>;
+};
diff --git a/src/components/HomePage/index.ts b/src/components/HomePage/index.ts
new file mode 100644
index 000000000..11e53da67
--- /dev/null
+++ b/src/components/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/components/NameFilter/NameFilter.tsx b/src/components/NameFilter/NameFilter.tsx
new file mode 100644
index 000000000..40fb13959
--- /dev/null
+++ b/src/components/NameFilter/NameFilter.tsx
@@ -0,0 +1,26 @@
+import { useSearchParams } from 'react-router-dom';
+
+export const NameFilter = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const query = searchParams.get('query') || '';
+
+  return (
+    <input
+      data-cy="NameFilter"
+      type="search"
+      className="input"
+      placeholder="Search"
+      value={query}
+      onChange={event => {
+        const value = event.target.value;
+
+        if (value === '') {
+          searchParams.delete('query');
+          setSearchParams(searchParams);
+        } else {
+          setSearchParams({ query: value });
+        }
+      }}
+    />
+  );
+};
diff --git a/src/components/NameFilter/index.ts b/src/components/NameFilter/index.ts
new file mode 100644
index 000000000..844e198b0
--- /dev/null
+++ b/src/components/NameFilter/index.ts
@@ -0,0 +1 @@
+export * from './NameFilter';
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
new file mode 100644
index 000000000..a18e6ad58
--- /dev/null
+++ b/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) => {
+  return classNames('navbar-item', {
+    'has-background-grey-lighter': isActive,
+  });
+};
+
+export const Navbar: React.FC = () => {
+  return (
+    <nav
+      data-cy="nav"
+      className="navbar is-fixed-top has-shadow"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div className="container">
+        <div className="navbar-brand">
+          <NavLink className={getLinkClass} to="/">
+            Home
+          </NavLink>
+
+          <NavLink className={getLinkClass} to="/people">
+            People
+          </NavLink>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts
new file mode 100644
index 000000000..e8a656233
--- /dev/null
+++ b/src/components/Navbar/index.ts
@@ -0,0 +1 @@
+export * from './Navbar';
diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 000000000..87fe719a7
--- /dev/null
+++ b/src/components/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,3 @@
+export const NotFoundPage = () => {
+  return <h1 className="title">Page not found</h1>;
+};
diff --git a/src/components/NotFoundPage/index.ts b/src/components/NotFoundPage/index.ts
new file mode 100644
index 000000000..6197aa75a
--- /dev/null
+++ b/src/components/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index c9c819cd3..2f46c08fc 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -1,28 +1,33 @@
+import { NameFilter } from './NameFilter';
+import { CenturyFilter } from './CenturyFilter';
+import { useSearchParams } from 'react-router-dom';
+
 export const PeopleFilters = () => {
+  const [searchParams] = useSearchParams();
+  const sex = searchParams.get('sex');
+
   return (
     <nav className="panel">
       <p className="panel-heading">Filters</p>
 
       <p className="panel-tabs" data-cy="SexFilter">
-        <a className="is-active" href="#/people">
+        <a
+          className={sex !== 'm' && sex !== 'f' ? 'is-active' : ''}
+          href="#/people"
+        >
           All
         </a>
-        <a className="" href="#/people?sex=m">
+        <a className={sex === 'm' ? 'is-active' : ''} href="#/people?sex=m">
           Male
         </a>
-        <a className="" href="#/people?sex=f">
+        <a className={sex === 'f' ? 'is-active' : ''} href="#/people?sex=f">
           Female
         </a>
       </p>
 
       <div className="panel-block">
         <p className="control has-icons-left">
-          <input
-            data-cy="NameFilter"
-            type="search"
-            className="input"
-            placeholder="Search"
-          />
+          <NameFilter />
 
           <span className="icon is-left">
             <i className="fas fa-search" aria-hidden="true" />
@@ -31,59 +36,7 @@ export const PeopleFilters = () => {
       </div>
 
       <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>
-          </div>
-
-          <div className="level-right ml-4">
-            <a
-              data-cy="centuryALL"
-              className="button is-success is-outlined"
-              href="#/people"
-            >
-              All
-            </a>
-          </div>
-        </div>
+        <CenturyFilter />
       </div>
 
       <div className="panel-block">
diff --git a/src/components/PeoplePage/PeoplePage.tsx b/src/components/PeoplePage/PeoplePage.tsx
new file mode 100644
index 000000000..e575d404d
--- /dev/null
+++ b/src/components/PeoplePage/PeoplePage.tsx
@@ -0,0 +1,160 @@
+import { PeopleFilters } from '../PeopleFilters';
+import { Loader } from '../Loader';
+import { PeopleTable } from '../PeopleTable';
+import { useEffect, useState } from 'react';
+import { getPeople } from '../../api';
+import { Person } from '../../types';
+import { useSearchParams } from 'react-router-dom';
+
+export const PeoplePage = () => {
+  const [people, setPeople] = useState<Person[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState('');
+  const [searchParams, setSearchParams] = useSearchParams();
+  const query = searchParams.get('query') || '';
+  const centuries = searchParams.getAll('centuries');
+  const sortBy = searchParams.get('sort');
+  const order = searchParams.get('order');
+
+  const isNoPeople = people.length === 0 && !isLoading && !errors;
+
+  const visiblePeople = people.filter(person => {
+    const lowerQuery = query.toLowerCase();
+    const sex = searchParams.get('sex');
+    const matchesSex = !sex || person.sex === sex;
+    const matchesQuery =
+      person.name.toLowerCase().includes(lowerQuery) ||
+      person.motherName?.toLowerCase().includes(lowerQuery) ||
+      person.fatherName?.toLowerCase().includes(lowerQuery);
+
+    if (centuries.length === 0) {
+      return matchesQuery && matchesSex;
+    }
+
+    const personCentury = Math.ceil(person.born / 100);
+    const matchesCentury = centuries.includes(String(personCentury));
+
+    return matchesCentury && matchesQuery && matchesSex;
+  });
+
+  visiblePeople.sort((personA, personB) => {
+    if (sortBy === 'name') {
+      if (order === 'asc') {
+        return personA.name.localeCompare(personB.name);
+      }
+
+      return personB.name.localeCompare(personA.name);
+    }
+
+    if (sortBy === 'sex') {
+      if (order === 'asc') {
+        return personA.sex.localeCompare(personB.sex);
+      }
+
+      return personB.sex.localeCompare(personA.sex);
+    }
+
+    if (sortBy === 'born') {
+      if (order === 'asc') {
+        return personA.born - personB.born;
+      }
+
+      return personB.born - personA.born;
+    }
+
+    if (sortBy === 'died') {
+      if (order === 'asc') {
+        return personA.died - personB.died;
+      }
+
+      return personB.died - personA.died;
+    }
+
+    return 0;
+  });
+
+  const handleSort = (field: string) => {
+    if (sortBy !== field) {
+      searchParams.set('sort', field);
+      searchParams.set('order', 'asc');
+    } else if (sortBy === field) {
+      if (order === 'asc') {
+        searchParams.set('order', 'desc');
+      } else if (order === 'desc') {
+        searchParams.delete('sort');
+        searchParams.delete('order');
+      }
+    }
+
+    setSearchParams(searchParams);
+  };
+
+  useEffect(() => {
+    setIsLoading(true);
+    getPeople()
+      .then(peopleFromServer => {
+        const peopleWithParents = peopleFromServer.map(person => {
+          const mother = peopleFromServer.find(
+            parent => parent.name === person.motherName,
+          );
+          const father = peopleFromServer.find(
+            parent => parent.name === person.fatherName,
+          );
+
+          return {
+            ...person,
+            father,
+            mother,
+          };
+        });
+
+        setPeople(peopleWithParents);
+      })
+      .catch(() => {
+        setErrors('Something went wrong');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  return (
+    <>
+      <h1 className="title">People Page</h1>
+      <div className="block">
+        <div className="columns is-desktop is-flex-direction-row-reverse">
+          <div className="column is-7-tablet is-narrow-desktop">
+            {!isLoading && <PeopleFilters />}
+          </div>
+
+          <div className="column">
+            <div className="box table-container">
+              {isLoading ? (
+                <Loader />
+              ) : errors ? (
+                <p data-cy="peopleLoadingError" className="has-text-danger">
+                  {errors}
+                </p>
+              ) : isNoPeople ? (
+                <p data-cy="noPeopleMessage">
+                  There are no people on the server
+                </p>
+              ) : visiblePeople.length !== 0 ? (
+                <PeopleTable
+                  people={visiblePeople}
+                  onSort={handleSort}
+                  sortBy={searchParams.get('sort')}
+                  order={searchParams.get('order')}
+                />
+              ) : (
+                <p data-cy="noPeopleMatchingCriteria">
+                  There are no people matching the current search criteria
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/PeoplePage/index.ts b/src/components/PeoplePage/index.ts
new file mode 100644
index 000000000..cf328da6f
--- /dev/null
+++ b/src/components/PeoplePage/index.ts
@@ -0,0 +1 @@
+export * from './PeoplePage';
diff --git a/src/components/PeopleTable.tsx b/src/components/PeopleTable.tsx
index fdd814b4a..8a31bd923 100644
--- a/src/components/PeopleTable.tsx
+++ b/src/components/PeopleTable.tsx
@@ -1,5 +1,25 @@
+import { Person } from '../types';
+import { PersonOfTable } from './PersonOfTable';
+import { useParams } from 'react-router-dom';
+
 /* eslint-disable jsx-a11y/control-has-associated-label */
-export const PeopleTable = () => {
+interface PeopleTableProps {
+  people: Person[];
+  onSort: (field: string) => void;
+  sortBy: string | null;
+  order: string | null;
+}
+
+export const PeopleTable = ({
+  people,
+  onSort,
+  sortBy,
+  order,
+}: PeopleTableProps) => {
+  const { slug } = useParams();
+
+  const selected = people.find(person => person.slug === slug);
+
   return (
     <table
       data-cy="peopleTable"
@@ -10,9 +30,21 @@ export const PeopleTable = () => {
           <th>
             <span className="is-flex is-flex-wrap-nowrap">
               Name
-              <a href="#/people?sort=name">
+              <a
+                href="#/people?sort=name"
+                onClick={event => {
+                  event.preventDefault();
+                  onSort('name');
+                }}
+              >
                 <span className="icon">
-                  <i className="fas fa-sort" />
+                  {sortBy === 'name' && order === 'asc' && (
+                    <i className="fas fa-sort-up" />
+                  )}
+                  {sortBy === 'name' && order === 'desc' && (
+                    <i className="fas fa-sort-down" />
+                  )}
+                  {sortBy !== 'name' && <i className="fas fa-sort" />}
                 </span>
               </a>
             </span>
@@ -21,9 +53,21 @@ export const PeopleTable = () => {
           <th>
             <span className="is-flex is-flex-wrap-nowrap">
               Sex
-              <a href="#/people?sort=sex">
+              <a
+                href="#/people?sort=sex"
+                onClick={event => {
+                  event.preventDefault();
+                  onSort('sex');
+                }}
+              >
                 <span className="icon">
-                  <i className="fas fa-sort" />
+                  {sortBy === 'sex' && order === 'asc' && (
+                    <i className="fas fa-sort-up" />
+                  )}
+                  {sortBy === 'sex' && order === 'desc' && (
+                    <i className="fas fa-sort-down" />
+                  )}
+                  {sortBy !== 'sex' && <i className="fas fa-sort" />}
                 </span>
               </a>
             </span>
@@ -32,9 +76,21 @@ export const PeopleTable = () => {
           <th>
             <span className="is-flex is-flex-wrap-nowrap">
               Born
-              <a href="#/people?sort=born&amp;order=desc">
+              <a
+                href="#/people?sort=born&amp;order=desc"
+                onClick={event => {
+                  event.preventDefault();
+                  onSort('born');
+                }}
+              >
                 <span className="icon">
-                  <i className="fas fa-sort-up" />
+                  {sortBy === 'born' && order === 'asc' && (
+                    <i className="fas fa-sort-up" />
+                  )}
+                  {sortBy === 'born' && order === 'desc' && (
+                    <i className="fas fa-sort-down" />
+                  )}
+                  {sortBy !== 'born' && <i className="fas fa-sort" />}
                 </span>
               </a>
             </span>
@@ -43,9 +99,21 @@ export const PeopleTable = () => {
           <th>
             <span className="is-flex is-flex-wrap-nowrap">
               Died
-              <a href="#/people?sort=died">
+              <a
+                href="#/people?sort=died"
+                onClick={event => {
+                  event.preventDefault();
+                  onSort('died');
+                }}
+              >
                 <span className="icon">
-                  <i className="fas fa-sort" />
+                  {sortBy === 'died' && order === 'asc' && (
+                    <i className="fas fa-sort-up" />
+                  )}
+                  {sortBy === 'died' && order === 'desc' && (
+                    <i className="fas fa-sort-down" />
+                  )}
+                  {sortBy !== 'died' && <i className="fas fa-sort" />}
                 </span>
               </a>
             </span>
@@ -57,588 +125,15 @@ export const PeopleTable = () => {
       </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 => {
+          return (
+            <PersonOfTable
+              person={person}
+              key={person.slug}
+              selected={selected}
+            />
+          );
+        })}
       </tbody>
     </table>
   );
diff --git a/src/components/PeopleTable/index.ts b/src/components/PeopleTable/index.ts
new file mode 100644
index 000000000..308bbf634
--- /dev/null
+++ b/src/components/PeopleTable/index.ts
@@ -0,0 +1 @@
+export * from '../PeopleTable';
diff --git a/src/components/PersonLink/PersonLink.tsx b/src/components/PersonLink/PersonLink.tsx
new file mode 100644
index 000000000..c12cb2a07
--- /dev/null
+++ b/src/components/PersonLink/PersonLink.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import { Person } from '../../types';
+import classNames from 'classnames';
+
+export const PersonLink = ({ person }: { person: Person }) => {
+  return (
+    <Link
+      to={`/people/${person.slug}`}
+      className={classNames({ 'has-text-danger': person.sex === 'f' })}
+    >
+      {person.name}
+    </Link>
+  );
+};
diff --git a/src/components/PersonLink/index.ts b/src/components/PersonLink/index.ts
new file mode 100644
index 000000000..87453ce6c
--- /dev/null
+++ b/src/components/PersonLink/index.ts
@@ -0,0 +1 @@
+export * from './PersonLink';
diff --git a/src/components/PersonOfTable/PersonOfTable.tsx b/src/components/PersonOfTable/PersonOfTable.tsx
new file mode 100644
index 000000000..dda46f7ed
--- /dev/null
+++ b/src/components/PersonOfTable/PersonOfTable.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Person } from '../../types';
+import { PersonLink } from '../PersonLink/PersonLink';
+import classNames from 'classnames';
+
+interface Props {
+  person: Person;
+  selected: Person | undefined;
+}
+
+export const PersonOfTable: React.FC<Props> = ({ person, selected }) => {
+  return (
+    <tr
+      data-cy="person"
+      className={classNames({
+        'has-background-warning': selected?.slug === person.slug,
+      })}
+    >
+      <td>
+        <PersonLink person={person} />
+      </td>
+
+      <td>{person.sex}</td>
+      <td>{person.born}</td>
+      <td>{person.died}</td>
+      <td>
+        {person.mother ? (
+          <PersonLink person={person.mother} />
+        ) : (
+          person.motherName || '-'
+        )}
+      </td>
+      <td>
+        {person.father ? (
+          <PersonLink person={person.father} />
+        ) : (
+          person.fatherName || '-'
+        )}
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/PersonOfTable/index.ts b/src/components/PersonOfTable/index.ts
new file mode 100644
index 000000000..0d21d2d42
--- /dev/null
+++ b/src/components/PersonOfTable/index.ts
@@ -0,0 +1 @@
+export * from './PersonOfTable';
diff --git a/src/index.tsx b/src/index.tsx
index d72ba5730..5c0e95b7c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter as Router } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
@@ -7,7 +7,7 @@ import '@fortawesome/fontawesome-free/css/all.css';
 import { App } from './App';
 
 createRoot(document.getElementById('root') as HTMLDivElement).render(
-  <Router>
+  <HashRouter>
     <App />
-  </Router>,
+  </HashRouter>,
 );
diff --git a/tsconfig.json b/tsconfig.json
index cfb168bb2..6c7614e0e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
   ],
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["node", "cypress"]
+    "types": ["node", "cypress"],
+    "jsx": "react-jsx"
   }
 }

From a13cb9410310c383c0c39e13eaaaf8b1be8400df Mon Sep 17 00:00:00 2001
From: Nazar <nazar.regalov@gmail.com>
Date: Fri, 5 Jun 2026 22:32:14 +0300
Subject: [PATCH 2/4] add func getSearcWith and correct ways

---
 src/components/NameFilter/NameFilter.tsx |  8 ++----
 src/components/PeopleFilters.tsx         | 36 ++++++++++++++++++------
 src/components/PeoplePage/PeoplePage.tsx | 34 ++++++++++++++++------
 src/components/PersonLink/PersonLink.tsx |  7 +++--
 src/helpers/getSearchWith.ts             | 21 ++++++++++++++
 5 files changed, 81 insertions(+), 25 deletions(-)
 create mode 100644 src/helpers/getSearchWith.ts

diff --git a/src/components/NameFilter/NameFilter.tsx b/src/components/NameFilter/NameFilter.tsx
index 40fb13959..d4f13b88f 100644
--- a/src/components/NameFilter/NameFilter.tsx
+++ b/src/components/NameFilter/NameFilter.tsx
@@ -1,4 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
+import { getSearchWith } from '../../helpers/getSearchWith';
 
 export const NameFilter = () => {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -14,12 +15,7 @@ export const NameFilter = () => {
       onChange={event => {
         const value = event.target.value;
 
-        if (value === '') {
-          searchParams.delete('query');
-          setSearchParams(searchParams);
-        } else {
-          setSearchParams({ query: value });
-        }
+        setSearchParams(getSearchWith({ searchParams, key: 'query', value }));
       }}
     />
   );
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index 2f46c08fc..a9e1cc43b 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -1,6 +1,7 @@
 import { NameFilter } from './NameFilter';
 import { CenturyFilter } from './CenturyFilter';
 import { useSearchParams } from 'react-router-dom';
+import { SearchLink } from './SearchLink';
 
 export const PeopleFilters = () => {
   const [searchParams] = useSearchParams();
@@ -11,18 +12,26 @@ export const PeopleFilters = () => {
       <p className="panel-heading">Filters</p>
 
       <p className="panel-tabs" data-cy="SexFilter">
-        <a
+        <SearchLink
           className={sex !== 'm' && sex !== 'f' ? 'is-active' : ''}
-          href="#/people"
+          params={{ sex: null }}
         >
           All
-        </a>
-        <a className={sex === 'm' ? 'is-active' : ''} href="#/people?sex=m">
+        </SearchLink>
+
+        <SearchLink
+          className={sex === 'm' ? 'is-active' : ''}
+          params={{ sex: 'm' }}
+        >
           Male
-        </a>
-        <a className={sex === 'f' ? 'is-active' : ''} href="#/people?sex=f">
+        </SearchLink>
+
+        <SearchLink
+          className={sex === 'f' ? 'is-active' : ''}
+          params={{ sex: 'f' }}
+        >
           Female
-        </a>
+        </SearchLink>
       </p>
 
       <div className="panel-block">
@@ -40,9 +49,18 @@ export const PeopleFilters = () => {
       </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"
+          params={{
+            query: null,
+            centuries: null,
+            sort: null,
+            order: null,
+            sex: null,
+          }}
+        >
           Reset all filters
-        </a>
+        </SearchLink>
       </div>
     </nav>
   );
diff --git a/src/components/PeoplePage/PeoplePage.tsx b/src/components/PeoplePage/PeoplePage.tsx
index e575d404d..6fedf3727 100644
--- a/src/components/PeoplePage/PeoplePage.tsx
+++ b/src/components/PeoplePage/PeoplePage.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { getPeople } from '../../api';
 import { Person } from '../../types';
 import { useSearchParams } from 'react-router-dom';
+import { getSearchWith } from '../../helpers/getSearchWith';
 
 export const PeoplePage = () => {
   const [people, setPeople] = useState<Person[]>([]);
@@ -37,7 +38,7 @@ export const PeoplePage = () => {
     return matchesCentury && matchesQuery && matchesSex;
   });
 
-  visiblePeople.sort((personA, personB) => {
+  [...visiblePeople].sort((personA, personB) => {
     if (sortBy === 'name') {
       if (order === 'asc') {
         return personA.name.localeCompare(personB.name);
@@ -74,19 +75,36 @@ export const PeoplePage = () => {
   });
 
   const handleSort = (field: string) => {
+    let newParams = getSearchWith({ searchParams, key: 'sort', value: field });
+
     if (sortBy !== field) {
-      searchParams.set('sort', field);
-      searchParams.set('order', 'asc');
+      newParams = getSearchWith({
+        searchParams: newParams,
+        key: 'order',
+        value: 'asc',
+      });
     } else if (sortBy === field) {
       if (order === 'asc') {
-        searchParams.set('order', 'desc');
+        newParams = getSearchWith({
+          searchParams: newParams,
+          key: 'order',
+          value: 'desc',
+        });
       } else if (order === 'desc') {
-        searchParams.delete('sort');
-        searchParams.delete('order');
+        newParams = getSearchWith({
+          searchParams: newParams,
+          key: 'sort',
+          value: null,
+        });
+        newParams = getSearchWith({
+          searchParams: newParams,
+          key: 'order',
+          value: null,
+        });
       }
     }
 
-    setSearchParams(searchParams);
+    setSearchParams(newParams);
   };
 
   useEffect(() => {
@@ -124,7 +142,7 @@ 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">
-            {!isLoading && <PeopleFilters />}
+            {!isLoading && people.length > 0 && <PeopleFilters />}
           </div>
 
           <div className="column">
diff --git a/src/components/PersonLink/PersonLink.tsx b/src/components/PersonLink/PersonLink.tsx
index c12cb2a07..05d32a138 100644
--- a/src/components/PersonLink/PersonLink.tsx
+++ b/src/components/PersonLink/PersonLink.tsx
@@ -1,11 +1,14 @@
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { Person } from '../../types';
 import classNames from 'classnames';
 
 export const PersonLink = ({ person }: { person: Person }) => {
+  const [searchParams] = useSearchParams();
+  const to = `/people/${person.slug}?${searchParams.toString()}`;
+
   return (
     <Link
-      to={`/people/${person.slug}`}
+      to={to}
       className={classNames({ 'has-text-danger': person.sex === 'f' })}
     >
       {person.name}
diff --git a/src/helpers/getSearchWith.ts b/src/helpers/getSearchWith.ts
new file mode 100644
index 000000000..8e8ba347b
--- /dev/null
+++ b/src/helpers/getSearchWith.ts
@@ -0,0 +1,21 @@
+interface SearchWithProps {
+  searchParams: URLSearchParams;
+  key: string;
+  value: string | null;
+}
+
+export const getSearchWith = ({
+  searchParams,
+  key,
+  value,
+}: SearchWithProps) => {
+  const newParams = new URLSearchParams(searchParams);
+
+  if (!value) {
+    newParams.delete(key);
+  } else {
+    newParams.set(key, value);
+  }
+
+  return newParams;
+};

From 928380064c02c9bd8997fd41d91ff039ca518b54 Mon Sep 17 00:00:00 2001
From: Nazar <nazar.regalov@gmail.com>
Date: Sat, 6 Jun 2026 11:37:47 +0300
Subject: [PATCH 3/4] add correct name for varible for sort

---
 src/components/PeoplePage/PeoplePage.tsx |  4 ++--
 src/helpers/getSearchWith.ts             | 19 ++++++++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/PeoplePage/PeoplePage.tsx b/src/components/PeoplePage/PeoplePage.tsx
index 6fedf3727..df84a5a34 100644
--- a/src/components/PeoplePage/PeoplePage.tsx
+++ b/src/components/PeoplePage/PeoplePage.tsx
@@ -38,7 +38,7 @@ export const PeoplePage = () => {
     return matchesCentury && matchesQuery && matchesSex;
   });
 
-  [...visiblePeople].sort((personA, personB) => {
+  const sortedPeople = [...visiblePeople].sort((personA, personB) => {
     if (sortBy === 'name') {
       if (order === 'asc') {
         return personA.name.localeCompare(personB.name);
@@ -159,7 +159,7 @@ export const PeoplePage = () => {
                 </p>
               ) : visiblePeople.length !== 0 ? (
                 <PeopleTable
-                  people={visiblePeople}
+                  people={sortedPeople}
                   onSort={handleSort}
                   sortBy={searchParams.get('sort')}
                   order={searchParams.get('order')}
diff --git a/src/helpers/getSearchWith.ts b/src/helpers/getSearchWith.ts
index 8e8ba347b..f4f4b7202 100644
--- a/src/helpers/getSearchWith.ts
+++ b/src/helpers/getSearchWith.ts
@@ -1,7 +1,9 @@
-interface SearchWithProps {
+export type SearchValue = string | null | undefined | string[];
+
+export interface SearchWithProps {
   searchParams: URLSearchParams;
   key: string;
-  value: string | null;
+  value: SearchValue;
 }
 
 export const getSearchWith = ({
@@ -11,9 +13,16 @@ export const getSearchWith = ({
 }: SearchWithProps) => {
   const newParams = new URLSearchParams(searchParams);
 
-  if (!value) {
-    newParams.delete(key);
-  } else {
+  newParams.delete(key);
+
+  if (Array.isArray(value)) {
+
+    value.forEach(element => {
+      if (element) {
+        newParams.append(key, element);
+      }
+    });
+  } else if (value) {
     newParams.set(key, value);
   }
 

From 53997de9df361207835517165e6254d3191d761f Mon Sep 17 00:00:00 2001
From: Nazar <nazar.regalov@gmail.com>
Date: Sat, 6 Jun 2026 11:57:01 +0300
Subject: [PATCH 4/4] change <a> on <SearchLink> in CenturyFilter

---
 .../CenturyFilter/CenturyFilter.tsx           | 37 ++++++-------------
 src/helpers/getSearchWith.ts                  |  1 -
 2 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/components/CenturyFilter/CenturyFilter.tsx b/src/components/CenturyFilter/CenturyFilter.tsx
index def6d05c5..c685a6702 100644
--- a/src/components/CenturyFilter/CenturyFilter.tsx
+++ b/src/components/CenturyFilter/CenturyFilter.tsx
@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
+import { SearchLink } from '../SearchLink';
 
 export const CenturyFilter = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   const CENTURIES = ['16', '17', '18', '19', '20'];
   const values = searchParams.getAll('centuries');
@@ -12,48 +13,32 @@ export const CenturyFilter = () => {
       <div className="level-left">
         {CENTURIES.map(century => {
           return (
-            <a
+            <SearchLink
               key={century}
               data-cy="century"
               className={classNames('button mr-1', {
                 'is-info': values.includes(century),
               })}
-              href={`#/people?centuries=${century}`}
-              onClick={event => {
-                event.preventDefault();
-                if (values.includes(century)) {
-                  const newValues = values.filter(value => value !== century);
-
-                  searchParams.delete('centuries');
-                  newValues.forEach(value =>
-                    searchParams.append('centuries', value),
-                  );
-                } else {
-                  searchParams.append('centuries', century);
-                }
-
-                setSearchParams(searchParams);
+              params={{
+                centuries: values.includes(century)
+                  ? values.filter(value => value !== century)
+                  : [...values, century],
               }}
             >
               {century}
-            </a>
+            </SearchLink>
           );
         })}
       </div>
 
       <div className="level-right ml-4">
-        <a
+        <SearchLink
           data-cy="centuryALL"
           className="button is-success is-outlined"
-          href="#/people"
-          onClick={event => {
-            event.preventDefault();
-            searchParams.delete('centuries');
-            setSearchParams(searchParams);
-          }}
+          params={{ centuries: null}}
         >
           All
-        </a>
+        </SearchLink>
       </div>
     </div>
   );
diff --git a/src/helpers/getSearchWith.ts b/src/helpers/getSearchWith.ts
index f4f4b7202..b8afa9322 100644
--- a/src/helpers/getSearchWith.ts
+++ b/src/helpers/getSearchWith.ts
@@ -16,7 +16,6 @@ export const getSearchWith = ({
   newParams.delete(key);
 
   if (Array.isArray(value)) {
-
     value.forEach(element => {
       if (element) {
         newParams.append(key, element);