From 524d9e3deb413d0e2f5e212641b82b96e0f663f7 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Tue, 7 Apr 2026 00:23:49 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20=D0=BA=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B4=D1=83=D0=BA=D1=82=D0=B0=D0=BC=20=D0=BF=D0=BE?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B6=D0=B0=D1=82=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA?=
 =?UTF-8?q?=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/catalog/CategoryCards.tsx | 19 +++++++++++++------
 src/pages/Products/Products.tsx        |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/features/catalog/CategoryCards.tsx b/src/features/catalog/CategoryCards.tsx
index 22c3f0b..aef5d71 100644
--- a/src/features/catalog/CategoryCards.tsx
+++ b/src/features/catalog/CategoryCards.tsx
@@ -1,18 +1,25 @@
 import React from "react";
 import styles from "./Catalog.module.css";
-import { useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { setSelectedCategory } from "./categoriesSlice";
+import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
 
-interface Props { 
-    onSelect?: (id:number) => void 
-}
 
-const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+const CategoryCards: React.FC = () => {
   const categories = useAppSelector(s => s.categories.items);
+  const dispatch = useAppDispatch();
+
+  const onSelect = (catId:number) => {
+    dispatch(setSelectedCategory(catId));
+        dispatch(setFilters({}));
+        dispatch(setPage(1));
+        dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  }
 
   return (
     <div className={styles.grid}>
       {categories.map(c => (
-        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+        <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>
diff --git a/src/pages/Products/Products.tsx b/src/pages/Products/Products.tsx
index 9961514..0be6057 100644
--- a/src/pages/Products/Products.tsx
+++ b/src/pages/Products/Products.tsx
@@ -15,7 +15,7 @@ const ProductsPage: React.FC = () => {
       <SidebarCategories />
       <div className={styles.content}>
         {!selectedCategoryId ? (
-          <CategoryCards onSelect={(id) => {}} />
+          <CategoryCards/>
         ) : (
           <>
             <div className={styles.leftControls}>