|
|
@@ -1,21 +1,205 @@
|
|
|
-import {useEffect} from "react";
|
|
|
+import {useEffect, useState} from "react";
|
|
|
import {connect} from "react-redux";
|
|
|
-import {Typography} from "@mui/material";
|
|
|
+import {Box, Button, Container, Divider, Grid, Paper, Typography, useMediaQuery} from "@mui/material";
|
|
|
import {actionGoodFindOne} from "../actions/ActionGoodFind";
|
|
|
import Switch from "react-router-dom/es/Switch";
|
|
|
import Route from "react-router-dom/es/Route";
|
|
|
import Page404 from "./404Page";
|
|
|
import Breadcrumb from "../components/Breadcrumbs";
|
|
|
+import {SetCount} from "../components/SetCount";
|
|
|
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
|
|
|
+import Link from "react-router-dom/es/Link";
|
|
|
+import {actionCardChange} from "../reducers/CartReducer";
|
|
|
+import {actionWishListAdd, actionWishListRemove} from "../reducers/WishListReducer";
|
|
|
+import FavoriteIcon from "@mui/icons-material/Favorite";
|
|
|
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
|
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
|
|
+import Carousel from 'react-material-ui-carousel'
|
|
|
+import {backURL} from "../actions/PathDB";
|
|
|
|
|
|
-const Goods = ({good:{_id, name, description, price, images}={}}) => {
|
|
|
+let defProduct = {
|
|
|
+ "_id": "5dc45d0b5df9d670df48cc4b",
|
|
|
+ "name": "Apple iPhone X 64GB Space Gray",
|
|
|
+ "price": 5000,
|
|
|
+ "images": [
|
|
|
+ {
|
|
|
+ "url": "images/00505f5f08ac113874318dee67975aa9",
|
|
|
+ "originalFileName": "image"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "url": "images/00505f5f08ac113874318dee67975aa9",
|
|
|
+ "originalFileName": "image"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "url": "images/00505f5f08ac113874318dee67975aa9",
|
|
|
+ "originalFileName": "image"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const timeCalc = (createdAt) => {
|
|
|
+ let formattedTime = 0;
|
|
|
+ let date = new Date(+createdAt);
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = "0" + date.getMonth();
|
|
|
+ let day = "0" + date.getDate();
|
|
|
+ let hours = "0" + date.getHours();
|
|
|
+ let minutes = "0" + date.getMinutes();
|
|
|
+ let seconds = "0" + date.getSeconds();
|
|
|
+ formattedTime = day.substr(-2) + '.' + month.substr(-2) + '.' + year +
|
|
|
+ ' ' + hours.substr(-2) + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
|
|
+ return formattedTime;
|
|
|
+}
|
|
|
+
|
|
|
+const ImageItem = ({images: {url, originalFileName}}) => {
|
|
|
return (
|
|
|
- <>
|
|
|
- <Typography>{_id}</Typography>
|
|
|
- <Typography>{name}</Typography>
|
|
|
- <Typography>{description}</Typography>
|
|
|
- <Typography>{price}</Typography>
|
|
|
+ <img src={backURL + '/' + url} alt={originalFileName.split('.')[0]}/>
|
|
|
+ )
|
|
|
+}
|
|
|
+const CarouselItem = ({images}) => {
|
|
|
+ return (
|
|
|
+ <Carousel
|
|
|
+ navButtonsProps={{
|
|
|
+ style: {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ color: '#000',
|
|
|
+ borderRadius: 0
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ NextIcon={<ArrowForwardIosIcon/>}
|
|
|
+ PrevIcon={<ArrowBackIosNewIcon/>}
|
|
|
+ fullHeightHover={true}
|
|
|
+ >
|
|
|
+ {
|
|
|
+ images.map((item, index) => <Box key={index} sx={{width: '100%', display: 'flex', justifyContent: 'center', height: '340px'}}><ImageItem key={item._id} images={item} /></Box>)
|
|
|
+ }
|
|
|
+ </Carousel>
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
- </>
|
|
|
+const ProductTitle = ({title}) => {
|
|
|
+ return (
|
|
|
+ <Typography
|
|
|
+ variant='h4'
|
|
|
+ fontFamily='sarif'
|
|
|
+ letterSpacing='4px'
|
|
|
+ >
|
|
|
+ {title || 'PRODUCT TITLE'}
|
|
|
+ </Typography>
|
|
|
+ )
|
|
|
+}
|
|
|
+const ProductPrice = ({price}) => {
|
|
|
+ return (
|
|
|
+ <Typography
|
|
|
+ variant='h5'
|
|
|
+ margin='30px 0'
|
|
|
+ >
|
|
|
+ ${price ? parseFloat(price).toFixed(2) : 0 }
|
|
|
+ </Typography>
|
|
|
+ )
|
|
|
+}
|
|
|
+const ProductDescription = ({description}) => {
|
|
|
+ return (
|
|
|
+ <Typography
|
|
|
+ fontSize='17px'
|
|
|
+ letterSpacing='1px'
|
|
|
+ lineHeight='1.7em'
|
|
|
+ color='#616161'
|
|
|
+ fontWeight='300'
|
|
|
+ >
|
|
|
+ {description || 'PRODUCT DESCRIPTION'}
|
|
|
+ </Typography>
|
|
|
+ )
|
|
|
+}
|
|
|
+const ProductTags = ({title, subtitle}) => {
|
|
|
+ return (
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ color='#616161'
|
|
|
+ fontWeight='300'
|
|
|
+ marginBottom='10px'
|
|
|
+ >
|
|
|
+ {title}: {Array.isArray(subtitle) ? subtitle.map((item, index) => <span key={index}>{item}{subtitle.length-1 !== index && ", " } </span>) : subtitle}
|
|
|
+ </Typography>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const AddToCart = ({good, addToCart}) => {
|
|
|
+ let [count, setCount] = useState(1)
|
|
|
+ return (
|
|
|
+ <Box width='100%' backgroundColor='#fff' padding='30px'>
|
|
|
+ <Grid container justifyContent='space-between'>
|
|
|
+ <Grid xs={5} item>
|
|
|
+ <SetCount onCount={value => setCount(value)}/>
|
|
|
+ </Grid>
|
|
|
+ <Grid xs={5} item>
|
|
|
+ <Button
|
|
|
+ sx={{height: '55px', width: '100%', borderRadius: '0', color: '#000', borderColor: '#000', fontSize: '20px', fontWeight: '300'}}
|
|
|
+ variant="outlined"
|
|
|
+ color={"inherit"}
|
|
|
+ onClick={() => addToCart(good, count)}
|
|
|
+ >
|
|
|
+ ADD TO CART
|
|
|
+ </Button>
|
|
|
+ </Grid>
|
|
|
+ </Grid>
|
|
|
+ </Box>
|
|
|
+ )
|
|
|
+}
|
|
|
+const CAddToCart = connect(null, {addToCart: actionCardChange})(AddToCart)
|
|
|
+
|
|
|
+const AddToWishList = ({good={}, wishlist ,onAddToWishList, onWishListRemove}) => {
|
|
|
+ const flag = good?._id in wishlist
|
|
|
+ return (
|
|
|
+ <Button size="small"
|
|
|
+ color="inherit"
|
|
|
+ sx={{paddingLeft: '0', margin: '30px 0'}}
|
|
|
+ onClick={() => {flag ? onWishListRemove(good) : onAddToWishList(good)}}
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ color='#000'
|
|
|
+ display='flex'
|
|
|
+ alignItems='center'
|
|
|
+ fontSize='13px'
|
|
|
+ fontWeight='600'
|
|
|
+ letterSpacing='2px'
|
|
|
+ >
|
|
|
+ {flag ?
|
|
|
+ <><FavoriteIcon sx={{marginRight: '10px'}}/> REMOVE FROM WISHLIST</>:
|
|
|
+ <><FavoriteBorderIcon sx={{marginRight: '10px'}}/> ADD TO WISHLIST</>
|
|
|
+ }
|
|
|
+ </Typography>
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+}
|
|
|
+const CAddToWishList = connect(state => ({wishlist: state.wishlist}), {onAddToWishList: actionWishListAdd, onWishListRemove: actionWishListRemove})(AddToWishList)
|
|
|
+
|
|
|
+const Goods = ({good:{_id, name, description, price, images, categories, createdAt}=defProduct}) => {
|
|
|
+ const matches = useMediaQuery('(max-width:768px)');
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Grid container justifyContent='space-around' padding={matches ? "20px 0" : "50px 0"} >
|
|
|
+ <Grid xs={12} md={6} item padding='5px 70px 5px 10px'>
|
|
|
+ {Array.isArray(images) && images.length > 1 ? <CarouselItem images={images}/> : <Box sx={{width: '100%', display: 'flex', justifyContent: 'center', height: '340px'}}><ImageItem images={images[0]}/></Box>}
|
|
|
+ <Divider sx={{margin: '20px 0'}}/>
|
|
|
+ <ProductDescription description={description}/>
|
|
|
+ </Grid>
|
|
|
+ <Grid xs={12} md={6} item padding='5px 110px 5px 10px'>
|
|
|
+ <ProductTitle title={name}/>
|
|
|
+ <ProductPrice price={price}/>
|
|
|
+ <CAddToCart good={{_id, name, price, images}}/>
|
|
|
+ <CAddToWishList good={{_id, name, price, images}}/>
|
|
|
+ <Box>
|
|
|
+ {_id && <ProductTags key={'SKU'} title={'SKU'} subtitle={_id}/>}
|
|
|
+ {Array.isArray(categories) &&
|
|
|
+ <ProductTags key={'CATEGORY'} title={'CATEGORY'} subtitle={categories.map(item => {
|
|
|
+ return <Link key={item?._id} style={{color: "#000", textDecoration: 'none'}} to={`/catalog/category/${item?._id}`}>{item?.name}</Link>
|
|
|
+ })}/>
|
|
|
+ }
|
|
|
+ {createdAt && <ProductTags key={'TIMEOFCREATION'} title={'TIME OF CREATION'} subtitle={timeCalc(createdAt)}/>}
|
|
|
+ </Box>
|
|
|
+ </Grid>
|
|
|
+ </Grid>
|
|
|
)
|
|
|
}
|
|
|
const CGoods = connect(state => ({good: state.promise['goodFindOne']?.payload}))(Goods)
|
|
|
@@ -27,15 +211,17 @@ const BlockProduct = ({match:{params:{_id}}, getData}) => {
|
|
|
|
|
|
return(
|
|
|
<>
|
|
|
- <Breadcrumb links={['good']}/>
|
|
|
- <CGoods key={_id} />
|
|
|
+ <main style={{backgroundColor: "#f3f3f3"}}>
|
|
|
+ <Breadcrumb links={['good']}/>
|
|
|
+ <Container maxWidth="lg">
|
|
|
+ <CGoods key={_id} />
|
|
|
+ </Container>
|
|
|
+ </main>
|
|
|
</>
|
|
|
)
|
|
|
}
|
|
|
-
|
|
|
const CBlockProduct = connect(null, {getData: actionGoodFindOne})(BlockProduct)
|
|
|
|
|
|
-
|
|
|
const ProductPage = () => {
|
|
|
return (
|
|
|
<Switch>
|
|
|
@@ -47,3 +233,4 @@ const ProductPage = () => {
|
|
|
|
|
|
export default ProductPage
|
|
|
|
|
|
+//TODO MOBILE VERSION
|
Alex