103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
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 "./ItemPage.module.css";
|
||
import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
|
||
import Button from "../../components/Button/Button";
|
||
import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
|
||
|
||
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");
|
||
|
||
const [open, setOpen] = useState(false);
|
||
|
||
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}>
|
||
<PriceLisForm open={open} onClose={() => setOpen(false)}/>
|
||
<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
|
||
label="СКАЧАТЬ ПРАЙС-ЛИСТ"
|
||
onClick={() => setOpen(true)}
|
||
/>
|
||
</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; |