;
+ }
+
+ return sortOrder === 'desc' ? (
+ 
+ ) : (
+ 
+ );
+ };
+
+ const isActive = (field: SortBy) => sortBy === field;
+
+ return (
+ | onSort('name')} + style={{ cursor: 'pointer' }} + > + name {renderSortIcon('name')} + | + +onSort('sex')} + style={{ cursor: 'pointer' }} + > + sex {renderSortIcon('sex')} + | + +onSort('born')} + style={{ cursor: 'pointer' }} + > + born {renderSortIcon('born')} + | + +onSort('died')} + style={{ cursor: 'pointer' }} + > + died {renderSortIcon('died')} + | + +mother | +father | +
|---|
Home page
; diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx new file mode 100644 index 00000000..a7c48762 --- /dev/null +++ b/src/pages/NotFoundPage.tsx @@ -0,0 +1 @@ +export const NotFoundPage = () =>Page not found
; diff --git a/src/pages/PeoplePage.tsx b/src/pages/PeoplePage.tsx new file mode 100644 index 00000000..05999970 --- /dev/null +++ b/src/pages/PeoplePage.tsx @@ -0,0 +1,167 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { useParams, useSearchParams } from 'react-router-dom'; +import { getPeople } from '../api/people'; +import { Loader } from '../components/Loader'; +import { PeopleTable } from '../components/PeopleTable/PeopleTable'; +import { PersonWithParents } from '../types/Person'; + +type SortBy = 'name' | 'sex' | 'born' | 'died'; +type SortOrder = 'asc' | 'desc'; + +const VALID_SORT_BY: SortBy[] = ['name', 'sex', 'born', 'died']; + +function isValidSortBy(value: string | null): value is SortBy { + return !!value && VALID_SORT_BY.includes(value as SortBy); +} + +function normalize(s: string) { + return s.trim().toLowerCase(); +} + +export const PeoplePage: React.FC = () => { + const { slug } = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + + const [people, setPeople] = useState
+
+ );
+};
diff --git a/src/types/Person.ts b/src/types/Person.ts
index 5e65e546..35e9d953 100644
--- a/src/types/Person.ts
+++ b/src/types/Person.ts
@@ -1,9 +1,16 @@
+export type Sex = 'm' | 'f';
+
export interface Person {
+ name: string;
+ sex: Sex;
born: number;
died: number;
- fatherName: string | null;
- motherName: string | null;
- name: string;
- sex: string;
+ motherName?: string;
+ fatherName?: string;
slug: string;
}
+
+export interface PersonWithParents extends Person {
+ mother?: Person | null;
+ father?: Person | null;
+}
Peope page
+ +
+
+
+
+ {isLoading &&
+ setQueryDraft(e.target.value)}
+ />
+
+ Failed to load people
+ )}
+
+ {!isLoading && !hasError && (
+