написал логику отправки формы на бэк

Reviewed-on: https://git.rustprogersteam.ru/PVHProject/PVHFrontend/pulls/4

front/src/api/client.ts

@@ -1,9 +0,0 @@
-import axios from "axios";
-
-export const API_BASE = g;/* process.env.REACT_APP_API_BASE || "";*/ 
-const client = axios.create({
-  baseURL: API_BASE,
-  headers: { "Content-Type": "application/json" },
-});
-
-export default client;

front/src/app/routes.tsx

@@ -4,7 +4,6 @@ import { Route } from "react-router";
 import Main from "../pages/Main/Main";
 import About from "../pages/About/About";
 import Products from "../pages/Products/Products";
-import ItemPage from "../pages/ItemPage/ItemPage";
 
 function AppRoutes() {
   return (  
@@ -13,7 +12,6 @@ function AppRoutes() {
         <Route index element={<Main />} />
         <Route path="about" element={<About />} />
         <Route path="products" element={<Products />} />
-        <Route path="/product/:id" element={<ItemPage />} />
       </Route>
     </Routes>
   )

front/src/app/store.ts

@@ -1,17 +1,14 @@
 import { configureStore } from "@reduxjs/toolkit";
-import catalogReducer from "../features/catalog/productsSlice";
+import catalogReducer from "../features/catalog/catalogSlice";
-import categoriesReducer from "../features/catalog/categoriesSlice"
-import productsReducer from "../features/catalog/productsSlice"
 
 export const store = configureStore({
   reducer: {
-    categories: categoriesReducer,
+    catalog: catalogReducer,
-    products: productsReducer,
   },
-  /*middleware: (getDefaultMiddleware) =>
+  middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false, // отключаем для async thunk
-    }),*/
+    }),
 });
 
 export type RootState = ReturnType<typeof store.getState>;

front/src/components/PriceLisForm/PriceLisForm.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import styles from "./ModalRequestForm.module.css";
+import Button from "../Button/Button";
+import axios from "axios";
+
+// ✅ Схема валидации
+const schema = yup.object().shape({
+  name: yup.string().required("Введите имя"),
+  email: yup.string().email("Некорректный Email").required("Введите Email"),
+  phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
+});
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface FormData {
+  name: string;
+  email: string;
+  phone: string;
+}
+
+const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
+    console.log('ModalRequestForm render, open:', open); 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm({ resolver: yupResolver(schema) });
+
+  const handlePhoneInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.replace(/\D/g, '');
+    
+    if (value.startsWith('7') || value.startsWith('8')) {
+      value = value.substring(1);
+    }
+    
+    let formattedValue = '+7 ';
+    
+    if (value.length > 0) {
+      formattedValue += '(' + value.substring(0, 3);
+    }
+    if (value.length > 3) {
+      formattedValue += ') ' + value.substring(3, 6);
+    }
+    if (value.length > 6) {
+      formattedValue += '-' + value.substring(6, 8);
+    }
+    if (value.length > 8) {
+      formattedValue += '-' + value.substring(8, 10);
+    }
+    
+    e.target.value = formattedValue;
+  };
+
+  const sendToBackend = async (data: FormData): Promise<boolean> => {
+    try{
+      const response = await axios.post("/api/requests", {
+      ...data,
+      source: "website-form",
+      timestamp: new Date().toISOString(),
+    })
+
+      return response.data.success;
+    }catch (error: any){
+      console.error("Error sending request:", error);
+
+      throw new Error("Не удалось отправить заявку. Попробуйте позже.");
+    }
+  };
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      await sendToBackend(data);
+      
+      Modal.success({
+        title: "Прайс-лист отправлен!",
+        okText: "Хорошо",
+      });
+      
+      reset();
+      onClose();
+    } catch (error) {
+      Modal.error({
+        title: "Ошибка",
+        content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
+        okText: "Понятно",
+      });
+    }
+  };
+
+  return (
+    <Modal 
+      open={open} 
+      footer={null} 
+      onCancel={onClose} 
+      centered 
+      width={620}
+      closable={!isSubmitting}
+      maskClosable={!isSubmitting}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className={styles.modalBox}
+      >
+        <h2 className={styles.title}>СКАЧАЙТЕ ПРАЙС_ЛИСТ</h2>
+        <p className={styles.subtitle}>
+          Заполните форму ниже, и прайс-лист будт выслан вам на почту
+        </p>
+
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите имя *" 
+              {...register("name")}
+              disabled={isSubmitting}
+            />
+            {errors.name && <span className={styles.error}>{errors.name.message}</span>}
+          </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите email *" 
+              {...register("email")}
+              disabled={isSubmitting}
+            />
+            {errors.email && <span className={styles.error}>{errors.email.message}</span>}
+          </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="+7 (___) ___-__-__ *" 
+              {...register("phone")}
+              onInput={handlePhoneInput}
+              disabled={isSubmitting}
+            />
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>
+
+          <Button 
+            label={isSubmitting ? "ОТПРАВКА..." : "СКАЧАТЬ ПРАЙС-ЛИСТ"} 
+            className={styles.button}
+          />
+        </form>
+      </motion.div>
+    </Modal>
+  );
+};
+
+export default PriceLisForm;

front/src/components/QuestionsBlock/QuestionsBlock.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styles from "./QuestionsBlock.module.css";
 import Button from "../Button/Button";
 import { PhoneOutlined } from "@ant-design/icons";
+import PhoneRequest from "../../features/MainPage/PhoneRequest";
 
 const QuestionsBlock: React.FC = () => {
 
@@ -39,7 +40,7 @@ const QuestionsBlock: React.FC = () => {
           </p>
 
           {/* FORM */}
-          <div className={styles.form}>
+          {/*<div className={styles.form}>
             <input
               type="text"
               placeholder="+7 (___) ___-__-__"
@@ -49,7 +50,8 @@ const QuestionsBlock: React.FC = () => {
                                 label="ОТПРАВИТЬ" 
                                 onClick={handleClick}
                             />
-          </div>
+          </div>*/}
+          <PhoneRequest/>
         </div>
       </div>
     </section>

front/src/features/MainPage/MainPage.module.css

@@ -0,0 +1,26 @@
+.form {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.input {
+  flex: 1;
+  padding: 18px 24px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  outline: none;
+}
+
+.error {
+  color: red;
+  margin-top: 10px;
+}
+
+.success {
+  color: green;
+  margin-top: 10px;
+}
+

front/src/features/MainPage/PhoneRequest.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import axios from "axios";
+import styles from "./MainPage.module.css";
+import Button from "../../components/Button/Button";
+
+interface Props {
+  onSend?: (phone: string) => Promise<void>;
+}
+
+const PhoneRequest: React.FC<Props> = ({ onSend }) => {
+  const [phone, setPhone] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  // Автоформатирование "+7 (999) 999-99-99"
+  const formatPhone = (value: string) => {
+    const digits = value.replace(/\D/g, "");
+
+    let result = "+7 ";
+    if (digits.length > 1) result += "(" + digits.substring(1, 4);
+    if (digits.length >= 4) result += ") " + digits.substring(4, 7);
+    if (digits.length >= 7) result += "-" + digits.substring(7, 9);
+    if (digits.length >= 9) result += "-" + digits.substring(9, 11);
+
+    return result;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let v = e.target.value;
+
+    if (v.replace(/\D/g, "").length === 0) {
+      setPhone("");
+      return;
+    }
+
+    if (v[0] !== "+") {
+      v = "+7" + v;
+    }
+
+    setPhone(formatPhone(v));
+  };
+
+  const validatePhone = (p: string) => {
+    return p.replace(/\D/g, "").length === 11;
+  };
+
+  const handleSubmit = async () => {
+    setError("");
+
+    if (!validatePhone(phone)) {
+      setError("Введите корректный номер телефона");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      if (onSend) {
+        await onSend(phone);
+      } else {
+        
+        await axios.post("/api/contact/send-phone", { phone });
+      }
+
+      setSuccess(true);
+      setPhone("");
+
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (e) {
+      setError("Ошибка отправки. Попробуйте позже.");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className={styles.form}>
+      <input
+        className={styles.input}
+        placeholder="+7 (___) ___-__-__"
+        type="tel"
+        value={phone}
+        onChange={handlePhoneChange}
+        maxLength={18}
+      />
+    <Button 
+                                label="ОТПРАВИТЬ" 
+                                onClick={handleSubmit}
+                            />
+      {/*<button
+        className={styles.button}
+        onClick={handleSubmit}
+        disabled={loading}
+      >
+        {loading ? "..." : "ОТПРАВИТЬ"}
+      </button>*/}
+
+      {error && <p className={styles.error}>{error}</p>}
+      {success && <p className={styles.success}>Заявка отправлена!</p>}
+    </div>
+  );
+};
+
+export default PhoneRequest;

front/src/features/catalog/CategoriesGrid.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import styles from "./CategoryCards.module.css";
-import { useAppSelector } from "../../app/hooks";
-
-interface Props { onSelect?: (id:number) => void }
-const CategoryCards: React.FC<Props> = ({ onSelect }) => {
-  const categories = useAppSelector(s => s.categories.items);
-
-  return (
-    <div className={styles.grid}>
-      {categories.map(c => (
-        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
-          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
-          <div className={styles.name}>{c.name}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-export default CategoryCards;

front/src/features/catalog/CategoryCards.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import styles from "./CategoryCards.module.css";
-import { useAppSelector } from "../../app/hooks";
-
-interface Props { 
-    onSelect?: (id:number) => void 
-}
-
-const CategoryCards: React.FC<Props> = ({ onSelect }) => {
-  const categories = useAppSelector(s => s.categories.items);
-
-  return (
-    <div className={styles.grid}>
-      {categories.map(c => (
-        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
-          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
-          <div className={styles.name}>{c.name}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-export default CategoryCards;

front/src/features/catalog/CategoryFilters.tsx

@@ -1,58 +1,22 @@
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setSelectedCategory } from "./categoriesSlice";
+import { setSelectedCategory } from "../store/categoriesSlice";
 import styles from "./CategoriesSidebar.module.css";
-import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
-import { useState } from "react";
 
-export const CategoryFilters = () => {
+export const CategoriesSidebar = () => {
+  const { items, selectedCategoryId } = useAppSelector(s => s.categories);
   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.wrap}>
+    <div className={styles.sidebar}>
-      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      {items.map(cat => (
-      <div className={styles.blocks}>
+        <div
-        {cat.atributes.map(attr => (
+          key={cat.id}
-          <div key={attr.id} className={styles.block}>
+          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
-            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+          onClick={() => dispatch(setSelectedCategory(cat.id))}
-            <div className={styles.options}>
+        >
-              {attr.vals.map(v => {
+          {cat.name}
-                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;

front/src/features/catalog/Pagination.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import styles from "./Pagination.module.css";
-import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setPage, fetchProductsByCategory } from "./productsSlice";
-
-interface Props { categoryId: number }
-
-const Pagination: React.FC<Props> = ({ categoryId }) => {
-  const dispatch = useAppDispatch();
-  const { total, page, limit } = useAppSelector(s => s.products);
-  const totalPages = Math.ceil(total / limit);
-  if (totalPages <= 1) return null;
-
-  const go = (p:number) => {
-    dispatch(setPage(p));
-    dispatch(fetchProductsByCategory({ categoryId, page: p, limit }));
-    window.scrollTo({ top: 200, behavior: "smooth" });
-  }
-
-  return (
-    <div className={styles.wrap}>
-      <button className={styles.go} onClick={() => go(1)} disabled={page===1}>В НАЧАЛО</button>
-
-      <div className={styles.pages}>
-        {Array.from({length: totalPages}, (_,i) => i+1).map(p => (
-          <button key={p} className={`${styles.page} ${p===page?styles.active:""}`} onClick={() => go(p)}>{p}</button>
-        ))}
-      </div>
-
-      <button className={styles.go} onClick={() => go(totalPages)} disabled={page===totalPages}>В КОНЕЦ</button>
-    </div>
-  );
-};
-export default Pagination;

front/src/features/catalog/ProductCard.tsx

@@ -1,20 +1,14 @@
 import React from "react";
 import type { Product } from "../../types/product";
 import styles from "./Catalog.module.css";
-import { useNavigate } from "react-router-dom";
 
 interface Props {
     product: Product;
 }
 
 const ProductCard: React.FC<Props> = ({ product }) => {
-  const navigate = useNavigate();
-
   return (
-    <div 
+    <div className={styles.card}>
-      className={styles.card}
-      onClick={() => navigate(`/product/${product.id}`)}
-    >
       <img src={product.image} alt={product.name} />
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>

front/src/features/catalog/ProductGrid.tsx

@@ -1,12 +1,13 @@
 import React from "react";
+import type { Product } from "../../types/product";
 import ProductCard from "./ProductCard";
 import styles from "./Catalog.module.css";
-import { useAppSelector } from "../../app/hooks";
 
+interface Props {
+  products: Product[];
+}
 
-const ProductGrid: React.FC = () => {
+const ProductGrid: React.FC<Props> = ({ products }) => {
-  const {items: products} = useAppSelector(p => p.products)
-
   return (
     <div className={styles.grid}>
       {products.map((p) => (

front/src/features/catalog/SidebarCategories.tsx

@@ -1,39 +0,0 @@
-import React, { useEffect } from "react";
-import styles from "./SidebarCategories.module.css";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
-import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
-
-const SidebarCategories: React.FC = () => {
-    const dispatch = useAppDispatch();
-    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
-
-    useEffect(() => { 
-        dispatch(fetchCategories()); 
-    }, [dispatch]);
-
-    const onClick = (catId: number) => {
-    dispatch(setSelectedCategory(catId));
-    dispatch(setFilters({})); // сброс фильтров
-    dispatch(setPage(1));
-    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
-  };
-    return(
-        <aside className={styles.sidebar}>
-            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
-            {loading ? <p>Загрузка...</p> : (
-                <ul className={styles.list}>
-                {items.map(cat => (
-                    <li key={cat.id}
-                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
-                        onClick={() => onClick(cat.id)}>
-                    {cat.name}
-                    </li>
-                ))}
-                </ul>
-            )}
-        </aside>
-    )
-}
-
-export default SidebarCategories;

front/src/features/catalog/catalogSlice.ts

@@ -0,0 +1,78 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type {PayloadAction} from "@reduxjs/toolkit";
+import { fetchCategoryProducts, fetchCategories } from "../../api/catalogApi";
+import type { Product } from "../../types/product";
+
+interface CatalogState {
+  products: Product[];
+  filtered: Product[];
+  loading: boolean;
+  error: string | null;
+  filters: Record<string, string[]>;
+  currentCategory: string | null;
+}
+
+const initialState: CatalogState = {
+  products: [],
+  filtered: [],
+  loading: false,
+  error: null,
+  filters: {},
+  currentCategory: null,
+};
+
+export const getCategories = createAsyncThunk(
+  "catalog/getCategories",
+  async (categoryid: string) => {
+    const data = await fetchCategories(categoryid);
+    return data;
+  }
+);
+
+export const getCategoryProducts = createAsyncThunk(
+  "catalog/getCategoryProducts",
+  async (category: string) => {
+    const data = await fetchCategoryProducts(category);
+    return data;
+  }
+);
+
+const catalogSlice = createSlice({
+  name: "catalog",
+  initialState,
+  reducers: {
+    setFilter(state, action: PayloadAction<{ name: string; value: string }>) {
+      const { name, value } = action.payload;
+      const active = state.filters[name] || [];
+      state.filters[name] = active.includes(value)
+        ? active.filter((v) => v !== value)
+        : [...active, value];
+    },
+    applyFilters(state) {
+      state.filtered = state.products.filter((p) =>
+        Object.entries(state.filters).every(([key, values]) =>
+          values.length ? values.includes(p[key as keyof Product] as string) : true
+        )
+      );
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(getCategoryProducts.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(getCategoryProducts.fulfilled, (state, action) => {
+        state.loading = false;
+        state.products = action.payload;
+        state.filtered = action.payload;
+      })
+      .addCase(getCategoryProducts.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || "Ошибка загрузки данных";
+      });
+  },
+});
+
+export const { setFilter, applyFilters } = catalogSlice.actions;
+export default catalogSlice.reducer;

front/src/features/catalog/catalogeSidebar.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { setFilter, applyFilters } from "./catalogSlice";
+import styles from "./Catalog.module.css";
+import type { Category } from "../../types/categories";
+import type { CategoryAtributes } from "../../types/categories";
+import type { CategoryAtrVals } from "../../types/categories";
+
+interface Props{
+  categories: Category[];
+  atributes: CategoryAtributes[]
+  atrVals: CategoryAtrVals[];
+}
+
+const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
+  const dispatch = useDispatch();
+
+  const handleFilterChange = (name: string, value: string) => {
+    dispatch(setFilter({ name, value }));
+    dispatch(applyFilters());
+  };
+
+  return (
+    <aside className={styles.sidebar}>
+      <h3>ПАРАМЕТРЫ</h3>
+      <div className={styles.filterGroup}>
+        <p>размер:</p>
+        {atributes.map((a) => (
+          <>
+            <p>{a.name}</p>
+              {atrVals.map((b) => (
+                <label>
+                  <input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
+                </label>
+              ))}
+          </>
+        ))}
+
+
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
+        </label>
+      </div>
+      <div className={styles.filterGroup}>
+        <p>Форма выпуска:</p>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
+        </label>
+      </div>
+    </aside>
+  );
+};
+
+export default CatalogSidebar;

front/src/features/catalog/categoriesSlice.ts

@@ -1,12 +1,11 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import type { Category } from "../../types/categories";
-import axios from "axios";
 
 export const fetchCategories = createAsyncThunk<Category[]>(
-  "categories/fetchCategories",
+  "categories/fetch",
   async () => {
-    const res = await axios.get("/api/categories");
+    const res = await fetch("/api/categories");
-    return res.data;
+    return await res.json();
   }
 );
 

front/src/features/catalog/productsSlice.ts

@@ -1,103 +0,0 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import type {PayloadAction} from "@reduxjs/toolkit";
-import client from "../../api/client";
-import type { Product } from "../../types/product";
-import axios from "axios";
-
-interface FetchParams {
-  categoryId: number;
-  page?: number;
-  limit?: number;
-  filters?: Record<string, string | number | (string | number)[]>;
-}
-
-export const fetchProductsByCategory = createAsyncThunk(
-  "products/fetchByCategory",
-  async (params: FetchParams) => {
-    const { categoryId, page = 1, limit = 9, filters} = params;
-    const qp = new URLSearchParams();
-    qp.append("categoryId", String(categoryId));
-    qp.append("page", String(page));
-    qp.append("limit", String(limit));
-    if (filters) {
-      Object.keys(filters).forEach((k) => {
-        const v = filters[k];
-        if (Array.isArray(v)) qp.append(k, v.join(","));
-        else qp.append(k, String(v));
-      });
-    }
-    const res = await client.get(`/products?${qp.toString()}`);
-    // ожидаем { items: Product[], total: number, page: number, limit: number }
-    return res.data;
-  }
-);
-
-export const fetchProductById = createAsyncThunk(
-  "product/fetchById",
-  async (id: string) => {
-    const response = await axios.get(`/api/products/${id}`);
-    return response.data;
-  }
-);
-
-interface ProductsState {
-  items: Product[];
-  total: number;
-  page: number;
-  limit: number;
-  loading: boolean;
-  error: string | null;
-  filtersApplied: Record<string, (string|number)[]>;
-}
-
-const initialState: ProductsState = {
-  items: [],
-  total: 0,
-  page: 1,
-  limit: 9,
-  loading: false,
-  error: null,
-  filtersApplied: {},
-};
-
-const slice = createSlice({
-  name: "products",
-  initialState,
-  reducers: {
-    setPage(state, action: PayloadAction<number>) { 
-      state.page = action.payload; 
-    },
-    setLimit(state, action: PayloadAction<number>) { 
-      state.limit = action.payload; 
-    },
-    setFilters(state, action: PayloadAction<ProductsState["filtersApplied"]>) {
-      state.filtersApplied = action.payload;
-    },
-    resetProducts(state) {
-      state.items = [];
-      state.total = 0;
-      state.page = 1;
-    }
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchProductsByCategory.pending, (s) => { 
-        s.loading = true; 
-        s.error = null; 
-      })
-      .addCase(fetchProductsByCategory.fulfilled, (s, a) => {
-        s.loading = false;
-        s.items = a.payload.items;
-        s.total = a.payload.total;
-        s.page = a.payload.page ?? s.page;
-        s.limit = a.payload.limit ?? s.limit;
-      })
-      .addCase(fetchProductsByCategory.rejected, (s, a) => { 
-        s.loading = false; 
-        s.error = a.error.message ?? "Ошибка"; 
-      });
-  }
-});
-
-export const { setPage, setLimit, setFilters, resetProducts } = slice.actions;
-export default slice.reducer;

front/src/pages/ItemPage/ItemPage.module.css

@@ -1,93 +0,0 @@
-.page {
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.top {
-  background: #000;
-  padding: 15px 40px;
-}
-
-.back {
-  color: white;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.hero {
-  display: flex;
-  min-height: 500px;
-}
-
-.left {
-  flex: 1;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.left img {
-  max-width: 400px;
-}
-
-.right {
-  flex: 1;
-  background: linear-gradient(
-      rgba(0, 0, 0, 0.7),
-      rgba(0, 0, 0, 0.7)
-    ),
-    url("/bg.jpg");
-  color: white;
-  padding: 80px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.breadcrumbs {
-  color: #f5c400;
-  margin-bottom: 20px;
-}
-
-.download {
-  margin-top: 30px;
-  background: #f5c400;
-  border: none;
-  padding: 15px 40px;
-  border-radius: 30px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.tabs {
-  display: flex;
-  border-top: 1px solid #ddd;
-}
-
-.tabs button {
-  flex: 1;
-  padding: 20px;
-  border: none;
-  background: #eee;
-  cursor: pointer;
-}
-
-.active {
-  background: white;
-  font-weight: bold;
-}
-
-.content {
-  padding: 40px;
-  background: white;
-}
-
-.attrRow {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid #eee;
-}

front/src/pages/ItemPage/ItemPage.tsx

@@ -1,98 +0,0 @@
-import { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { fetchProductById } from "../../features/catalog/productsSlice";
-import styles from "./ProductPage.module.css";
-import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
-
-const ItemPage = () => {
-    const { id } = useParams();
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-  const { items, loading } = useAppSelector((state) => state.products);
-  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
-
-  const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
-
-  useEffect(() => {
-    if (id) dispatch(fetchProductById(id));
-  }, [id]);
-
-  const product = items.find((item) => item.id === Number(id));
-  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
-
-  if ((loading || !product)) return <div>Загрузка...</div>;
-  if(!category) return <div>Загрузка...</div>;
-
-  return (
-    <div className={styles.page}>
-      <div className={styles.top}>
-        <button className={styles.back} onClick={() => navigate(-1)}>
-          ← НАЗАД В КАТАЛОГ
-        </button>
-      </div>
-
-      <div className={styles.hero}>
-        <div className={styles.left}>
-          <img src={product.image} alt={product.name} />
-        </div>
-
-        <div className={styles.right}>
-          <div className={styles.breadcrumbs}>
-            ГЛАВНАЯ / {category?.name} / {product.name}
-          </div>
-
-          <h1>{product.name}</h1>
-
-          <p className={styles.short}>{product.description}</p>
-
-          <button className={styles.download}>
-            СКАЧАТЬ ПРАЙС-ЛИСТ
-          </button>
-        </div>
-      </div>
-
-      <div className={styles.tabs}>
-        <button
-          className={activeTab === "desc" ? styles.active : ""}
-          onClick={() => setActiveTab("desc")}
-        >
-          ОПИСАНИЕ
-        </button>
-        <button
-          className={activeTab === "chars" ? styles.active : ""}
-          onClick={() => setActiveTab("chars")}
-        >
-          ХАРАКТЕРИСТИКИ
-        </button>
-      </div>
-
-      <div className={styles.content}>
-        {activeTab === "desc" && (
-          <div>
-            <h2>ОПИСАНИЕ</h2>
-            <p>{product.description}</p>
-          </div>
-        )}
-
-        {activeTab === "chars" && (
-          <div>
-            <h2>ХАРАКТЕРИСТИКИ</h2>
-            {category.atributes?.map((attr: CategoryAtributes) => (
-              <div key={attr.id} className={styles.attrRow}>
-                <span>{attr.name}</span>
-                {attr.vals?.map((val: CategoryAtrVals) => (
-                  <div key={val.id}>
-                    <span>{val.val}</span>
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ItemPage;

front/src/pages/Products/Products.tsx

@@ -1,36 +1,31 @@
-import React from "react";
+import React, { useEffect } from "react";
-import styles from "./ProductsPage.module.css";
+import { useParams } from "react-router-dom";
-import SidebarCategories from "../../features/catalog/SidebarCategories";
+import type { RootState } from "../../app/store";
-import CategoryCards from "../../features/catalog/CategoryCards";
+import { getCategoryProducts } from "../../features/catalog/catalogSlice";
-import Filters from "../../features/catalog/CategoryFilters";
+import CatalogSidebar from "../../features/catalog/catalogeSidebar"
 import ProductGrid from "../../features/catalog/ProductGrid";
-import Pagination from "../../features/catalog/Pagination";
+import styles from "../../features/catalog/catalog.module.css";
-import { useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
 
-const ProductsPage: React.FC = () => {
+const CatalogPage: React.FC = () => {
-  const { selectedCategoryId } = useAppSelector(s => s.categories);
+  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.wrapper}>
+    <div className={styles.catalogWrapper}>
-      <SidebarCategories />
+      <CatalogSidebar />
-      <div className={styles.content}>
+      <div className={styles.productsSection}>
-        {!selectedCategoryId ? (
+        {loading && <p>Загрузка...</p>}
-          <CategoryCards onSelect={(id) => {}} />
+        {error && <p>Ошибка: {error}</p>}
-        ) : (
+        <ProductGrid products={filtered} />
-          <>
-            <div className={styles.leftControls}>
-              <Filters />
-            </div>
-
-            <div className={styles.productsArea}>
-              <ProductGrid />
-              <Pagination categoryId={selectedCategoryId} />
-            </div>
-          </>
-        )}
       </div>
     </div>
   );
 };
 
-export default ProductsPage;
+export default CatalogPage;

front/src/types/categories.ts

@@ -12,7 +12,5 @@ export interface CategoryAtributes {
 export interface Category {
   id: number;
   name: string;
-  image?: string;
   atributes: CategoryAtributes[];
 }
-

front/src/types/product.ts

@@ -3,4 +3,6 @@ export interface Product {
   name: string;
   image: string;
   description: string;
+  size: string;
+  category: string;
 }