Genre WIP

package.json

@@ -28,6 +28,7 @@
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
     "i18next-http-middleware": "^3.7.1",
+    "qs": "^6.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.0",
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@eslint/js": "^9.17.0",
     "@rtk-query/codegen-openapi": "^2.0.0",
+    "@types/qs": "^6.9.18",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

src/AppRouter.tsx

@@ -6,16 +6,30 @@ import { Favourites } from "./pages/favourites/Favourites.tsx";
 import { CreateBook } from "./pages/createBook";
 import { Chat } from "./pages/chat/Chat.tsx";
 import { Profile } from "./pages/profile";
+import {
+  useFindAllGenreQuery,
+  useGetProfileQuery,
+} from "./services/api/sharebookApi.ts";
+import { useTranslation } from "react-i18next";
+import { Genre } from "./pages/genre";
 
 const Router = import.meta.env.SSR ? StaticRouter : BrowserRouter;
 
 export function AppRouter({ location }: { location: string }) {
+  const { i18n } = useTranslation();
+
+  useFindAllGenreQuery({ locale: i18n.language.split("-")[0] });
+  useGetProfileQuery({
+    userId: "-1",
+    zone: new Date().getTimezoneOffset() / -60,
+  });
+
   return (
     <Router location={location}>
       <HeaderComponent />
       <Routes>
         <Route index element={<Home />} />
-        <Route path="/filter/:genre" element={<Home />} />
+        <Route path="/genre/:genreId" element={<Genre />} />
         <Route path="/auth" element={<Auth />} />
         <Route path="/favourites" element={<Favourites />} />
         <Route path="/createBook" element={<CreateBook />} />

src/mainSlice.ts

@@ -0,0 +1,36 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { GenreDto, sharebookApi } from "./services/api/sharebookApi.ts";
+
+interface MainState {
+  genreMap: Record<string, GenreDto>;
+}
+
+const initialState: MainState = {
+  genreMap: {},
+};
+
+const mainSlice = createSlice({
+  name: "main",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addMatcher(
+      sharebookApi.endpoints.findAllGenre.matchFulfilled,
+      (state, { payload }) => {
+        const genreMap: Record<string, GenreDto> = {};
+
+        payload.forEach((item) => {
+          if (item.id && item.name) {
+            genreMap[item.id] = item;
+          }
+        });
+
+        state.genreMap = genreMap;
+      },
+    );
+  },
+});
+
+// export const {} = mainSlice.actions;
+
+export const mainReducer = mainSlice.reducer;

src/pages/genre/Genre.tsx

@@ -0,0 +1,22 @@
+import styles from "../home/home.module.scss";
+import { FilterComponent } from "../home/components/Filter";
+import { BookCardComponent } from "../home/components/BookCard";
+import { useSearchWithFiltersQuery } from "../../services/api/sharebookApi.ts";
+import { useParams } from "react-router";
+
+export function Genre() {
+  const { genreId } = useParams();
+
+  const { data } = useSearchWithFiltersQuery({
+    filters: {
+      genre: +(genreId ?? 1),
+    },
+  });
+
+  return (
+    <div className={styles.container}>
+      <FilterComponent />
+      <BookCardComponent books={data} />
+    </div>
+  );
+}

src/pages/genre/index.ts

@@ -0,0 +1 @@
+export { Genre } from "./Genre.tsx";

src/pages/home/components/BookCard/components/BookCard.tsx

@@ -2,10 +2,12 @@ import styles from "../bookCard.module.scss";
 import { Card } from "antd";
 import img1 from "../img/Image1.png";
 import { BookDto } from "../../../../../services/api/sharebookApi.ts";
+import { useAppSelector } from "../../../../../store.ts";
 
 export function BookCard({ book }: { book: BookDto }) {
   // @ts-expect-error WIP
   const attachment = book.attachment;
+  const genreMap = useAppSelector((state) => state.main.genreMap);
 
   return (
     <>
@@ -30,7 +32,9 @@ export function BookCard({ book }: { book: BookDto }) {
             <div className={styles.title}>{book.title}</div>
             <a className={styles.author}>{book.author}</a>
           </div>
-          <p className={styles.location}>{book.genre}</p>
+          {!!book.genre && (
+            <p className={styles.location}>{genreMap[book.genre].name}</p>
+          )}
         </div>
       </Card>
     </>

src/pages/home/components/Filter/components/FilterGenre.tsx

@@ -9,12 +9,11 @@ interface Genre {
 
 const genres: Genre[] = [
   { title: "Все", url: "/", id: "1" },
-  { title: "От ShareBook", url: "/filter/FromShareBook", id: "2" },
-  { title: "Детективы", url: "/filter/Detectives", id: "3" },
-  { title: "Романы", url: "/filter/Novels", id: "4" },
-  { title: "Научные", url: "/filter/Scientific", id: "5" },
-  { title: "Исскуство", url: "/filter/Art", id: "6" },
-  { title: "Учебные", url: "/filter/Tutorials", id: "7" },
+  { title: "Детективы", url: "/genre/11", id: "3" },
+  { title: "Романы", url: "/genre/1", id: "4" },
+  { title: "Научные", url: "/genre/29", id: "5" },
+  { title: "Ужасы", url: "/genre/15", id: "6" },
+  { title: "Учебник", url: "/genre/28", id: "7" },
 ];
 
 export function FilterGenre() {

src/services/api/sharebookApi.ts

@@ -239,7 +239,12 @@ const injectedRtkApi = api.injectEndpoints({
       }),
     }),
     findAllGenre: build.query<FindAllGenreApiResponse, FindAllGenreApiArg>({
-      query: () => ({ url: `/genre` }),
+      query: (queryArg) => ({
+        url: `/genre`,
+        params: {
+          locale: queryArg.locale,
+        },
+      }),
     }),
     generateLogin: build.query<GenerateLoginApiResponse, GenerateLoginApiArg>({
       query: () => ({ url: `/generate-login` }),
@@ -430,7 +435,9 @@ export type MailConfirmApiArg = {
 };
 export type FindAllGenreApiResponse =
   /** status 200 Список жанров */ GenreDto[];
-export type FindAllGenreApiArg = void;
+export type FindAllGenreApiArg = {
+  locale: string;
+};
 export type GenerateLoginApiResponse =
   /** status 200 Уникальный на данный момент логин */ OriginalLoginResponse;
 export type GenerateLoginApiArg = void;
@@ -623,8 +630,7 @@ export type UserPublicProfileDto = {
 };
 export type GenreDto = {
   id?: number;
-  ruName?: string;
-  engName?: string;
+  name?: string;
 };
 export type OriginalLoginResponse = {
   /** Уникальный логин */

src/services/auth/baseQueryWithReauth.ts

@@ -12,6 +12,7 @@ import {
   startRefresh,
 } from "./authSlice";
 import type { RootState } from "../../store";
+import qs from "qs";
 
 // const baseUrl =  import.meta.env.PROD ? "https://194.67.125.199:8443/" : "https://frontend-wmyr.onrender.com/"
 // Исходный fetchBaseQuery
@@ -37,6 +38,9 @@ const rawBaseQuery = fetchBaseQuery({
 
     return headers;
   },
+  paramsSerializer: (params) => {
+    return qs.stringify(params);
+  },
 });
 
 // Наша обёртка

src/store.ts

@@ -3,11 +3,13 @@ import { authReducer } from "./services/auth/authSlice";
 import { sharebookApi } from "./services/api/sharebookApi";
 import { chatReducer } from "./pages/chat/chatSlice.ts";
 import { useDispatch, useSelector } from "react-redux";
+import { mainReducer } from "./mainSlice.ts";
 
 const rootReducer = combineReducers({
   [sharebookApi.reducerPath]: sharebookApi.reducer,
   auth: authReducer,
   chat: chatReducer,
+  main: mainReducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;