Merge pull request 'Catalog-Page #3' (#6) from catalog-page into main

Reviewed-on: https://git.rustprogersteam.ru/PVHProject/PVHFrontend/pulls/6

front/src/api/client.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const API_BASE = g;/* process.env.REACT_APP_API_BASE || "";*/ 
+const client = axios.create({
+  baseURL: API_BASE,
+  headers: { "Content-Type": "application/json" },
+});
+
+export default client;

front/src/app/store.ts

@@ -1,14 +1,17 @@
 import { configureStore } from "@reduxjs/toolkit";
-import catalogReducer from "../features/catalog/catalogSlice";
+import catalogReducer from "../features/catalog/productsSlice";
+import categoriesReducer from "../features/catalog/categoriesSlice"
+import productsReducer from "../features/catalog/productsSlice"
 
 export const store = configureStore({
   reducer: {
-    catalog: catalogReducer,
+    categories: categoriesReducer,
+    products: productsReducer,
   },
-  middleware: (getDefaultMiddleware) =>
+  /*middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false, // отключаем для async thunk
-    }),
+    }),*/
 });
 
 export type RootState = ReturnType<typeof store.getState>;

front/src/features/catalog/CategoriesGrid.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { onSelect?: (id:number) => void }
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

front/src/features/catalog/CategoryCards.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { 
+    onSelect?: (id:number) => void 
+}
+
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

front/src/features/catalog/CategoryFilters.tsx

@@ -1,22 +1,58 @@
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setSelectedCategory } from "../store/categoriesSlice";
+import { setSelectedCategory } from "./categoriesSlice";
 import styles from "./CategoriesSidebar.module.css";
+import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
+import { useState } from "react";
 
-export const CategoriesSidebar = () => {
+export const CategoryFilters = () => {
-  const { items, selectedCategoryId } = useAppSelector(s => s.categories);
   const dispatch = useAppDispatch();
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const products = useAppSelector(s => s.products);
+  const cat = cats.find(x => x.id === selectedCategoryId);
+  const [local, setLocal] = useState<Record<string, (string|number)[]>>({});
 
+  const apply = () => {
+    dispatch(setFilters(local));
+    dispatch(setPage(1));
+    if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local }));
+  };
+
+  if (!cat) return null;
   return (
-    <div className={styles.sidebar}>
+    <div className={styles.wrap}>
-      {items.map(cat => (
+      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
-        <div
+      <div className={styles.blocks}>
-          key={cat.id}
+        {cat.atributes.map(attr => (
-          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+          <div key={attr.id} className={styles.block}>
-          onClick={() => dispatch(setSelectedCategory(cat.id))}
+            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
-        >
+            <div className={styles.options}>
-          {cat.name}
+              {attr.vals.map(v => {
-        </div>
+                const key = `attr_${attr.id}`;
-      ))}
+                const active = local[key]?.includes(v.val);
+                return (
+                  <label key={v.id} className={styles.opt}>
+                    <input type="checkbox"
+                      checked={!!active}
+                      onChange={() => {
+                        const cur = local[key] ?? [];
+                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        setLocal({ ...local, [key]: next });
+                      }} />
+                    {v.val}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+      </div>
     </div>
   );
-};
+};
+
+export default CategoryFilters;

front/src/features/catalog/Pagination.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styles from "./Pagination.module.css";
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import { setPage, fetchProductsByCategory } from "./productsSlice";
+
+interface Props { categoryId: number }
+
+const Pagination: React.FC<Props> = ({ categoryId }) => {
+  const dispatch = useAppDispatch();
+  const { total, page, limit } = useAppSelector(s => s.products);
+  const totalPages = Math.ceil(total / limit);
+  if (totalPages <= 1) return null;
+
+  const go = (p:number) => {
+    dispatch(setPage(p));
+    dispatch(fetchProductsByCategory({ categoryId, page: p, limit }));
+    window.scrollTo({ top: 200, behavior: "smooth" });
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <button className={styles.go} onClick={() => go(1)} disabled={page===1}>В НАЧАЛО</button>
+
+      <div className={styles.pages}>
+        {Array.from({length: totalPages}, (_,i) => i+1).map(p => (
+          <button key={p} className={`${styles.page} ${p===page?styles.active:""}`} onClick={() => go(p)}>{p}</button>
+        ))}
+      </div>
+
+      <button className={styles.go} onClick={() => go(totalPages)} disabled={page===totalPages}>В КОНЕЦ</button>
+    </div>
+  );
+};
+export default Pagination;

front/src/features/catalog/ProductGrid.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import type { Product } from "../../types/product";
 import ProductCard from "./ProductCard";
 import styles from "./Catalog.module.css";
+import { useAppSelector } from "../../app/hooks";
 
-interface Props {
-  products: Product[];
-}
 
-const ProductGrid: React.FC<Props> = ({ products }) => {
+const ProductGrid: React.FC = () => {
+  const {items: products} = useAppSelector(p => p.products)
+
   return (
     <div className={styles.grid}>
       {products.map((p) => (

front/src/features/catalog/SidebarCategories.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import styles from "./SidebarCategories.module.css";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
+import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
+
+const SidebarCategories: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+
+    useEffect(() => { 
+        dispatch(fetchCategories()); 
+    }, [dispatch]);
+
+    const onClick = (catId: number) => {
+    dispatch(setSelectedCategory(catId));
+    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setPage(1));
+    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  };
+    return(
+        <aside className={styles.sidebar}>
+            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+            {loading ? <p>Загрузка...</p> : (
+                <ul className={styles.list}>
+                {items.map(cat => (
+                    <li key={cat.id}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        onClick={() => onClick(cat.id)}>
+                    {cat.name}
+                    </li>
+                ))}
+                </ul>
+            )}
+        </aside>
+    )
+}
+
+export default SidebarCategories;

front/src/features/catalog/catalogSlice.ts

@@ -1,78 +0,0 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import type {PayloadAction} from "@reduxjs/toolkit";
-import { fetchCategoryProducts, fetchCategories } from "../../api/catalogApi";
-import type { Product } from "../../types/product";
-
-interface CatalogState {
-  products: Product[];
-  filtered: Product[];
-  loading: boolean;
-  error: string | null;
-  filters: Record<string, string[]>;
-  currentCategory: string | null;
-}
-
-const initialState: CatalogState = {
-  products: [],
-  filtered: [],
-  loading: false,
-  error: null,
-  filters: {},
-  currentCategory: null,
-};
-
-export const getCategories = createAsyncThunk(
-  "catalog/getCategories",
-  async (categoryid: string) => {
-    const data = await fetchCategories(categoryid);
-    return data;
-  }
-);
-
-export const getCategoryProducts = createAsyncThunk(
-  "catalog/getCategoryProducts",
-  async (category: string) => {
-    const data = await fetchCategoryProducts(category);
-    return data;
-  }
-);
-
-const catalogSlice = createSlice({
-  name: "catalog",
-  initialState,
-  reducers: {
-    setFilter(state, action: PayloadAction<{ name: string; value: string }>) {
-      const { name, value } = action.payload;
-      const active = state.filters[name] || [];
-      state.filters[name] = active.includes(value)
-        ? active.filter((v) => v !== value)
-        : [...active, value];
-    },
-    applyFilters(state) {
-      state.filtered = state.products.filter((p) =>
-        Object.entries(state.filters).every(([key, values]) =>
-          values.length ? values.includes(p[key as keyof Product] as string) : true
-        )
-      );
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(getCategoryProducts.pending, (state) => {
-        state.loading = true;
-        state.error = null;
-      })
-      .addCase(getCategoryProducts.fulfilled, (state, action) => {
-        state.loading = false;
-        state.products = action.payload;
-        state.filtered = action.payload;
-      })
-      .addCase(getCategoryProducts.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.error.message || "Ошибка загрузки данных";
-      });
-  },
-});
-
-export const { setFilter, applyFilters } = catalogSlice.actions;
-export default catalogSlice.reducer;

front/src/features/catalog/catalogeSidebar.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-import { useDispatch } from "react-redux";
-import { setFilter, applyFilters } from "./catalogSlice";
-import styles from "./Catalog.module.css";
-import type { Category } from "../../types/categories";
-import type { CategoryAtributes } from "../../types/categories";
-import type { CategoryAtrVals } from "../../types/categories";
-
-interface Props{
-  categories: Category[];
-  atributes: CategoryAtributes[]
-  atrVals: CategoryAtrVals[];
-}
-
-const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
-  const dispatch = useDispatch();
-
-  const handleFilterChange = (name: string, value: string) => {
-    dispatch(setFilter({ name, value }));
-    dispatch(applyFilters());
-  };
-
-  return (
-    <aside className={styles.sidebar}>
-      <h3>ПАРАМЕТРЫ</h3>
-      <div className={styles.filterGroup}>
-        <p>размер:</p>
-        {atributes.map((a) => (
-          <>
-            <p>{a.name}</p>
-              {atrVals.map((b) => (
-                <label>
-                  <input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
-                </label>
-              ))}
-          </>
-        ))}
-
-
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
-        </label>
-      </div>
-      <div className={styles.filterGroup}>
-        <p>Форма выпуска:</p>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
-        </label>
-      </div>
-    </aside>
-  );
-};
-
-export default CatalogSidebar;

front/src/features/catalog/categoriesSlice.ts

@@ -1,11 +1,12 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import type { Category } from "../../types/categories";
+import axios from "axios";
 
 export const fetchCategories = createAsyncThunk<Category[]>(
-  "categories/fetch",
+  "categories/fetchCategories",
   async () => {
-    const res = await fetch("/api/categories");
+    const res = await axios.get("/api/categories");
-    return await res.json();
+    return res.data;
   }
 );
 

front/src/features/catalog/productsSlice.ts

@@ -0,0 +1,95 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type {PayloadAction} from "@reduxjs/toolkit";
+import client from "../../api/client";
+import type { Product } from "../../types/product";
+import axios from "axios";
+
+interface FetchParams {
+  categoryId: number;
+  page?: number;
+  limit?: number;
+  filters?: Record<string, string | number | (string | number)[]>;
+}
+
+export const fetchProductsByCategory = createAsyncThunk(
+  "products/fetchByCategory",
+  async (params: FetchParams) => {
+    const { categoryId, page = 1, limit = 9, filters} = params;
+    const qp = new URLSearchParams();
+    qp.append("categoryId", String(categoryId));
+    qp.append("page", String(page));
+    qp.append("limit", String(limit));
+    if (filters) {
+      Object.keys(filters).forEach((k) => {
+        const v = filters[k];
+        if (Array.isArray(v)) qp.append(k, v.join(","));
+        else qp.append(k, String(v));
+      });
+    }
+    const res = await client.get(`/products?${qp.toString()}`);
+    // ожидаем { items: Product[], total: number, page: number, limit: number }
+    return res.data;
+  }
+);
+
+interface ProductsState {
+  items: Product[];
+  total: number;
+  page: number;
+  limit: number;
+  loading: boolean;
+  error: string | null;
+  filtersApplied: Record<string, (string|number)[]>;
+}
+
+const initialState: ProductsState = {
+  items: [],
+  total: 0,
+  page: 1,
+  limit: 9,
+  loading: false,
+  error: null,
+  filtersApplied: {},
+};
+
+const slice = createSlice({
+  name: "products",
+  initialState,
+  reducers: {
+    setPage(state, action: PayloadAction<number>) { 
+      state.page = action.payload; 
+    },
+    setLimit(state, action: PayloadAction<number>) { 
+      state.limit = action.payload; 
+    },
+    setFilters(state, action: PayloadAction<ProductsState["filtersApplied"]>) {
+      state.filtersApplied = action.payload;
+    },
+    resetProducts(state) {
+      state.items = [];
+      state.total = 0;
+      state.page = 1;
+    }
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchProductsByCategory.pending, (s) => { 
+        s.loading = true; 
+        s.error = null; 
+      })
+      .addCase(fetchProductsByCategory.fulfilled, (s, a) => {
+        s.loading = false;
+        s.items = a.payload.items;
+        s.total = a.payload.total;
+        s.page = a.payload.page ?? s.page;
+        s.limit = a.payload.limit ?? s.limit;
+      })
+      .addCase(fetchProductsByCategory.rejected, (s, a) => { 
+        s.loading = false; 
+        s.error = a.error.message ?? "Ошибка"; 
+      });
+  }
+});
+
+export const { setPage, setLimit, setFilters, resetProducts } = slice.actions;
+export default slice.reducer;

front/src/pages/Products/Products.tsx

@@ -1,31 +1,36 @@
-import React, { useEffect } from "react";
+import React from "react";
-import { useParams } from "react-router-dom";
+import styles from "./ProductsPage.module.css";
-import type { RootState } from "../../app/store";
+import SidebarCategories from "../../features/catalog/SidebarCategories";
-import { getCategoryProducts } from "../../features/catalog/catalogSlice";
+import CategoryCards from "../../features/catalog/CategoryCards";
-import CatalogSidebar from "../../features/catalog/catalogeSidebar"
+import Filters from "../../features/catalog/CategoryFilters";
 import ProductGrid from "../../features/catalog/ProductGrid";
-import styles from "../../features/catalog/catalog.module.css";
+import Pagination from "../../features/catalog/Pagination";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppSelector } from "../../app/hooks";
 
-const CatalogPage: React.FC = () => {
+const ProductsPage: React.FC = () => {
-  const { category } = useParams<{ category: string }>();
+  const { selectedCategoryId } = useAppSelector(s => s.categories);
-  const dispatch = useAppDispatch()
-  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);
-
-  useEffect(() => {
-    if (category) dispatch(getCategoryProducts(category));
-  }, [category]);
 
   return (
-    <div className={styles.catalogWrapper}>
+    <div className={styles.wrapper}>
-      <CatalogSidebar />
+      <SidebarCategories />
-      <div className={styles.productsSection}>
+      <div className={styles.content}>
-        {loading && <p>Загрузка...</p>}
+        {!selectedCategoryId ? (
-        {error && <p>Ошибка: {error}</p>}
+          <CategoryCards onSelect={(id) => {}} />
-        <ProductGrid products={filtered} />
+        ) : (
+          <>
+            <div className={styles.leftControls}>
+              <Filters />
+            </div>
+
+            <div className={styles.productsArea}>
+              <ProductGrid />
+              <Pagination categoryId={selectedCategoryId} />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
 };
 
-export default CatalogPage;
+export default ProductsPage;

front/src/types/categories.ts

@@ -12,5 +12,7 @@ export interface CategoryAtributes {
 export interface Category {
   id: number;
   name: string;
+  image?: string;
   atributes: CategoryAtributes[];
-}
+}
+

front/src/types/product.ts

@@ -3,6 +3,4 @@ export interface Product {
   name: string;
   image: string;
   description: string;
-  size: string;
-  category: string;
 }