44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { useCallback, useState } from "preact/hooks";
|
||
|
|
|
||
|
|
export function Recommendations({ id, type }: { id: string; type: string }) {
|
||
|
|
const [state, setState] = useState<"disabled" | "loading">(
|
||
|
|
"disabled",
|
||
|
|
);
|
||
|
|
const [results, setResults] = useState();
|
||
|
|
|
||
|
|
const startFetch = useCallback(
|
||
|
|
async () => {
|
||
|
|
if (state === "loading") return;
|
||
|
|
setState("loading");
|
||
|
|
const res = await fetch(`/api/recommendation/${type}/${id}`);
|
||
|
|
const json = await res.json();
|
||
|
|
setResults(json);
|
||
|
|
},
|
||
|
|
[id, type],
|
||
|
|
);
|
||
|
|
|
||
|
|
if (results) {
|
||
|
|
return (
|
||
|
|
<ul class="gap-5">
|
||
|
|
{results.map((res) => {
|
||
|
|
return (
|
||
|
|
<div class="flex gap-5 items-center mb-4">
|
||
|
|
<img
|
||
|
|
class="w-12 h-12 rounded-full object-cover"
|
||
|
|
src={`https://image.tmdb.org/t/p/original${res.poster_path}`}
|
||
|
|
/>
|
||
|
|
<p>{res.title}</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (state === "loading") {
|
||
|
|
return <p>Loading...</p>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <button onClick={startFetch}>load recommendations</button>;
|
||
|
|
}
|