[b612ab1] | 1 | import axios from "axios";
|
---|
| 2 | import React, { useEffect, useReducer } from "react";
|
---|
| 3 | import { Helmet } from "react-helmet-async";
|
---|
| 4 | import { useParams } from "react-router-dom";
|
---|
| 5 | import Footer from "../components/Footer";
|
---|
| 6 | import "bootstrap/dist/css/bootstrap.min.css";
|
---|
| 7 | import Header from "../components/Header";
|
---|
| 8 | import icon1 from "../Images/icon3.svg";
|
---|
| 9 | import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
|
---|
| 10 | import "../styles/ProductScreen.css";
|
---|
| 11 | import Container from "react-bootstrap/Container";
|
---|
| 12 | import Row from "react-bootstrap/Row";
|
---|
| 13 | import Col from "react-bootstrap/Col";
|
---|
| 14 |
|
---|
| 15 | const reducer = (state, action) => {
|
---|
| 16 | switch (action.type) {
|
---|
| 17 | case "FETCH_REQUEST":
|
---|
| 18 | return { ...state, loading: true };
|
---|
| 19 | case "FETCH_SUCCESS":
|
---|
| 20 | return { ...state, product: action.payload, loading: false };
|
---|
| 21 | case "FETCH_FAIL":
|
---|
| 22 | return { ...state, loading: false, error: action.payload };
|
---|
| 23 | default:
|
---|
| 24 | return state;
|
---|
| 25 | }
|
---|
| 26 | };
|
---|
| 27 |
|
---|
| 28 | function ProductScreen() {
|
---|
| 29 | const params = useParams();
|
---|
| 30 | const { slug } = params;
|
---|
| 31 |
|
---|
| 32 | const [{ loading, error, product }, dispatch] = useReducer(reducer, {
|
---|
| 33 | product: [],
|
---|
| 34 | loading: true,
|
---|
| 35 | error: "",
|
---|
| 36 | });
|
---|
| 37 |
|
---|
| 38 | useEffect(() => {
|
---|
| 39 | const fetchData = async () => {
|
---|
| 40 | dispatch({ type: "FETCH_REQUEST" });
|
---|
| 41 | try {
|
---|
| 42 | const result = await axios.get(`/api/products/slug/${slug}`);
|
---|
| 43 | dispatch({ type: "FETCH_SUCCESS", payload: result.data });
|
---|
| 44 | } catch (err) {
|
---|
| 45 | dispatch({ type: "FETCH_FAIL", payload: err.message });
|
---|
| 46 | }
|
---|
| 47 | };
|
---|
| 48 | fetchData();
|
---|
| 49 | }, [slug]);
|
---|
| 50 |
|
---|
| 51 | return loading ? (
|
---|
| 52 | <div>Loading...</div>
|
---|
| 53 | ) : error ? (
|
---|
| 54 | <div>{error}</div>
|
---|
| 55 | ) : (
|
---|
| 56 | <div>
|
---|
| 57 | <Helmet>
|
---|
| 58 | <title>{product.name}</title>
|
---|
| 59 | </Helmet>
|
---|
| 60 | <div>
|
---|
| 61 | <Header />
|
---|
| 62 | <Container>
|
---|
| 63 | <div className="left-side">
|
---|
| 64 | <div className="mainImg">
|
---|
| 65 | <img src={product.image} alt={product.name}></img>
|
---|
| 66 | </div>
|
---|
| 67 | <div className="sideImgContainer">
|
---|
| 68 | <div className="sideImg">
|
---|
| 69 | <img src={product.image} alt={product.name}></img>
|
---|
| 70 | </div>
|
---|
| 71 | <div className="sideImg">
|
---|
| 72 | <img src={product.sideImage} alt={product.name}></img>
|
---|
| 73 | </div>
|
---|
[55ed171] | 74 | <div className="sideImg">
|
---|
| 75 | <img src={product.sideImage2} alt={product.name}></img>
|
---|
| 76 | </div>
|
---|
[b612ab1] | 77 | </div>
|
---|
| 78 | </div>
|
---|
| 79 | <div className="right-side">
|
---|
| 80 | <div className="name-container">
|
---|
| 81 | <h2>{product.name}</h2>
|
---|
| 82 | </div>
|
---|
| 83 | <div className="price-container">
|
---|
| 84 | <div className="price-left">
|
---|
| 85 | <h2>{product.price} ден</h2>
|
---|
| 86 | <span>
|
---|
| 87 | <img src={icon1} alt="10-day-delivery"></img>Бесплатна
|
---|
| 88 | достава: 10 дена
|
---|
| 89 | </span>
|
---|
| 90 | </div>
|
---|
| 91 | <div className="price-right">
|
---|
| 92 | <button className="addToCartBtn">
|
---|
| 93 | <ShoppingBasketIcon />
|
---|
| 94 | ДОДАЈ ВО КОШНИЧКА
|
---|
| 95 | </button>
|
---|
| 96 | </div>
|
---|
| 97 | </div>
|
---|
| 98 |
|
---|
| 99 | <div className="informationContainer">
|
---|
| 100 | <div className="table">
|
---|
| 101 | <div>Опис</div>
|
---|
| 102 | <div>Димензии</div>
|
---|
| 103 | <div>Монтажа</div>
|
---|
| 104 | <div>Шема за монтажа</div>
|
---|
| 105 | </div>
|
---|
| 106 | </div>
|
---|
| 107 | </div>
|
---|
| 108 | </Container>
|
---|
| 109 | <Footer />
|
---|
| 110 | </div>
|
---|
| 111 | </div>
|
---|
| 112 | );
|
---|
| 113 | }
|
---|
| 114 |
|
---|
| 115 | export default ProductScreen;
|
---|