102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { BookOpen, LibraryBig, ScanLine } from "lucide-react";
|
|
import { api } from "../api/client";
|
|
import type { DashboardData } from "../api/types";
|
|
import { bookDisplayTitle, bookVolumeLabel } from "../book/metadata";
|
|
import { EmptyState, LoadingState, Meter, Panel } from "../components/ui";
|
|
import { navigate } from "../router";
|
|
|
|
export function HomePage() {
|
|
const [state, setState] = useState<DashboardData | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
Promise.all([api.books(), api.continueReading(), api.libraries(), api.jobs()])
|
|
.then(([books, continueReading, libraries, jobs]) => {
|
|
if (!alive) return;
|
|
setState({ books, continueReading, libraries, jobs });
|
|
})
|
|
.catch(() => {
|
|
if (alive) setState({ books: [], continueReading: [], libraries: [], jobs: [] });
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, []);
|
|
|
|
if (!state) return <LoadingState />;
|
|
|
|
const renderHomeBook = (
|
|
item: DashboardData["books"][number],
|
|
className = "home-book-card",
|
|
options: { href?: string; progressPercent?: number } = {}
|
|
) => {
|
|
const volumeLabel = bookVolumeLabel(item);
|
|
return (
|
|
<button key={item.id} className={className} onClick={() => navigate(options.href ?? `/book/${item.id}`)}>
|
|
<span className="home-book-cover" aria-hidden="true">
|
|
{item.coverPath ? <img src={api.bookCoverUrl(item.id)} alt="" /> : <BookOpen size={24} />}
|
|
</span>
|
|
<span className="home-book-copy">
|
|
{volumeLabel && <span className="home-book-volume">{volumeLabel}</span>}
|
|
<strong>{bookDisplayTitle(item)}</strong>
|
|
<span>{item.author ?? "Auteur inconnu"}</span>
|
|
{options.progressPercent !== undefined && <Meter value={options.progressPercent} />}
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="page-grid home-page">
|
|
<section className="hero-band home-hero">
|
|
<div>
|
|
<h1>Reprendre la lecture.</h1>
|
|
</div>
|
|
<button className="primary-button" onClick={() => navigate("/search")}>
|
|
<ScanLine size={18} />
|
|
Explorer
|
|
</button>
|
|
</section>
|
|
|
|
<Panel className="span-2">
|
|
<div className="section-heading">
|
|
<h2>Livres en cours</h2>
|
|
<span>{state.continueReading.length} lectures</span>
|
|
</div>
|
|
{state.continueReading.length ? (
|
|
<div className="continue-grid">
|
|
{state.continueReading.map((item) =>
|
|
renderHomeBook(item.book, "home-book-card continue-tile", {
|
|
href: `/reader/${item.book.id}`,
|
|
progressPercent: item.progress.percent
|
|
})
|
|
)}
|
|
</div>
|
|
) : (
|
|
<EmptyState title="Aucune trace" detail="Les lectures reprises apparaitront ici." />
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel>
|
|
<div className="section-heading">
|
|
<h2>Bibliotheques</h2>
|
|
<LibraryBig size={20} />
|
|
</div>
|
|
<div className="library-list">
|
|
{state.libraries.map((library) => (
|
|
<button key={library.id} onClick={() => navigate(`/library/${library.id}`)}>
|
|
<strong>{library.name}</strong>
|
|
<span>{library.path}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<section className="home-book-grid span-3">
|
|
{state.books.map((book) => renderHomeBook(book))}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|