75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { Person } from "../items";
|
|
import { apiFetch } from "./api";
|
|
import { GameImage } from "./GameImage";
|
|
import { LoadingState, EmptyState } from "./components/EmptyState";
|
|
|
|
export const PersonDetails = () => {
|
|
const { name } = useParams<{ name: string }>();
|
|
const [person, setPerson] = useState<Person | null>(null);
|
|
const [loading, setLoading] = useState(!!name);
|
|
const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
|
|
|
|
useEffect(() => {
|
|
if (!name) return;
|
|
|
|
(async () => {
|
|
try {
|
|
const res = await apiFetch(`/api/${name}`);
|
|
if (!res.ok) {
|
|
throw new Error("Person not found");
|
|
}
|
|
const buffer = await res.arrayBuffer();
|
|
setPerson(Person.decode(new Uint8Array(buffer)));
|
|
} catch (e) {
|
|
console.error("Failed to decode person:", e);
|
|
setError(e instanceof Error ? e.message : "Failed to load person data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, [name]);
|
|
|
|
if (loading) return <LoadingState message="Loading person details..." />;
|
|
if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
|
|
if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: "2rem" }}>
|
|
<h2>{person.name}</h2>
|
|
{person.opinion.length === 0 ? (
|
|
<EmptyState
|
|
icon="🎮"
|
|
title="No opinions yet"
|
|
description={`${person.name} hasn't shared any game opinions`}
|
|
/>
|
|
) : (
|
|
<ul className="grid-container">
|
|
{person.opinion.map((op, i) => (
|
|
<Link
|
|
to={`/game/${encodeURIComponent(op.title)}`}
|
|
key={i}
|
|
className="list-item"
|
|
style={{
|
|
textDecoration: "none",
|
|
color: "inherit",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
|
|
}}
|
|
>
|
|
<strong>{op.title}</strong>
|
|
|
|
<GameImage game={op.title} />
|
|
</Link>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|