chore: initial commit — monorepo ReadaBook (API NestJS, web PWA, Docker)

apps/web/src/pages/LibraryPage.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import type { BookDto, LibraryDto } from "@readabook/shared";
+import { api } from "../api/client";
+import { BookCard } from "../components/BookCard";
+import { EmptyState, LoadingState, Panel } from "../components/ui";
+
+export function LibraryPage({ libraryId }: { libraryId: number }) {
+  const [books, setBooks] = useState<BookDto[] | null>(null);
+  const [libraries, setLibraries] = useState<LibraryDto[]>([]);
+
+  useEffect(() => {
+    let alive = true;
+    Promise.all([api.books({ libraryId }), api.libraries()]).then(([nextBooks, nextLibraries]) => {
+      if (!alive) return;
+      setBooks(nextBooks);
+      setLibraries(nextLibraries);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [libraryId]);
+
+  if (!books) return <LoadingState />;
+  const library = libraries.find((item) => item.id === libraryId);
+
+  return (
+    <div className="page-grid">
+      <Panel className="span-3">
+        <div className="section-heading">
+          <div>
+            <h1>{library?.name ?? "Bibliotheque"}</h1>
+            <p>{library?.path ?? "Rayonnage non identifie"}</p>
+          </div>
+          <span>{books.length} ouvrages</span>
+        </div>
+      </Panel>
+      {books.length ? (
+        <section className="book-grid span-3">
+          {books.map((book) => (
+            <BookCard key={book.id} book={book} />
+          ))}
+        </section>
+      ) : (
+        <Panel className="span-3">
+          <EmptyState title="Rayon vide" detail="Lance un scan depuis l'administration." />
+        </Panel>
+      )}
+    </div>
+  );
+}