дописал каталог

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

@@ -34,4 +34,6 @@ const SidebarCategories: React.FC = () => {
             )}
         </aside>
     )
-}
+}
+
+export default SidebarCategories;

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/productsSlice";
+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;