GLOBAL PATCH

src/pages/ItemPage/ItemPage.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeftOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { fetchProductById, setSelectedProducts } from "../../features/catalog/productsSlice";
+import { fetchProductById } from "../../features/catalog/productsSlice";
 import styles from "./ItemPage.module.css";
-import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
 import Button from "../../components/Button/Button";
 import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
 import ProductAttributes from "../../components/Table/ProducTable";
-import { p, title } from "framer-motion/client";
 import Link from "antd/es/typography/Link";
 import { setSelectedCategory } from "../../features/catalog/categoriesSlice";
 
@@ -16,103 +15,108 @@ const ItemPage = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { items, loading } = useAppSelector((state) => state.products);
-  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const { items: cats, selectedCategoryId } = useAppSelector((s) => s.categories);
 
   const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
-
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (id) dispatch(fetchProductById(id));
-  }, [id]);
+  }, [dispatch, id]);
 
   const product = items.find((item) => item.id === Number(id));
-  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
+  const category = cats.find((cat) => cat.id === Number(selectedCategoryId));
 
-  if ((loading || !product)) return <div>Загрузка...</div>;
-  if(!category) return <div>Загрузка...</div>;
+  if (loading || !product) {
+    return <div className={styles.loading}>Загрузка...</div>;
+  }
+
+  if (!category) {
+    return <div className={styles.loading}>Загрузка...</div>;
+  }
 
   return (
-    <div className={styles.page}>
-      <PriceLisForm open={open} onClose={() => setOpen(false)}/>
+    <main className={styles.page}>
+      <PriceLisForm open={open} onClose={() => setOpen(false)} />
+
       <div className={styles.top}>
         <button className={styles.back} onClick={() => navigate(-1)}>
-          ← НАЗАД В КАТАЛОГ
+          <ArrowLeftOutlined />
+          Назад в каталог
         </button>
       </div>
 
-      <div className={styles.hero}>
+      <section className={styles.hero}>
         <div className={styles.left}>
           <img src={product.images[0]} alt={product.name} />
         </div>
 
         <div className={styles.right}>
-          <div className={styles.rightContent}>
           <div className={styles.breadcrumbs}>
-            <Link onClick={() => {navigate('/products'); dispatch(setSelectedCategory(null))}} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>КАТЕГОРИИ</Link> / <Link onClick={() => navigate('/products')} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{category?.name}</Link> / <Link onClick={() => navigate(`/product/${id}`)} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{product.name}</Link>
+            <Link
+              onClick={() => {
+                navigate("/products");
+                dispatch(setSelectedCategory(null));
+              }}
+            >
+              Категории
+            </Link>
+            <span>/</span>
+            <Link onClick={() => navigate("/products")}>{category.name}</Link>
+            <span>/</span>
+            <span>{product.name}</span>
           </div>
 
+          <span className={styles.kicker}>Карточка товара</span>
           <h1 className={styles.title}>{product.name}</h1>
-
           <p className={styles.short}>{product.description}</p>
-          <Button
-            label="СКАЧАТЬ ПРАЙС-ЛИСТ"
-            onClick={() => setOpen(true)}
-          />
+
+          <div className={styles.status}>
+            {product.inStock ? "В наличии" : "Под заказ"}
           </div>
+
+          <Button label="Скачать прайс-лист" onClick={() => setOpen(true)} />
         </div>
-      </div>
+      </section>
 
-      <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>
+      <section className={styles.details}>
+        <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>
-            <p>{product.full_name}</p>
-            {!product.inStock? 
-              (
-                <p>в наличии</p>
-              ) : (
-                <p>нет в наличии</p>
-              )
-            }
-          </div>
-        )}
+        <div className={styles.content}>
+          {activeTab === "desc" && (
+            <div>
+              <h2>Описание</h2>
+              <p>{product.description}</p>
+              <p>{product.full_name}</p>
+            </div>
+          )}
 
-        {activeTab === "chars" && (
-          <div>
-            <h2>ХАРАКТЕРИСТИКИ</h2>
-            {/*{product.attributes.map((attr) => (
-              <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>
-            ))}*/}
-            <ProductAttributes attributes={product.attributes}/>
-          </div>
-        )}
-      </div>
-    </div>
+          {activeTab === "chars" && (
+            <div>
+              <h2>Характеристики</h2>
+              <ProductAttributes
+                attributes={product.attributes}
+                attrList={category.attributes}
+              />
+            </div>
+          )}
+        </div>
+      </section>
+    </main>
   );
-}
+};
 
-export default ItemPage;
+export default ItemPage;