переписал перебор фильтров под новую логику

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<Record<string, (string|number)[]>>({});
 
+  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 (
-    <div className={styles.sidebar}>
-      {items.map(cat => (
-        <div
-          key={cat.id}
-          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
-          onClick={() => dispatch(setSelectedCategory(cat.id))}
-        >
-          {cat.name}
-        </div>
-      ))}
+    <div className={styles.wrap}>
+      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      <div className={styles.blocks}>
+        {cat.atributes.map(attr => (
+          <div key={attr.id} className={styles.block}>
+            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+            <div className={styles.options}>
+              {attr.vals.map(v => {
+                const key = `attr_${attr.id}`;
+                const active = local[key]?.includes(v.val);
+                return (
+                  <label key={v.id} className={styles.opt}>
+                    <input type="checkbox"
+                      checked={!!active}
+                      onChange={() => {
+                        const cur = local[key] ?? [];
+                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        setLocal({ ...local, [key]: next });
+                      }} />
+                    {v.val}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+      </div>
     </div>
   );
-};
+};
+
+export default CategoryFilters;