mise en place de l'application de base
This commit is contained in:
felix-vi
@@ -0,0 +1,53 @@
|
||||
# Ma librairie
|
||||
|
||||
Application React (Vite) : livres enregistrés localement (équivalent métier `POST /api/books`), React Router, `useContext`, Axios (Open Library).
|
||||
|
||||
## Les membres du projet
|
||||
|
||||
Marvin Aubert, Maxime Lebreton et Patrick Felix-Vimalaratnam
|
||||
|
||||
## Comment installer le projet
|
||||
|
||||
À la racine du dépôt :
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Cette commande installe les dépendances listées dans `package.json` (React, Vite, React Router, Axios, etc.).
|
||||
|
||||
## Comment lancer le projet
|
||||
|
||||
**Mode développement** (rechargement à chaud, URL affichée dans le terminal) :
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Ouvre ensuite l’adresse indiquée (souvent `http://localhost:5173`).
|
||||
|
||||
**Prévisualiser le build de production** (après `npm run build`) :
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## Comment tester le projet
|
||||
|
||||
**Vérifications automatisées (lint)** :
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
**Build de production** (vérifie que le projet compile) :
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
**Tests manuels dans le navigateur** (après `npm run dev`) :
|
||||
|
||||
1. **Mes livres** (`/`) : enregistrer un nouveau livre (libellés + `POST /api/books` côté UI), supprimer, filtrer (Tous / Lus / À lire), rechercher dans la liste.
|
||||
2. **Fiche livre** : cliquer sur le titre d’un livre ou aller sur `/<id>` ; vérifier lu / non lu et suppression avec retour à **Mes livres**.
|
||||
3. **Recherche** (`/recherche`) : recherche Open Library (Internet), enregistrer un résultat (même logique que `POST /api/books` en local), puis vérifier qu’il apparaît sous **Mes livres**.
|
||||
@@ -0,0 +1,36 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import react from 'eslint-plugin-react'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
|
||||
export default [
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: { ecmaFeatures: { jsx: true } },
|
||||
},
|
||||
plugins: {
|
||||
react,
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
settings: {
|
||||
react: { version: 'detect' },
|
||||
},
|
||||
rules: {
|
||||
...js.configs.recommended.rules,
|
||||
...react.configs.recommended.rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true, allowExportNames: ['useBooks'] },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Ma librairie</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+4635
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "2026-dev-but3",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^6.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.14.0",
|
||||
"vite": "^6.0.11"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
+595
File diff suppressed because it is too large
Load Diff
+18
@@ -0,0 +1,18 @@
|
||||
import { Route, Routes } from 'react-router-dom'
|
||||
import { RootLayout } from './layout/RootLayout.jsx'
|
||||
import BookDetailPage from './pages/BookDetailPage.jsx'
|
||||
import MesLivresPage from './pages/MesLivresPage.jsx'
|
||||
import SearchPage from './pages/SearchPage.jsx'
|
||||
import './App.css'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<RootLayout />}>
|
||||
<Route index element={<MesLivresPage />} />
|
||||
<Route path="recherche" element={<SearchPage />} />
|
||||
<Route path=":id" element={<BookDetailPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
const emptyForm = () => ({
|
||||
title: '',
|
||||
author: '',
|
||||
year: new Date().getFullYear(),
|
||||
genre: '',
|
||||
read: false,
|
||||
})
|
||||
|
||||
export function BookForm({ onSubmit }) {
|
||||
const [form, setForm] = useState(() => emptyForm())
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
if (!form.title.trim() || !form.author.trim()) return
|
||||
onSubmit(form)
|
||||
setForm(emptyForm())
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="book-form" onSubmit={handleSubmit}>
|
||||
<h2>Enregistrer un nouveau livre</h2>
|
||||
<p className="book-form-story">Je veux enregistrer un nouveau livre</p>
|
||||
<p className="book-form-api">
|
||||
<code>POST /api/books</code>
|
||||
<span className="book-form-api-note">
|
||||
{' '}
|
||||
(dans cette appli : enregistrement local, pas de serveur)
|
||||
</span>
|
||||
</p>
|
||||
<div className="form-grid">
|
||||
<label>
|
||||
Titre
|
||||
<input
|
||||
required
|
||||
value={form.title}
|
||||
onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
|
||||
placeholder="Ex. Les Misérables"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Auteur·ice
|
||||
<input
|
||||
required
|
||||
value={form.author}
|
||||
onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}
|
||||
placeholder="Ex. Victor Hugo"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Année
|
||||
<input
|
||||
type="number"
|
||||
min={1000}
|
||||
max={2100}
|
||||
value={form.year}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
year: Number(e.target.value) || f.year,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Genre
|
||||
<input
|
||||
value={form.genre}
|
||||
onChange={(e) => setForm((f) => ({ ...f, genre: e.target.value }))}
|
||||
placeholder="Roman, essai…"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.read}
|
||||
onChange={(e) => setForm((f) => ({ ...f, read: e.target.checked }))}
|
||||
/>
|
||||
Déjà lu
|
||||
</label>
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn primary">
|
||||
Enregistrer (POST)
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const TABS = [
|
||||
['all', 'Tous'],
|
||||
['read', 'Lus'],
|
||||
['unread', 'À lire'],
|
||||
]
|
||||
|
||||
export function BookList({
|
||||
books,
|
||||
filter,
|
||||
query,
|
||||
onFilterChange,
|
||||
onQueryChange,
|
||||
onToggleRead,
|
||||
onRemove,
|
||||
}) {
|
||||
const q = query.trim().toLowerCase()
|
||||
const filtered = books.filter((b) => {
|
||||
if (filter === 'read' && !b.read) return false
|
||||
if (filter === 'unread' && b.read) return false
|
||||
if (!q) return true
|
||||
return (
|
||||
b.title.toLowerCase().includes(q) ||
|
||||
b.author.toLowerCase().includes(q) ||
|
||||
(b.genre && b.genre.toLowerCase().includes(q))
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<section className="book-list-section">
|
||||
<div className="toolbar">
|
||||
<input
|
||||
type="search"
|
||||
className="search"
|
||||
placeholder="Rechercher par titre, auteur ou genre…"
|
||||
value={query}
|
||||
onChange={(e) => onQueryChange(e.target.value)}
|
||||
aria-label="Recherche"
|
||||
/>
|
||||
<div className="filter-tabs" role="tablist">
|
||||
{TABS.map(([value, label]) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={filter === value}
|
||||
className={filter === value ? 'tab active' : 'tab'}
|
||||
onClick={() => onFilterChange(value)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<p className="empty-state">
|
||||
{books.length === 0
|
||||
? 'Aucun livre enregistré. Utilisez le formulaire à gauche : Je veux enregistrer un nouveau livre (POST /api/books).'
|
||||
: 'Aucun résultat pour ces critères.'}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="book-grid">
|
||||
{filtered.map((book) => (
|
||||
<li key={book.id} className="book-card">
|
||||
<div className="book-card-top">
|
||||
<span className={`badge ${book.read ? 'read' : 'unread'}`}>
|
||||
{book.read ? 'Lu' : 'À lire'}
|
||||
</span>
|
||||
{book.genre ? <span className="genre">{book.genre}</span> : null}
|
||||
</div>
|
||||
<h3>
|
||||
<Link className="book-title-link" to={`/${book.id}`}>
|
||||
{book.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="author">{book.author}</p>
|
||||
<p className="year">{book.year}</p>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn small"
|
||||
onClick={() => onToggleRead(book.id)}
|
||||
>
|
||||
{book.read ? 'Marquer non lu' : 'Marquer lu'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn small danger"
|
||||
onClick={() => onRemove(book.id)}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
|
||||
const STORAGE_KEY = 'librairie-books'
|
||||
|
||||
const demoBooks = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Le Petit Prince',
|
||||
author: 'Antoine de Saint-Exupéry',
|
||||
year: 1943,
|
||||
genre: 'Conte',
|
||||
read: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '1984',
|
||||
author: 'George Orwell',
|
||||
year: 1949,
|
||||
genre: 'Science-fiction',
|
||||
read: false,
|
||||
},
|
||||
]
|
||||
|
||||
function loadBooks() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (raw === null) return demoBooks
|
||||
const parsed = JSON.parse(raw)
|
||||
return Array.isArray(parsed) ? parsed : demoBooks
|
||||
} catch {
|
||||
return demoBooks
|
||||
}
|
||||
}
|
||||
|
||||
function saveBooks(books) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(books))
|
||||
}
|
||||
|
||||
const BooksContext = createContext(null)
|
||||
|
||||
export function BooksProvider({ children }) {
|
||||
const [books, setBooks] = useState(loadBooks)
|
||||
|
||||
useEffect(() => {
|
||||
saveBooks(books)
|
||||
}, [books])
|
||||
|
||||
/** Équivalent métier d’un POST /api/books (ici : persistance locale + id généré). */
|
||||
const postBook = useCallback((book) => {
|
||||
const id = crypto.randomUUID()
|
||||
setBooks((prev) => [...prev, { ...book, id }])
|
||||
}, [])
|
||||
|
||||
const removeBook = useCallback((id) => {
|
||||
setBooks((prev) => prev.filter((b) => b.id !== id))
|
||||
}, [])
|
||||
|
||||
const toggleRead = useCallback((id) => {
|
||||
setBooks((prev) =>
|
||||
prev.map((b) => (b.id === id ? { ...b, read: !b.read } : b)),
|
||||
)
|
||||
}, [])
|
||||
|
||||
const value = { books, postBook, removeBook, toggleRead }
|
||||
|
||||
return (
|
||||
<BooksContext.Provider value={value}>{children}</BooksContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useBooks() {
|
||||
const ctx = useContext(BooksContext)
|
||||
if (!ctx) {
|
||||
throw new Error('useBooks doit être utilisé dans un BooksProvider')
|
||||
}
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
:root {
|
||||
--paper: #faf6ef;
|
||||
--ink: #1c1917;
|
||||
--ink-muted: #57534e;
|
||||
--accent: #b45309;
|
||||
--accent-hover: #92400e;
|
||||
--accent-soft: rgba(180, 83, 9, 0.12);
|
||||
--card: #ffffff;
|
||||
--border: #e7e5e4;
|
||||
--danger: #b91c1c;
|
||||
--danger-soft: rgba(185, 28, 28, 0.1);
|
||||
--radius: 12px;
|
||||
--shadow: 0 4px 24px rgba(28, 25, 23, 0.08);
|
||||
--code-bg: #f0ebe3;
|
||||
--font-sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
|
||||
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--paper: #1c1917;
|
||||
--ink: #fafaf9;
|
||||
--ink-muted: #a8a29e;
|
||||
--accent: #fbbf24;
|
||||
--accent-hover: #fcd34d;
|
||||
--accent-soft: rgba(251, 191, 36, 0.15);
|
||||
--card: #292524;
|
||||
--border: #44403c;
|
||||
--danger: #f87171;
|
||||
--danger-soft: rgba(248, 113, 113, 0.12);
|
||||
--shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
|
||||
--code-bg: #292524;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { NavLink, Outlet } from 'react-router-dom'
|
||||
|
||||
export function RootLayout() {
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<div className="header-row">
|
||||
<div className="brand">
|
||||
<span className="logo" aria-hidden>
|
||||
📚
|
||||
</span>
|
||||
<div>
|
||||
<h1>Ma librairie</h1>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="main-nav" aria-label="Navigation principale">
|
||||
<NavLink
|
||||
to="/"
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
isActive ? 'nav-link active' : 'nav-link'
|
||||
}
|
||||
>
|
||||
Mes livres
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/recherche"
|
||||
className={({ isActive }) =>
|
||||
isActive ? 'nav-link active' : 'nav-link'
|
||||
}
|
||||
>
|
||||
Recherche (Axios)
|
||||
</NavLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="route-outlet">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
<footer className="app-footer">
|
||||
<p>
|
||||
React + Vite · React Router (<code>Outlet</code>) ·{' '}
|
||||
<code>useContext</code> · Axios (Open Library)
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { BooksProvider } from './context/BooksContext.jsx'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<BooksProvider>
|
||||
<App />
|
||||
</BooksProvider>
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { useBooks } from '../context/BooksContext.jsx'
|
||||
|
||||
export default function BookDetailPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { books, toggleRead, removeBook } = useBooks()
|
||||
const book = books.find((b) => b.id === id)
|
||||
|
||||
if (!book) {
|
||||
return (
|
||||
<div className="book-detail">
|
||||
<p className="book-detail-missing">Livre introuvable.</p>
|
||||
<Link to="/" className="nav-link">
|
||||
← Retour à mes livres
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
removeBook(book.id)
|
||||
navigate('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="book-detail">
|
||||
<Link to="/" className="nav-link book-detail-back">
|
||||
← Catalogue
|
||||
</Link>
|
||||
<span className={`badge ${book.read ? 'read' : 'unread'}`}>
|
||||
{book.read ? 'Lu' : 'À lire'}
|
||||
</span>
|
||||
<h2 className="book-detail-title">{book.title}</h2>
|
||||
<p className="book-detail-author">{book.author}</p>
|
||||
<dl className="book-detail-meta">
|
||||
<div>
|
||||
<dt>Année</dt>
|
||||
<dd>{book.year}</dd>
|
||||
</div>
|
||||
{book.genre ? (
|
||||
<div>
|
||||
<dt>Genre</dt>
|
||||
<dd>{book.genre}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
<div>
|
||||
<dt>Identifiant</dt>
|
||||
<dd>
|
||||
<code>{book.id}</code>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="book-detail-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => toggleRead(book.id)}
|
||||
>
|
||||
{book.read ? 'Marquer non lu' : 'Marquer lu'}
|
||||
</button>
|
||||
<button type="button" className="btn danger" onClick={handleDelete}>
|
||||
Supprimer de mes livres
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { BookForm } from '../components/BookForm.jsx'
|
||||
import { BookList } from '../components/BookList.jsx'
|
||||
import { useBooks } from '../context/BooksContext.jsx'
|
||||
|
||||
export default function MesLivresPage() {
|
||||
const { books, postBook, removeBook, toggleRead } = useBooks()
|
||||
const [filter, setFilter] = useState('all')
|
||||
const [query, setQuery] = useState('')
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const read = books.filter((b) => b.read).length
|
||||
return { total: books.length, read, unread: books.length - read }
|
||||
}, [books])
|
||||
|
||||
return (
|
||||
<div className="mes-livres-page">
|
||||
<div className="mes-livres-intro">
|
||||
<p className="tagline mes-livres-tagline">
|
||||
{stats.total} livre{stats.total !== 1 ? 's' : ''} enregistré
|
||||
{stats.total !== 1 ? 's' : ''} — {stats.read} lu
|
||||
{stats.read !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="app-main">
|
||||
<aside className="sidebar">
|
||||
<BookForm onSubmit={postBook} />
|
||||
</aside>
|
||||
<BookList
|
||||
books={books}
|
||||
filter={filter}
|
||||
query={query}
|
||||
onFilterChange={setFilter}
|
||||
onQueryChange={setQuery}
|
||||
onToggleRead={toggleRead}
|
||||
onRemove={removeBook}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import axios from 'axios'
|
||||
import { useState } from 'react'
|
||||
import { useBooks } from '../context/BooksContext.jsx'
|
||||
|
||||
const OPEN_LIBRARY_SEARCH = 'https://openlibrary.org/search.json'
|
||||
|
||||
function docToBookPayload(doc) {
|
||||
return {
|
||||
title: doc.title || 'Sans titre',
|
||||
author: Array.isArray(doc.author_name)
|
||||
? doc.author_name[0]
|
||||
: 'Auteur inconnu',
|
||||
year:
|
||||
typeof doc.first_publish_year === 'number'
|
||||
? doc.first_publish_year
|
||||
: new Date().getFullYear(),
|
||||
genre: Array.isArray(doc.subject) ? doc.subject[0] : '',
|
||||
read: false,
|
||||
}
|
||||
}
|
||||
|
||||
function resultKey(doc, index) {
|
||||
return doc.key || doc.cover_edition_key || `${doc.title || 'work'}-${index}`
|
||||
}
|
||||
|
||||
export default function SearchPage() {
|
||||
const { postBook } = useBooks()
|
||||
const [q, setQ] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [docs, setDocs] = useState([])
|
||||
const [addedKeys, setAddedKeys] = useState(() => new Set())
|
||||
const [lastQuery, setLastQuery] = useState('')
|
||||
|
||||
async function handleSearch(e) {
|
||||
e.preventDefault()
|
||||
const term = q.trim()
|
||||
if (!term) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setDocs([])
|
||||
setAddedKeys(() => new Set())
|
||||
setLastQuery(term)
|
||||
try {
|
||||
const { data } = await axios.get(OPEN_LIBRARY_SEARCH, {
|
||||
params: { q: term, limit: 15 },
|
||||
timeout: 15000,
|
||||
})
|
||||
setDocs(Array.isArray(data.docs) ? data.docs : [])
|
||||
} catch (err) {
|
||||
setError(
|
||||
err.response?.data?.error ||
|
||||
err.message ||
|
||||
'Impossible de contacter Open Library.',
|
||||
)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function handleAdd(doc, index) {
|
||||
postBook(docToBookPayload(doc))
|
||||
const k = resultKey(doc, index)
|
||||
setAddedKeys((prev) => new Set(prev).add(k))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="search-page">
|
||||
<h2 className="search-page-title">Recherche Open Library</h2>
|
||||
<p className="search-page-lead">
|
||||
Interroge l’API publique Open Library avec Axios, puis ajoute un
|
||||
ouvrage à ton catalogue local.
|
||||
</p>
|
||||
<form className="search-form" onSubmit={handleSearch}>
|
||||
<input
|
||||
type="search"
|
||||
className="search search-wide"
|
||||
placeholder="Titre, auteur, sujet…"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
aria-label="Requête Open Library"
|
||||
/>
|
||||
<button type="submit" className="btn primary" disabled={loading}>
|
||||
{loading ? 'Recherche…' : 'Rechercher'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error ? (
|
||||
<p className="search-error" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!loading && docs.length === 0 && !error && !lastQuery ? (
|
||||
<p className="search-hint">Saisis un mot-clé et lance la recherche.</p>
|
||||
) : null}
|
||||
|
||||
{!loading && docs.length === 0 && !error && lastQuery ? (
|
||||
<p className="search-hint">Aucun résultat pour « {lastQuery} ».</p>
|
||||
) : null}
|
||||
|
||||
{docs.length > 0 ? (
|
||||
<ul className="ol-results">
|
||||
{docs.map((doc, i) => {
|
||||
const key = resultKey(doc, i)
|
||||
const year =
|
||||
typeof doc.first_publish_year === 'number'
|
||||
? doc.first_publish_year
|
||||
: '—'
|
||||
const authors = Array.isArray(doc.author_name)
|
||||
? doc.author_name.slice(0, 2).join(', ')
|
||||
: '—'
|
||||
const justAdded = addedKeys.has(key)
|
||||
return (
|
||||
<li key={key} className="ol-result-card">
|
||||
<h3 className="ol-result-title">
|
||||
{doc.title || 'Sans titre'}
|
||||
</h3>
|
||||
<p className="ol-result-meta">
|
||||
{authors} · {year}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn small primary"
|
||||
onClick={() => handleAdd(doc, i)}
|
||||
disabled={justAdded}
|
||||
>
|
||||
{justAdded ? 'Enregistré' : 'Enregistrer (POST /api/books)'}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user