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

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;
+export default ProductsPage;