Осталось настроить поиск до конца и все, вроде как фронт полностью на данном этапе готов))

online-library/src/ApiRequest/ApiClient.js

@@ -39,7 +39,7 @@ const apiAuth = axios.create({
 
 api.interceptors.request.use(
   async (config) => {
-    const token = getAccessToken();
+    let token = getAccessToken();
     if (token) {
       if (isTokenExpired(token)) {
         if (!isRefreshing) {

online-library/src/Choice/Choice.jsx

@@ -5,6 +5,7 @@ import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 import { Alert } from "react-bootstrap";
 import CustomList from "./CustomList/CustomList";
+import { Spinner } from "react-bootstrap";
 
 function Choice() {
   const [genres, setGenres] = useState([]);
@@ -13,32 +14,38 @@ function Choice() {
   const [message, setMessage] = useState(null);
   const [error, setError] = useState(null);
 
-  useEffect(async () => {
-    try {
+  useEffect(() => {
+    const fetchData = async () => {
       setLoading(true);
-      const responseGenres = await bookAPI.getBooksGenre();
-      const responseBooks = await bookAPI.getAll();
-      if (responseGenres.status === 200) {
-        setGenres(responseGenres.data);
+      try {
+        const responseGenres = await bookAPI.getBooksGenre();
+        const responseBooks = await bookAPI.getAll({ size: 100 });
+        if (responseGenres.status === 200) {
+          setGenres(responseGenres.data);
+        }
+        if (responseBooks.status === 200) {
+          setBooks(responseBooks.data.content);
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          setError(error.response.data.message);
+        } else {
+          setError("Ошибка загрузки с сервера");
+        }
+      } finally {
+        setLoading(false);
       }
-      if (responseBooks.status === 200) {
-        setBooks(responseBooks.data);
-      }
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        setError(error.response.data.message);
-      } else {
-        setError("Ошибка загрузки с сервера");
-      }
-    } finally {
-      setLoading(false);
-    }
+    };
+    fetchData();
   }, []);
+  books.map((book) => console.log(book.genre));
+  if (loading) return <Spinner animation="border" size="sm" />;
   return (
     <main className="container">
       <h1 className="text-center mb-5" style={{ color: "var(--accent)" }}>
         Книги по тематикам
       </h1>
+      {console.log(books + " ЭТО КНИГИ")}
       {error && <Alert variant="danger">{error}</Alert>}
       {message && <Alert variant="success">{message}</Alert>}
       <div className="row g-4">
@@ -49,14 +56,6 @@ function Choice() {
             listOfElements={books.filter((book) => book.genre === genre)}
           />
         ))}
-        {/* {data.map((item, index) => (
-          <CustomList
-            key={index}
-            id={item.id}
-            listOfElements={item.listOfElements}
-            title={item.title}
-          />
-        ))} */}
       </div>
     </main>
   );

online-library/src/Choice/CustomList/CustomList.jsx

@@ -1,14 +1,14 @@
 import ElementList from "../ElementList/ElementList";
 
-function CustomList({ title, listOfElements, id }) {
+function CustomList({ genre, listOfElements }) {
   return (
-    <div id={id} className="col-12">
+    <div id={genre} className="col-12">
       <div className="category-card p-4">
         <h2 className="mb-4" style={{ color: "var(--accent)" }}>
-          {title}
+          {genre}
         </h2>
         {listOfElements.map((item, index) => (
-          <ElementList key={index} title={item.title} />
+          <ElementList key={index} book={item}/>
         ))}
         <div className="list-group"></div>
       </div>

online-library/src/Choice/ElementList/ElementList.jsx

@@ -1,12 +1,12 @@
 import { NavLink } from "react-router-dom";
 
-function ElementList({ title }) {
+function ElementList({ book }) {
   return (
     <div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
-      <span>{title}</span>
+      <span>{book.title}</span>
 
       <NavLink
-        to="/infobook"
+        to={`/infobook/${book.id}`}
         className="btn btn-sm"
         style={{
           backgroundColor: "var(--accent)",

online-library/src/Main/Main.jsx

@@ -33,7 +33,6 @@ function Main() {
   return (
     <div className="container">
       <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
-        {console.log(bookData)}
         {bookData.map((book) => (
           <BookCard key={book.id} book={book}></BookCard>
         ))}

online-library/src/header/Headers.jsx

@@ -6,16 +6,34 @@ import { HashLink } from "react-router-hash-link";
 import { getAccessToken, removeAccessToken } from "../ApiRequest/JwtUtils";
 import { useEffect, useState } from "react";
 import axios from "axios";
-import { authAPI } from "../ApiRequest/ApiClient";
+import { authAPI, bookAPI } from "../ApiRequest/ApiClient";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 import { Alert } from "react-bootstrap";
 
 function Headers() {
+  const [genres, setGenres] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [message, setMessage] = useState(null);
   const navigate = useNavigate();
+  useEffect(() => {
+    const fettchData = async () => {
+      try {
+        const response = await bookAPI.getBooksGenre();
+        if (response.status === 200) {
+          setGenres(response.data);
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          setError(error.response?.data.message);
+        } else {
+          setError("Ошибка запроса к серверу, повторите позднее");
+        }
+      }
+    };
+    fettchData();
+  }, []);
   const logout = async () => {
     setLoading(true);
     try {
@@ -83,26 +101,17 @@ function Headers() {
                   Что выбрать
                 </NavLink>
                 <ul className="dropdown-menu">
-                  <li>
-                    <HashLink className="dropdown-item" to="/choice#военные">
-                      Военные книги
-                    </HashLink>
-                  </li>
-                  <li>
-                    <HashLink className="dropdown-item" to="/choice#наука">
-                      Научная литература
-                    </HashLink>
-                  </li>
-                  <li>
-                    <HashLink className="dropdown-item" to="/choice#детские">
-                      Детские книги
-                    </HashLink>
-                  </li>
-                  <li>
-                    <HashLink className="dropdown-item" to="/choice#психология">
-                      Психология
-                    </HashLink>
-                  </li>
+                  {genres.map((genre, index) => (
+                    <li>
+                      <HashLink
+                        className="dropdown-item"
+                        to="/choice"
+                        key={index}
+                      >
+                        {genre}
+                      </HashLink>
+                    </li>
+                  ))}
                 </ul>
               </li>
               {getAccessToken() ? (
@@ -115,7 +124,7 @@ function Headers() {
                   <li className="nav-item">
                     <button
                       className="nav-link nav-link-custom"
-                      onClick={logout}
+                      onClick={handleClick}
                     >
                       Выйти
                     </button>