2020-04-07 15:49:59 +02:00
|
|
|
import { useRouter } from "next/router";
|
|
|
|
import useSWR from "swr";
|
2023-01-12 18:36:29 +01:00
|
|
|
import type { Person, ResponseError } from "../../interfaces";
|
2019-07-08 08:04:04 +02:00
|
|
|
|
2022-07-11 12:40:52 +02:00
|
|
|
const fetcher = async (url: string) => {
|
2020-04-07 15:49:59 +02:00
|
|
|
const res = await fetch(url);
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
|
|
if (res.status !== 200) {
|
|
|
|
throw new Error(data.message);
|
|
|
|
}
|
|
|
|
return data;
|
|
|
|
};
|
|
|
|
|
2023-01-12 18:36:29 +01:00
|
|
|
export default function PersonPage() {
|
2020-04-07 15:49:59 +02:00
|
|
|
const { query } = useRouter();
|
2023-01-12 18:36:29 +01:00
|
|
|
const { data, error, isLoading, isValidating } = useSWR<
|
|
|
|
Person,
|
|
|
|
ResponseError
|
|
|
|
>(() => (query.id ? `/api/people/${query.id}` : null), fetcher);
|
2020-04-07 15:49:59 +02:00
|
|
|
|
|
|
|
if (error) return <div>{error.message}</div>;
|
2023-01-12 18:36:29 +01:00
|
|
|
if (isLoading) return <div>Loading...</div>;
|
|
|
|
if (!data) return null;
|
2020-04-07 15:49:59 +02:00
|
|
|
|
|
|
|
return (
|
2019-07-08 08:04:04 +02:00
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Height</th>
|
|
|
|
<th>Mass</th>
|
|
|
|
<th>Hair color</th>
|
|
|
|
<th>Skin color</th>
|
|
|
|
<th>Eye color</th>
|
|
|
|
<th>Gender</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2023-01-12 18:36:29 +01:00
|
|
|
{isValidating ? (
|
|
|
|
<td colSpan={7} align="center">
|
|
|
|
Validating...
|
|
|
|
</td>
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<td>{data.name}</td>
|
|
|
|
<td>{data.height}</td>
|
|
|
|
<td>{data.mass}</td>
|
|
|
|
<td>{data.hair_color}</td>
|
|
|
|
<td>{data.skin_color}</td>
|
|
|
|
<td>{data.eye_color}</td>
|
|
|
|
<td>{data.gender}</td>
|
|
|
|
</>
|
|
|
|
)}
|
2019-07-08 08:04:04 +02:00
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
}
|