Laboratoire Harry Potter

import { useState } from 'react'
import './App.css'

function App() {
  const [book, setBook] = useState({
    number: 1,
    title: "Harry Potter à l'école des sorciers",
    originalTitle: "Harry Potter and the Sorcerer's Stone",
    releaseDate: "Jun 26, 1997",
    description: "Le jour de son anniversaire, Harry Potter découvre qu'il est le fils de deux sorciers célèbres, dont il a hérité de pouvoirs magiques. Il doit fréquenter une célèbre école de magie et de sorcellerie, où il se lie d'amitié avec deux jeunes qui deviendront ses compagnons d'aventure. Lors de sa première année à Poudlard, il découvre qu'un sorcier malveillant et puissant nommé Voldemort est à la recherche d'une pierre philosophale qui prolonge la vie de celui qui la possède.",
    pages: 223,
    cover: "https://raw.githubusercontent.com/fedeperin/potterapi/main/public/images/covers/1.png",
    index: 0
  })
  return (
    <main className="app-shell">
      <section className="book-browser">

        <div className="controls" aria-label="Book navigation">
          <button
            type="button"
            className="nav-button"
          >
            Left
          </button>
          <button
            type="button"
            className="nav-button"
          >
            Right
          </button>
        </div>

        <section className="card">
          <article className="book-details">
            <img
              className="book-cover"
              src={book.cover}
              alt={`Cover of ${book.title}`}
            />

            <div className="book-copy">
              <p className="book-tagline">
                Tome {book.number} • {book.releaseDate}
              </p>
              <h2>{book.title}</h2>
              <p className="description">{book.description}</p>

              <dl className="detail-grid">
                <div>
                  <dt>Titre original</dt>
                  <dd>{book.originalTitle}</dd>
                </div>
                <div>
                  <dt>Pages</dt>
                  <dd>{book.pages}</dd>
                </div>
                <div>
                  <dt>Collection</dt>
                  <dd>Harry Potter</dd>
                </div>
              </dl>
            </div>
          </article>
        </section>
      </section>
    </main>
  )
}

export default App

import { useEffect, useState } from 'react'
import './App.css'
import BookCard from './components/BookCard'
import Spinner from './components/Spinner'
import Error from './components/Error'

const API_URL = "https://potterapi-fedeperin.vercel.app/fr/books"

function App() {
  const [book, setBook] = useState(null)
  const [currentBookIndex, setCurrentBookIndex] = useState(0)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  function nextBook() {
    setCurrentBookIndex(
      prevCurrentBookIndex => Math.min(6, prevCurrentBookIndex + 1)
    )
  }

  function prevBook() {
    setCurrentBookIndex(
      prevCurrentBookIndex => Math.max(0, prevCurrentBookIndex - 1)
    )
  }


  useEffect(() => {
    async function fetchHarryPotterBook() {
      try {
        setLoading(true)
        setError(null)

        const response = await fetch(`${API_URL}?index=${currentBookIndex}`)
        if (!response.ok) throw Error("Erreur lors de la récupération du livre")
        const data = await response.json()
        setBook(data)
      } catch (error) {
        console.error(error)
        setError(error.message || "Erreur lors de la récupération du livre")
      } finally {
        setLoading(false)
      }
    }

    fetchHarryPotterBook()

  }, [currentBookIndex])

  return (
    <main className="app-shell">
      <section className="book-browser">
        {/* BOUTONS NE NAVIGATION */}
        <div className="controls" aria-label="Book navigation">
          <button
            className="nav-button"
            onClick={prevBook}
            disabled={loading}
          >Précédent
          </button>
          <button
            className="nav-button"
            onClick={nextBook}
            disabled={loading}
          >
            Suivant
          </button>
        </div>

        {loading && !error && <Spinner />}

        {!loading && error && <Error errorMessage={error} />}

        {/* CARD DU LIVRE COURANT */}
        {!loading && !error && book && <BookCard book={book} />}

      </section>
    </main >
  )
}

export default App