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 = ({ 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 (
{categories.map(c => ( -
onSelect?.(c.id)}> +
onSelect(c.id)}> {c.image ? {c.name} : {c.name}}
{c.name}
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 = () => {
{!selectedCategoryId ? ( - {}} /> + ) : ( <>