solution

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,20 +1,47 @@
-import { PeoplePage } from './components/PeoplePage';
 import { Navbar } from './components/Navbar';
 
 import './App.scss';
+import { Outlet } from 'react-router-dom';
+import { useContext, useEffect } from 'react';
+import { Person } from './types';
+import { getPeople } from './api';
+import { PeopleContext } from './contexts/PeopleContext';
+import { ErrorContext } from './contexts/ErrorContext';
+import { LoaderContext } from './contexts/LoaderContext';
 
 export const App = () => {
+  const { setPeoples } = useContext(PeopleContext);
+  const { setErrorMessage } = useContext(ErrorContext);
+  const { setLoader } = useContext(LoaderContext);
+
+  useEffect(() => {
+    setLoader(true);
+
+    getPeople()
+      .then((loadPeoples: Person[]) => {
+        setPeoples(loadPeoples);
+
+        if (loadPeoples.length > 0) {
+          setErrorMessage('');
+        }
+      })
+      .catch(() => {
+        setErrorMessage('Something went wrong');
+      })
+      .finally(() => {
+        setLoader(false);
+      });
+  }, []);
+
   return (
     <div data-cy="app">
       <Navbar />
 
-      <div className="section">
+      <main className="section">
         <div className="container">
-          <h1 className="title">Home Page</h1>
-          <h1 className="title">Page not found</h1>
-          <PeoplePage />
+          <Outlet />
         </div>
-      </div>
+      </main>
     </div>
   );
 };

src/components/Navbar.tsx

@@ -1,4 +1,10 @@
+import { NavLink } from 'react-router-dom';
+import cn from 'classnames';
+
 export const Navbar = () => {
+  const isActiveStyleLinks = ({ isActive }: { isActive: boolean }) =>
+    cn('navbar-item', { 'has-background-grey-lighter': isActive });
+
   return (
     <nav
       data-cy="nav"
@@ -8,17 +14,13 @@ export const Navbar = () => {
     >
       <div className="container">
         <div className="navbar-brand">
-          <a className="navbar-item" href="#/">
+          <NavLink className={isActiveStyleLinks} to="/">
             Home
-          </a>
+          </NavLink>
 
-          <a
-            aria-current="page"
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
-          >
+          <NavLink className={isActiveStyleLinks} to="/people">
             People
-          </a>
+          </NavLink>
         </div>
       </div>
     </nav>

src/components/PeopleFilters.tsx

@@ -1,18 +1,146 @@
+import { useContext, useEffect } from 'react';
+import { SearchLink } from './SearchLink';
+import { PeopleContext } from '../contexts/PeopleContext';
+import { Person } from '../types';
+import cn from 'classnames';
+import { PeopleFilteredContext } from '../contexts/PeopleFilteredContext';
+import { useSearchParams } from 'react-router-dom';
+
+enum Sex {
+  'All' = 'All',
+  'Male' = 'Male',
+  'Female' = 'Female',
+}
+
+enum Centuries {
+  C16 = 16,
+  C17 = 17,
+  C18 = 18,
+  C19 = 19,
+  C20 = 20,
+}
+
 export const PeopleFilters = () => {
+  const { peoples } = useContext(PeopleContext);
+  const { setPeoplesFiltered } = useContext(PeopleFilteredContext);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const selectedSex = (searchParams.get('selectedSex') as Sex) || Sex.All;
+  const inputValue = searchParams.get('inputValue') || '';
+  const listCenturies = searchParams
+    .getAll('listCenturies')
+    .map(Number)
+    .filter((c): c is Centuries => Object.values(Centuries).includes(c));
+
+  const calculateCentury = (year: number): number => {
+    return Math.floor((year - 1) / 100) + 1;
+  };
+
+  const filterPeople = () => {
+    let filteredList = peoples;
+
+    if (selectedSex === Sex.Male) {
+      filteredList = filteredList.filter(
+        (person: Person) => person.sex === 'm',
+      );
+    } else if (selectedSex === Sex.Female) {
+      filteredList = filteredList.filter(
+        (person: Person) => person.sex === 'f',
+      );
+    }
+
+    const query = inputValue.trim().toLowerCase();
+
+    if (query) {
+      filteredList = filteredList.filter(
+        (person: Person) =>
+          person.name.toLowerCase().includes(query) ||
+          person.fatherName?.toLowerCase().includes(query) ||
+          person.motherName?.toLowerCase().includes(query),
+      );
+    }
+
+    if (listCenturies.length > 0) {
+      filteredList = filteredList.filter((person: Person) => {
+        const birthCentury = calculateCentury(person.born);
+
+        return listCenturies.includes(birthCentury as Centuries);
+      });
+    }
+
+    setPeoplesFiltered(filteredList);
+  };
+
+  useEffect(() => {
+    filterPeople();
+  }, [selectedSex, inputValue, peoples, listCenturies]);
+
+  const handleSexClick = (sex: Sex) => {
+    const params = new URLSearchParams(searchParams);
+
+    if (sex === Sex.All) {
+      params.delete('selectedSex');
+    } else {
+      params.set('selectedSex', sex);
+    }
+
+    setSearchParams(params);
+  };
+
+  const handleInputChanges = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const params = new URLSearchParams(searchParams);
+
+    const value = ev.target.value;
+
+    if (value) {
+      params.set('inputValue', value);
+    } else {
+      params.delete('inputValue');
+    }
+
+    setSearchParams(params);
+  };
+
+  const resetFilter = () => {
+    setSearchParams({});
+  };
+
+  const handleCentury = (century: Centuries) => {
+    const params = new URLSearchParams(searchParams);
+
+    const updatedCenturies = listCenturies.includes(century)
+      ? listCenturies.filter(c => c !== century)
+      : [...listCenturies, century];
+
+    params.delete('listCenturies');
+    updatedCenturies.forEach(c => params.append('listCenturies', c.toString()));
+
+    setSearchParams(params);
+  };
+
+  const clearCenturies = () => {
+    const params = new URLSearchParams(searchParams);
+
+    params.delete('listCenturies');
+    setSearchParams(params);
+  };
+
   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>
+        {Object.values(Sex).map(sex => (
+          <SearchLink
+            key={sex}
+            params={{ selectedSex: sex === Sex.All ? null : sex }}
+            className={selectedSex === sex ? 'is-active' : ''}
+            onClick={() => handleSexClick(sex)}
+          >
+            {sex}
+          </SearchLink>
+        ))}
       </p>
 
       <div className="panel-block">
@@ -22,8 +150,9 @@
             type="search"
             className="input"
             placeholder="Search"
+            value={inputValue}
+            onChange={handleInputChanges}
           />
-
           <span className="icon is-left">
             <i className="fas fa-search" aria-hidden="true" />
           </span>
@@ -33,63 +162,41 @@
       <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>
+            {Object.values(Centuries)
+              .filter((c): c is Centuries => typeof c === 'number')
+              .map(c => (
+                <button
+                  key={c}
+                  data-cy="century"
+                  className={cn('button mr-1', {
+                    'is-info': listCenturies.includes(c),
+                  })}
+                  onClick={() => handleCentury(c)}
+                >
+                  {c}
+                </button>
+              ))}
           </div>
 
           <div className="level-right ml-4">
-            <a
+            <button
               data-cy="centuryALL"
               className="button is-success is-outlined"
-              href="#/people"
+              onClick={clearCenturies}
             >
               All
-            </a>
+            </button>
           </div>
         </div>
       </div>
 
       <div className="panel-block">
-        <a className="button is-link is-outlined is-fullwidth" href="#/people">
+        <button
+          className="button is-link is-outlined is-fullwidth"
+          onClick={resetFilter}
+        >
           Reset all filters
-        </a>
+        </button>
       </div>
     </nav>
   );