Add book detail page

Author: PivtoranisV

app/javascript/components/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import BookList from './pages/BookList';
+import BookDetail from './pages/BookDetail';
 import AddBook from './pages/AddBook';
 import EditBook from './pages/EditBook';
 import Home from './pages/Home';
@@ -11,6 +12,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/books" element={<BookList />} />
+        <Route path="/books/:id" element={<BookDetail />} />
         <Route path="/books/new" element={<AddBook />} />
         <Route path="/books/:id/edit" element={<EditBook />} />
       </Routes>

app/javascript/components/pages/BookDetail.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const BookDetail = () => {
+  const { id } = useParams();
+  const [book, setBook] = useState(null);
+  const [recommender, setRecommender] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchBook = async () => {
+      const response = await fetch(`http://localhost:3000/api/v1/books/${id}`);
+
+      const bookData = await response.json();
+      setBook(bookData.data);
+      const recommenderData = bookData.included.find(
+        (include) => include.type === 'user'
+      );
+      setRecommender(recommenderData);
+    };
+
+    fetchBook();
+  }, [id]);
+
+  return (
+    <div className="container my-5">
+      <h1 className="text-center mb-4">{book?.attributes.title}</h1>
+      <h4 className="text-center text-muted">{book?.attributes.author}</h4>
+      <p>{book?.attributes.description || 'No description available.'}</p>
+      <hr />
+      {recommender && (
+        <p className="text-muted">
+          Recommended by: {recommender?.attributes.email}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default BookDetail;