From e517c58d57bf3addaec23ca54702abacb6610dea Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Fri, 5 Dec 2025 00:10:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=82=D0=B0=D0=BB=D0=BE=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/features/catalog/Pagination.tsx     | 34 +++++++++++++
 front/src/features/catalog/ProductGrid.tsx    |  9 ++--
 .../features/catalog/SidebarCategories.tsx    |  4 +-
 front/src/pages/Products/Products.tsx         | 49 ++++++++++---------
 4 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 front/src/features/catalog/Pagination.tsx

diff --git a/front/src/features/catalog/Pagination.tsx b/front/src/features/catalog/Pagination.tsx
new file mode 100644
index 0000000..939d2a9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/front/src/features/catalog/ProductGrid.tsx b/front/src/features/catalog/ProductGrid.tsx
index 0ddbd2c..f02ad5b 100644
--- a/front/src/features/catalog/ProductGrid.tsx
+++ b/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) => (
diff --git a/front/src/features/catalog/SidebarCategories.tsx b/front/src/features/catalog/SidebarCategories.tsx
index 3844280..b573e26 100644
--- a/front/src/features/catalog/SidebarCategories.tsx
+++ b/front/src/features/catalog/SidebarCategories.tsx
@@ -34,4 +34,6 @@ const SidebarCategories: React.FC = () => {
             )}
         </aside>
     )
-}
\ No newline at end of file
+}
+
+export default SidebarCategories;
\ No newline at end of file
diff --git a/front/src/pages/Products/Products.tsx b/front/src/pages/Products/Products.tsx
index d0a2c3c..a4bf779 100644
--- a/front/src/pages/Products/Products.tsx
+++ b/front/src/pages/Products/Products.tsx
@@ -1,31 +1,36 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import type { RootState } from "../../app/store";
-import { getCategoryProducts } from "../../features/catalog/productsSlice";
-import CatalogSidebar from "../../features/catalog/catalogeSidebar"
+import React from "react";
+import styles from "./ProductsPage.module.css";
+import SidebarCategories from "../../features/catalog/SidebarCategories";
+import CategoryCards from "../../features/catalog/CategoryCards";
+import Filters from "../../features/catalog/CategoryFilters";
 import ProductGrid from "../../features/catalog/ProductGrid";
-import styles from "../../features/catalog/catalog.module.css";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import Pagination from "../../features/catalog/Pagination";
+import { useAppSelector } from "../../app/hooks";
 
-const CatalogPage: React.FC = () => {
-  const { category } = useParams<{ category: string }>();
-  const dispatch = useAppDispatch()
-  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);
-
-  useEffect(() => {
-    if (category) dispatch(getCategoryProducts(category));
-  }, [category]);
+const ProductsPage: React.FC = () => {
+  const { selectedCategoryId } = useAppSelector(s => s.categories);
 
   return (
-    <div className={styles.catalogWrapper}>
-      <CatalogSidebar />
-      <div className={styles.productsSection}>
-        {loading && <p>Загрузка...</p>}
-        {error && <p>Ошибка: {error}</p>}
-        <ProductGrid products={filtered} />
+    <div className={styles.wrapper}>
+      <SidebarCategories />
+      <div className={styles.content}>
+        {!selectedCategoryId ? (
+          <CategoryCards onSelect={(id) => {}} />
+        ) : (
+          <>
+            <div className={styles.leftControls}>
+              <Filters />
+            </div>
+
+            <div className={styles.productsArea}>
+              <ProductGrid />
+              <Pagination categoryId={selectedCategoryId} />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
 };
 
-export default CatalogPage;
\ No newline at end of file
+export default ProductsPage;
\ No newline at end of file