forked from nihonium/nyanimedb
114 lines
3 KiB
TypeScript
114 lines
3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { DefaultService } from "../../api/services/DefaultService";
|
|
import type { Title } from "../../api/models/Title";
|
|
import styles from "./TitlesPage.module.css";
|
|
|
|
const LIMIT = 20;
|
|
|
|
const TitlesPage: React.FC = () => {
|
|
const [titles, setTitles] = useState<Title[]>([]);
|
|
const [search, setSearch] = useState("");
|
|
const [offset, setOffset] = useState(0);
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchTitles = async (reset: boolean) => {
|
|
try {
|
|
if (reset) {
|
|
setLoading(true);
|
|
setOffset(0);
|
|
} else {
|
|
setLoadingMore(true);
|
|
}
|
|
|
|
const result = await DefaultService.getTitles(
|
|
search || undefined,
|
|
undefined, // status
|
|
undefined, // rating
|
|
undefined, // release_year
|
|
undefined, // release_season
|
|
LIMIT,
|
|
reset ? 0 : offset,
|
|
"all"
|
|
);
|
|
|
|
if (reset) {
|
|
setTitles(result);
|
|
} else {
|
|
setTitles(prev => [...prev, ...result]);
|
|
}
|
|
|
|
if (result.length > 0) {
|
|
setOffset(prev => prev + LIMIT);
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError("Failed to fetch titles.");
|
|
} finally {
|
|
setLoading(false);
|
|
setLoadingMore(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchTitles(true);
|
|
}, [search]);
|
|
|
|
if (loading) return <div className={styles.loader}>Loading...</div>;
|
|
if (error) return <div className={styles.error}>{error}</div>;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.header}>
|
|
<h1>Titles</h1>
|
|
|
|
<input
|
|
className={styles.searchInput}
|
|
placeholder="Search titles..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.list}>
|
|
{titles.map((t) => (
|
|
<div key={t.id} className={styles.card}>
|
|
{t.poster_id ? (
|
|
<img
|
|
src={`/images/${t.poster_id}.png`}
|
|
alt="Poster"
|
|
className={styles.poster}
|
|
/>
|
|
) : (
|
|
<div className={styles.posterPlaceholder}>No Image</div>
|
|
)}
|
|
|
|
<div className={styles.cardInfo}>
|
|
<h3 className={styles.titleName}>{t.name}</h3>
|
|
<p className={styles.meta}>
|
|
{t.release_year} • {t.release_season}
|
|
</p>
|
|
<p className={styles.rating}>Rating: {t.rating}</p>
|
|
<p className={styles.status}>{t.status}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{titles.length > 0 && (
|
|
<button
|
|
className={styles.loadMore}
|
|
onClick={() => fetchTitles(false)}
|
|
disabled={loadingMore}
|
|
>
|
|
{loadingMore ? "Loading..." : "Load More"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TitlesPage;
|