31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import type { RootState } from "../../app/store";
|
|
import { getCategoryProducts } from "../../features/catalog/catalogSlice";
|
|
import CatalogSidebar from "../../features/catalog/catalogeSidebar"
|
|
import ProductGrid from "../../features/catalog/ProductGrid";
|
|
import styles from "../../features/catalog/catalog.module.css";
|
|
import { useAppDispatch, 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]);
|
|
|
|
return (
|
|
<div className={styles.catalogWrapper}>
|
|
<CatalogSidebar />
|
|
<div className={styles.productsSection}>
|
|
{loading && <p>Загрузка...</p>}
|
|
{error && <p>Ошибка: {error}</p>}
|
|
<ProductGrid products={filtered} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CatalogPage; |