import axios from "axios";
import React, { useContext, useEffect, useReducer } from "react";
import { Helmet } from "react-helmet-async";
import { useNavigate, useParams } from "react-router-dom";
import Footer from "../components/Footer";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "../components/Header";
import icon1 from "../Images/icon3.svg";
import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
import "../styles/ProductScreen.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import { getError } from "../components/utils";
import { Store } from "../Store";
const reducer = (state, action) => {
switch (action.type) {
case "FETCH_REQUEST":
return { ...state, loading: true };
case "FETCH_SUCCESS":
return { ...state, product: action.payload, loading: false };
case "FETCH_FAIL":
return { ...state, loading: false, error: action.payload };
default:
return state;
}
};
function ProductScreen() {
const navigate = useNavigate();
const params = useParams();
const { slug } = params;
const [{ loading, error, product }, dispatch] = useReducer(reducer, {
product: [],
loading: true,
error: "",
});
useEffect(() => {
const fetchData = async () => {
dispatch({ type: "FETCH_REQUEST" });
try {
const result = await axios.get(`/api/products/slug/${slug}`);
dispatch({ type: "FETCH_SUCCESS", payload: result.data });
} catch (err) {
dispatch({ type: "FETCH_FAIL", payload: getError(err) });
}
};
fetchData();
}, [slug]);
const handleClick = (event) => {
let tmp = document.querySelector("#tmp");
if (tmp != null) {
tmp.parentNode.removeChild(tmp);
if (document.querySelector("#tmp") != null) {
let tmp = document.querySelector("#tmp");
tmp.parentNode.removeChild(tmp);
}
}
if (event.target.textContent === "Опис") {
let pre = document.createElement("pre");
pre.setAttribute("id", "tmp");
pre.textContent = product.description;
event.target.appendChild(pre);
} else if (event.target.textContent === "Монтажа") {
let table = document.createElement("table");
let thModel = document.createElement("th");
let thPrice = document.createElement("th");
let tdName = document.createElement("td");
let tdPrice = document.createElement("td");
let tr1 = document.createElement("tr");
let tr2 = document.createElement("tr");
thModel.innerHTML = "Модел";
thPrice.innerHTML = "Цена";
tdName.innerHTML = product.name;
tdPrice.innerHTML = product.priceMontaza;
tr1.appendChild(thModel);
tr1.appendChild(thPrice);
tr2.appendChild(tdName);
tr2.appendChild(tdPrice);
table.appendChild(tr1);
table.appendChild(tr2);
table.setAttribute("id", "tmp");
let p = document.createElement("p");
p.innerHTML = "Цената за монтажа е посочена на секој производ посебно.";
p.setAttribute("id", "tmp");
event.target.appendChild(table);
event.target.appendChild(p);
} else {
let p = document.createElement("p");
let a = document.createElement("a");
let img = document.createElement("img");
if (event.target.textContent === "Димензии") {
a.setAttribute("href", product.dimension);
img.src = product.dimension;
} else {
a.setAttribute("href", product.scheme);
img.src = product.scheme;
}
p.appendChild(img);
a.setAttribute("id", "tmp");
a.appendChild(p);
event.target.appendChild(a);
}
};
const changePhoto = (event) => {
let main = document.getElementById("main");
main.setAttribute("src", event.target.src);
};
const { state, dispatch: ctxDispatch } = useContext(Store);
const { cart } = state;
const addToCartHandler = async () => {
const existItem = cart.cartItems.find((x) => x._id === product._id);
const quantity = existItem ? existItem.quantity + 1 : 1;
const { data } = await axios.get(`/api/products/${product._id}`);
if (data.countInStock < quantity) {
window.alert("Sorry. Product is out of stock");
return;
}
ctxDispatch({
type: "CART_ADD_ITEM",
payload: { ...product, quantity },
});
navigate("/cart");
};
return loading ? (
Опис
|
Димензии
|
Монтажа
|
Шема за монтажа
|