Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete Task #1726

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Complete Task #1726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 4 additions & 156 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,166 +1,14 @@
import { Loader } from './components/Loader';

import './App.scss';
import { Header } from './components/Header';
import { Outlet } from 'react-router-dom';

export const App = () => (
<div data-cy="app">
<nav
data-cy="nav"
className="navbar is-fixed-top has-shadow"
role="navigation"
aria-label="main navigation"
>
<div className="container">
<div className="navbar-brand">
<a className="navbar-item" href="#/">
Home
</a>

<a
className="navbar-item has-background-grey-lighter"
href="#/people"
>
People
</a>
</div>
</div>
</nav>
<Header />

<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>
Expand Down
25 changes: 25 additions & 0 deletions src/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 { PeopleProvider } from './store/peopleContext';

export const Root = () => (
<PeopleProvider>
<Router>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<HomePage />} />
<Route path="home" element={<Navigate to=".." />} />
<Route path="people/:persSlug?" element={<PeoplePage />} />
<Route path="*" element={<h1 className="title">Page not found</h1>} />
</Route>
</Routes>
</Router>
</PeopleProvider>
);
30 changes: 30 additions & 0 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import classNames from 'classnames';
import { NavLink } from 'react-router-dom';

const getLinkClass = ({ isActive }: { isActive: boolean }) =>
classNames('navbar-item', {
'has-background-grey-lighter': isActive,
});

export const Header = () => {
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>
);
};
1 change: 1 addition & 0 deletions src/components/Header/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Header';
0 src/components/Loader/index.tsx → src/components/Loader/index.ts
View file
Open in desktop
File renamed without changes.
72 changes: 72 additions & 0 deletions src/components/PeopleItem/PeopleItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { useContext } from 'react';
import { Person } from '../../types';
import { useParams } from 'react-router-dom';
import { PeopleContext } from '../../store/peopleContext';
import classNames from 'classnames';

type Props = {
person: Person;
};

export const PeopleItem: React.FC<Props> = ({ person }) => {
const { persSlug } = useParams();
const currPerson = { ...person };
const { people } = useContext(PeopleContext);

if (person.motherName) {
currPerson.mother = people.find(p => p.name === person.motherName);
}

if (person.fatherName) {
currPerson.father = people.find(p => p.name === person.fatherName);
}

return (
<tr
data-cy="person"
className={classNames({
'has-background-warning': persSlug === currPerson.slug,
})}
>
<td>
<a
className={classNames({ 'has-text-danger': person.sex === 'f' })}
href={`#/people/${currPerson.slug}`}
>
{currPerson.name}
</a>
</td>

<td>{currPerson.sex}</td>
<td>{currPerson.born}</td>
<td>{currPerson.died}</td>

<td>
{currPerson.mother ? (
<a
className="has-text-danger"
href={`#/people/${currPerson.mother?.slug}`}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that currPerson.mother?.slug is defined before accessing it. If slug is not guaranteed to be present, consider adding a check or default value.

>
{currPerson.motherName}
</a>
) : currPerson.motherName ? (
currPerson.motherName
) : (
'-'
)}
</td>

<td>
{currPerson.father ? (
<a href={`#/people/${currPerson.father.slug}`}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that currPerson.father.slug is defined before accessing it. If slug is not guaranteed to be present, consider adding a check or default value.

{currPerson.fatherName}
</a>
) : currPerson.fatherName ? (
currPerson.fatherName
) : (
'-'
)}
</td>
</tr>
);
};
1 change: 1 addition & 0 deletions src/components/PeopleItem/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './PeopleItem';
50 changes: 50 additions & 0 deletions src/components/PeopleTable/PeopleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { useContext } from 'react';
import { PeopleContext } from '../../store/peopleContext';
import { PeopleItem } from '../PeopleItem';

export const PeopleTable = () => {
const { people } = useContext(PeopleContext);

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, index) => (
<PeopleItem key={index} person={person} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using a unique identifier from the person object, such as person.id or person.slug, for the key prop instead of the array index. This helps React optimize rendering performance.

))}

{/* <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> */}
</tbody>
</table>
);
};
1 change: 1 addition & 0 deletions src/components/PeopleTable/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './PeopleTable';
9 changes: 2 additions & 7 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />);
3 changes: 3 additions & 0 deletions src/pages/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const HomePage = () => {
return <h1 className="title">Home Page</h1>;
};
1 change: 1 addition & 0 deletions src/pages/HomePage/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './HomePage';
Loading
Loading