Add logic to render list of book recommended by user

Author: PivtoranisV

app/controllers/api/v1/users_controller.rb

@@ -0,0 +1,7 @@
+class Api::V1::UsersController < ApplicationController
+  def show
+    user = User.find(params[:id])
+    recommended_books = user.recommended_books
+    render json: { data: recommended_books.map { |book| BookSerializer.new(book).serializable_hash } }
+  end
+end

app/javascript/components/App.jsx

@@ -5,6 +5,7 @@ import BookDetail from './pages/BookDetail';
 import AddBook from './pages/AddBook';
 import EditBook from './pages/EditBook';
 import Home from './pages/Home';
+import RecommenderBooks from './pages/RecommenderBooks';
 
 const App = () => {
   return (
@@ -15,6 +16,7 @@ const App = () => {
         <Route path="/books/:id" element={<BookDetail />} />
         <Route path="/books/new" element={<AddBook />} />
         <Route path="/books/:id/edit" element={<EditBook />} />
+        <Route path="/recommender/:id" element={<RecommenderBooks />} />
       </Routes>
     </Router>
   );

app/javascript/components/pages/BookDetail.jsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, 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 () => {
@@ -30,7 +29,14 @@ const BookDetail = () => {
       <hr />
       {recommender && (
         <p className="text-muted">
-          Recommended by: {recommender?.attributes.email}
+          Recommended by:
+          <Link
+            to={`/recommender/${recommender?.attributes.id}`}
+            className="btn btn-info btn-lg mb-5"
+            role="button"
+          >
+            {recommender?.attributes.email}
+          </Link>
         </p>
       )}
     </div>

app/javascript/components/pages/RecommenderBooks.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const RecommenderBooks = () => {
+  const { id } = useParams();
+  const [recommendedBooks, setRecommendedBooks] = useState([]);
+
+  useEffect(() => {
+    const fetchBook = async () => {
+      const response = await fetch(`http://localhost:3000/api/v1/users/${id}`);
+
+      const bookData = await response.json();
+      setRecommendedBooks(bookData.data);
+    };
+
+    fetchBook();
+  }, [id]);
+
+  return (
+    <div className="container my-5">
+      <h2>Recommended Books</h2>
+      <ul className="list-group">
+        {recommendedBooks.length === 0 ? (
+          <li className="list-group-item">No books recommended yet.</li>
+        ) : (
+          recommendedBooks.map((book) => (
+            <li key={book.data.id} className="list-group-item">
+              <h4>{book.data.attributes.title}</h4>
+              <p>{book.data.attributes.author}</p>
+              <p>{book.data.attributes.description}</p>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default RecommenderBooks;

config/routes.rb

@@ -3,6 +3,7 @@
   namespace :api do
     namespace :v1 do
       resources :books
+      resources :users, only: [ :show ]
     end
   end
   get "up" => "rails/health#show", as: :rails_health_check