implement the ability to filter and sort people in the table

src/App.tsx

@@ -1,18 +1,16 @@
-import { PeoplePage } from './components/PeoplePage';
-import { Navbar } from './components/Navbar';
-
+import { Outlet } from 'react-router-dom';
 import './App.scss';
 
+import { Navbar } from './components/Navbar/Navbar';
+
 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 />
+          <Outlet />
         </div>
       </div>
     </div>

src/Root.tsx

@@ -0,0 +1,25 @@
+import {
+  Navigate,
+  Route,
+  HashRouter as Router,
+  Routes,
+} from 'react-router-dom';
+
+import { App } from './App';
+import { HomePage } from './pages/HomePage';
+import { PeoplePage } from './pages/PeoplePage';
+import { NotFoundPage } from './pages/NotFoundPage';
+
+export const Root = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<App />}>
+        <Route index element={<HomePage />} />
+        <Route path="home" element={<Navigate to="/" replace />} />
+        <Route path="people" element={<PeoplePage />} />
+        <Route path="people/:slug?" element={<PeoplePage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Route>
+    </Routes>
+  </Router>
+);

src/api.ts

@@ -3,6 +3,29 @@ import { Person } from './types/Person';
 // eslint-disable-next-line max-len
 const API_URL = 'https://mate-academy.github.io/react_people-table/api/people.json';
 
+export const NOT_SET_VALUE = '-';
+
+export enum ColumnNames {
+  Name = 'Name',
+  Sex = 'Sex',
+  Born = 'Born',
+  Died = 'Died',
+}
+
+export enum PersonSex {
+  All = '',
+  Male = 'm',
+  Female = 'f',
+}
+
+export type FilterType = {
+  query: string | '';
+  centuries: string[];
+  sex: string | '';
+};
+
+export const CENTURIES = ['16', '17', '18', '19', '20'];
+
 function wait(delay: number) {
   return new Promise(resolve => setTimeout(resolve, delay));
 }
@@ -13,3 +36,90 @@ export async function getPeople(): Promise<Person[]> {
     .then(() => fetch(API_URL))
     .then(response => response.json());
 }
+
+function getParent(people: Person[], parentName: string) {
+  return people.find(({ name }) => name === parentName);
+}
+
+export function addParent(people: Person[]) {
+  return people.map(person => {
+    let mother;
+    let father;
+
+    if (person.motherName) {
+      mother = getParent(people, person.motherName);
+    }
+
+    if (person.fatherName) {
+      father = getParent(people, person.fatherName);
+    }
+
+    return {
+      ...person,
+      mother,
+      father,
+    };
+  });
+}
+
+export const sortPeople = (people: Person[], sortParam: string) => {
+  if (sortParam) {
+    return [...people].sort((a, b) => {
+      switch (sortParam) {
+        case ('name'): {
+          return a[sortParam].localeCompare(b[sortParam]);
+        }
+
+        case ('sex'): {
+          return a[sortParam].localeCompare(b[sortParam]);
+        }
+
+        case ('born'): {
+          return a[sortParam] - (b[sortParam]);
+        }
+
+        case ('died'): {
+          return a[sortParam] - (b[sortParam]);
+        }
+
+        default: {
+          return 0;
+        }
+      }
+    });
+  }
+
+  return [...people];
+};
+
+export const filterPeople = (
+  filterOption: FilterType,
+  people: Person[],
+) => {
+  return people
+    .filter(person => {
+      if (filterOption.sex) {
+        return person.sex === filterOption.sex;
+      }
+
+      return person;
+    })
+    .filter(person => {
+      if (filterOption.centuries.length) {
+        const personBirthCentury = Math.ceil(person.born / 100);
+
+        return filterOption.centuries.includes(personBirthCentury.toString());
+      }
+
+      return person;
+    })
+    .filter(person => {
+      if (filterOption.query) {
+        return person.name.includes(filterOption.query)
+        || person.motherName?.includes(filterOption.query)
+        || person.fatherName?.includes(filterOption.query);
+      }
+
+      return person;
+    });
+};

src/components/ColumnNameItem/ColumnNameItem.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { ColumnNames } from '../../api';
+import { SearchLink } from '../SearchLink';
+
+type Props = {
+  value: keyof typeof ColumnNames,
+};
+
+export const ColumnName: React.FC<Props> = ({ value }) => {
+  const [searchParams] = useSearchParams();
+
+  const lowerCasedValue = value.toLowerCase();
+
+  const sort = searchParams.get('sort') || '';
+  const order = searchParams.get('order') || '';
+
+  const getSortParams = (sortOption: string) => {
+    if (sortOption !== sort) {
+      return { sort: sortOption, order: null };
+    }
+
+    if (sort === sortOption && !order) {
+      return { sort: sortOption, order: 'desc' };
+    }
+
+    return { sort: null, order: null };
+  };
+
+  return (
+    <th key={value}>
+      <span className="is-flex is-flex-wrap-nowrap">
+        {value}
+        <SearchLink
+          params={getSortParams(lowerCasedValue)}
+        >
+          <span className="icon">
+            {lowerCasedValue !== sort && (<i className="fas fa-sort" />)}
+            {lowerCasedValue === sort && !order && (
+              <i className="fas fa-sort-up" />
+            )}
+            {order && lowerCasedValue === sort && (
+              <i className="fas fa-sort-down" />
+            )}
+          </span>
+        </SearchLink>
+      </span>
+    </th>
+  );
+};

src/components/ColumnNameItem/index.ts

@@ -0,0 +1 @@
+export * from './ColumnNameItem';

src/components/FilterCenturyItem/FilterCenturyItem.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import cn from 'classnames';
+import { SearchLink } from '../SearchLink';
+
+type Props = {
+  value: string,
+};
+
+export const CenturyItem: React.FC<Props> = ({ value }) => {
+  const [searchParams] = useSearchParams();
+  const centuries = searchParams.getAll('centuries') || [];
+  const isSelected = centuries.includes(value);
+
+  const toggleCentury = (curCentury: string) => {
+    return centuries.includes(curCentury)
+      ? centuries.filter((age: string) => age !== curCentury)
+      : [...centuries, curCentury];
+  };
+
+  return (
+    <SearchLink
+      data-cy="century"
+      className={cn(
+        'button',
+        'mr-1',
+        { 'is-info': isSelected },
+      )}
+      params={{ centuries: toggleCentury(value) }}
+    >
+      {value}
+    </SearchLink>
+  );
+};

src/components/FilterCenturyItem/index.ts

@@ -0,0 +1 @@
+export * from './FilterCenturyItem';

src/components/FilterSexItem/FilterSexItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import cn from 'classnames';
+
+import { SearchLink } from '../SearchLink';
+import { PersonSex } from '../../api';
+
+type Props = {
+  sexValue: keyof typeof PersonSex,
+};
+
+export const PersonSexItem: React.FC<Props> = ({ sexValue }) => {
+  const [searchParams] = useSearchParams();
+  const sex = searchParams.get('sex') || '';
+  let sexParam: string | null = PersonSex[sexValue];
+  let isActive = sex === sexParam;
+
+  if (sexValue === 'All') {
+    sexParam = null;
+    isActive = !sex;
+  }
+
+  return (
+    <SearchLink
+      className={cn(
+        { 'is-active': isActive },
+      )}
+      params={{ sex: sexParam }}
+    >
+      {sexValue}
+    </SearchLink>
+  );
+};

src/components/FilterSexItem/index.ts

@@ -0,0 +1 @@
+export * from './FilterSexItem';

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,35 @@
+import { NavLink } from 'react-router-dom';
+import cn from 'classnames';
+
+export const Navbar = () => {
+  const getLinkClass = ({ isActive }: { isActive: boolean }) => cn(
+    'navbar-item',
+    { 'has-background-grey-lighter': isActive },
+  );
+
+  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
+            aria-current="page"
+            className={getLinkClass}
+            to="/people"
+          >
+            People
+          </NavLink>
+        </div>
+      </div>
+    </nav>
+  );
+};

src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export * from './Navbar';