FavoriteBooksPage

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import Footer from "../components/Footer";
import "./FavoriteBooksPage.css";
import { BASE_URL } from '../pages/link';

const FavoriteBooksPage = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [bookDetails, setBookDetails] = useState([]);
  const token = localStorage.getItem('token');
  const userId = localStorage.getItem('userId');

  useEffect(() => {
    console.log('userId:', userId);  // Log userId
    console.log('token:', token);    // Log token

    if (userId && token) {
      const fetchFavoriteBooks = async () => {
        try {
          // Fetch the list of favorite books
          const response = await fetch(`${BASE_URL}/api/public/favorites/list/${userId}`, {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`,
              'ngrok-skip-browser-warning': '69420'
            }
          });

          if (!response.ok) {
            throw new Error(`Network response was not ok: ${response.statusText}`);
          }
          
          const data = await response.json();
          console.log('Favorite Books:', data);

          // Fetch details for each favorite book
          const detailsPromises = data.map(async (book) => {
            const fetchURL = `${BASE_URL}/api/public/books/getById/${book.bookId}`;
            console.log('Fetching details for bookId:', book.bookId);  // Log book ID
            console.log('Fetch URL:', fetchURL);  // Log the full URL

            const bookResponse = await fetch(fetchURL, {
              method: 'GET',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`,
                'ngrok-skip-browser-warning': '69420'
              }
            });

            if (!bookResponse.ok) {
              throw new Error(`Failed to fetch book details: ${bookResponse.statusText}`);
            }

            const bookData = await bookResponse.json();
            console.log(`Details for book ${book.bookId}:`, bookData);
            return bookData;
          });

          const details = await Promise.all(detailsPromises);
          setBookDetails(details);
        } catch (error) {
          console.error('Error fetching favorite books or book details:', error);
          setError(error);
        } finally {
          setLoading(false);
        }
      };

      fetchFavoriteBooks();
    } else {
      setError(new Error('Please login'));
      setLoading(false);
    }
  }, [userId, token]);

  return (
    <div className="container">
      <Navbar />
      <div className="content">
        <Sidebar />
        <div className="main">
          <div className="main-contentss favorite-books-page">
            <div className="book-detail">
              <div className="section-Favorite">
                <h2>Favorite Books</h2>
                {loading ? (
                  <div>Loading...</div>
                ) : error ? (
                  <div>Error: {error.message}</div>
                ) : (
                  <>
                    {bookDetails.length > 0 ? (
                      <div className="favorite-books-list">
                        {bookDetails.map((book) => (
                          <div key={book.id} className="favorite-book-item">
                            <Link to={`/book/${book.id}`}>
                              <img src={book.cover} alt={book.title} />
                              <div className="favorite-book-info">
                                <p>{book.title}</p>
                              </div>
                            </Link>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="no-function"><p>No any favorite book here.</p></div>
                    )}
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
 
    </div>
  );
};

export default FavoriteBooksPage;