diff --git a/front/src/features/catalog/CategoryFilters.tsx b/front/src/features/catalog/CategoryFilters.tsx index 98cbbf2..a086911 100644 --- a/front/src/features/catalog/CategoryFilters.tsx +++ b/front/src/features/catalog/CategoryFilters.tsx @@ -1,22 +1,58 @@ import { useAppSelector, useAppDispatch } from "../../app/hooks"; -import { setSelectedCategory } from "../store/categoriesSlice"; +import { setSelectedCategory } from "./categoriesSlice"; import styles from "./CategoriesSidebar.module.css"; +import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice"; +import { useState } from "react"; -export const CategoriesSidebar = () => { - const { items, selectedCategoryId } = useAppSelector(s => s.categories); +export const CategoryFilters = () => { const dispatch = useAppDispatch(); + const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories); + const products = useAppSelector(s => s.products); + const cat = cats.find(x => x.id === selectedCategoryId); + const [local, setLocal] = useState>({}); + const apply = () => { + dispatch(setFilters(local)); + dispatch(setPage(1)); + if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local })); + }; + + if (!cat) return null; return ( -
- {items.map(cat => ( -
dispatch(setSelectedCategory(cat.id))} - > - {cat.name} -
- ))} +
+

ПАРАМЕТРЫ

+
+ {cat.atributes.map(attr => ( +
+
{`${attr.name}:`}
+
+ {attr.vals.map(v => { + const key = `attr_${attr.id}`; + const active = local[key]?.includes(v.val); + return ( + + ); + })} +
+
+ ))} +
+ +
+ + +
); -}; \ No newline at end of file +}; + +export default CategoryFilters; \ No newline at end of file