add task solution

README.md

@@ -25,4 +25,4 @@ Implement the `App` with 2 pages and ability to select a person 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-basics/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://Mariagosp.github.io/react_people-table-basics/) and add it to the PR description.

src/App.tsx

@@ -1,6 +1,9 @@
-import { Loader } from './components/Loader';
-
+import { NavLink, Outlet } from 'react-router-dom';
 import './App.scss';
+import cn from 'classnames';
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+  cn('navbar-item', { 'has-background-grey-lighter': isActive });
 
 export const App = () => (
   <div data-cy="app">
@@ -12,155 +15,20 @@ export const App = () => (
     >
       <div className="container">
         <div className="navbar-brand">
-          <a className="navbar-item" href="#/">
+          <NavLink className={getLinkClass} to="/">
             Home
-          </a>
+          </NavLink>
 
-          <a
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
-          >
+          <NavLink className={getLinkClass} to="/people">
             People
-          </a>
+          </NavLink>
         </div>
       </div>
     </nav>
 
     <main className="section">
       <div className="container">
-        <h1 className="title">Home Page</h1>
-        <h1 className="title">People Page</h1>
-        <h1 className="title">Page not found</h1>
-
-        <div className="block">
-          <div className="box table-container">
-            <Loader />
-
-            <p data-cy="peopleLoadingError" className="has-text-danger">
-              Something went wrong
-            </p>
-
-            <p data-cy="noPeopleMessage">There are no people on the server</p>
-
-            <table
-              data-cy="peopleTable"
-              className="table is-striped is-hoverable is-narrow is-fullwidth"
-            >
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Sex</th>
-                  <th>Born</th>
-                  <th>Died</th>
-                  <th>Mother</th>
-                  <th>Father</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                <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/philibert-haverbeke-1907">
-                      Philibert Haverbeke
-                    </a>
-                  </td>
-
-                  <td>m</td>
-                  <td>1907</td>
-                  <td>1997</td>
-
-                  <td>
-                    <a
-                      className="has-text-danger"
-                      href="#/people/emma-de-milliano-1876"
-                    >
-                      Emma de Milliano
-                    </a>
-                  </td>
-
-                  <td>
-                    <a href="#/people/emile-haverbeke-1877">Emile Haverbeke</a>
-                  </td>
-                </tr>
-
-                <tr data-cy="person" className="has-background-warning">
-                  <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/lievijne-jans-1542"
-                    >
-                      Lievijne Jans
-                    </a>
-                  </td>
-
-                  <td>f</td>
-                  <td>1542</td>
-                  <td>1582</td>
-                  <td>-</td>
-                  <td>-</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>
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <Outlet />
       </div>
     </main>
   </div>

src/Root.tsx

@@ -0,0 +1,30 @@
+import {
+  HashRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from 'react-router-dom';
+import { App } from './App';
+import { HomePage } from './pages/HomePage';
+import { PeoplePage } from './pages/PeoplePage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { PeopleProvider } from './context/PeopleProvider';
+
+export const Root = () => (
+  <Router>
+    <PeopleProvider>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index 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 />} />
+        </Route>
+      </Routes>
+    </PeopleProvider>
+  </Router>
+);

src/components/PeopleTable.tsx

@@ -0,0 +1,67 @@
+import { useContext } from 'react';
+import { PeopleContext } from '../context/PeopleContext';
+import { useLocation } from 'react-router-dom';
+import cn from 'classnames';
+import { PersonLink } from './PersonLink';
+
+export const PeopleTable = () => {
+  const { people } = useContext(PeopleContext);
+
+  const location = useLocation();
+
+  return (
+    <table
+      data-cy="peopleTable"
+      className="table is-striped is-hoverable is-narrow is-fullwidth"
+    >
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Sex</th>
+          <th>Born</th>
+          <th>Died</th>
+          <th>Mother</th>
+          <th>Father</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {people.map(person => {
+          const isSelected = location.pathname === `/people/${person.slug}`;
+          const mother = people.find(p => p.name === person.motherName);
+          const father = people.find(p => p.name === person.fatherName);
+
+          return (
+            <tr
+              data-cy="person"
+              key={person.slug}
+              className={cn({ 'has-background-warning': isSelected })}
+            >
+              <td>
+                <PersonLink person={person} />
+              </td>
+
+              <td>{person.sex}</td>
+              <td>{person.born}</td>
+              <td>{person.died}</td>
+              <td>
+                {mother ? (
+                  <PersonLink person={mother} />
+                ) : (
+                  person.motherName || '-'
+                )}
+              </td>
+              <td>
+                {father ? (
+                  <PersonLink person={father} />
+                ) : (
+                  person.fatherName || '-'
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};

src/components/PersonLink.tsx

@@ -0,0 +1,20 @@
+import { Person } from '../types';
+import { Link } from 'react-router-dom';
+import cn from 'classnames';
+
+type Props = {
+  person: Person | undefined;
+};
+
+export const PersonLink: React.FC<Props> = props => {
+  const { person } = props;
+
+  return (
+    <Link
+      to={`/people/${person?.slug}`}
+      className={cn({ 'has-text-danger': person?.sex === 'f' })}
+    >
+      {person?.name}
+    </Link>
+  );
+};

src/context/PeopleContext.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Person } from '../types';
+
+type PeopleContextType = {
+  people: Person[];
+  isLoading: boolean;
+  errorMessage: string;
+};
+
+export const PeopleContext = React.createContext<PeopleContextType>({
+  people: [],
+  isLoading: true,
+  errorMessage: '',
+});

src/context/PeopleProvider.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { PeopleContext } from './PeopleContext';
+import { Person } from '../types';
+import { getPeople } from '../api';
+
+type PeopleProviderType = {
+  children: React.ReactNode;
+};
+
+export const PeopleProvider: React.FC<PeopleProviderType> = props => {
+  const { children } = props;
+
+  const [people, setPeople] = useState<Person[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  useEffect(() => {
+    setIsLoading(true);
+
+    getPeople()
+      .then(setPeople)
+      .catch(() => {
+        setErrorMessage('Something went wrong');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  const value = {
+    people,
+    isLoading,
+    errorMessage,
+  };
+
+  return (
+    <PeopleContext.Provider value={value}>{children}</PeopleContext.Provider>
+  );
+};

src/index.tsx

@@ -1,13 +1,8 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter as Router } from 'react-router-dom';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 
-import { App } from './App';
+import { Root } from './Root';
 
-createRoot(document.getElementById('root') as HTMLDivElement).render(
-  <Router>
-    <App />
-  </Router>,
-);
+createRoot(document.getElementById('root') as HTMLDivElement).render(<Root />);

src/pages/HomePage.tsx

@@ -0,0 +1,3 @@
+export const HomePage = () => {
+  return <h1 className="title">Home Page</h1>;
+};

src/pages/NotFoundPage.tsx

@@ -0,0 +1,3 @@
+export const NotFoundPage = () => {
+  return <h1 className="title">Page not found</h1>;
+};