123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- import Breadcrumb from "../components/Breadcrumbs";
- import {Box, Button, Container, Divider, Grid, Typography, useMediaQuery} from "@mui/material";
- import {connect} from 'react-redux';
- import {actionWishListRemove} from "../reducers/WishListReducer";
- import {actionCardChange} from "../reducers/CartReducer";
- import Link from "react-router-dom/es/Link";
- import {backURL} from "../actions/PathDB";
- import imgNotFound from "../img/catalog/imgNotFound.png";
- import CloseIcon from '@mui/icons-material/Close';
- import {NotFoundBlock} from "../components/NotFoundBlock";
- import imgUrl from "../img/not-found/2.png"
- import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
- const ItemHeaderLine = ({text, align='left'}) => {
- return (
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign={align}
- >
- {text || ''}
- </Typography>
- )
- }
- const LinkProductItem = ({item: [_id, name, images]}) => {
- return (
- <Link style={{textDecoration: 'none', display: 'flex', alignItems: 'center'}} to={`/good/${_id}`}>
- <Box width='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='20px'>
- <img style={{width: '100%', height: '100%', objectFit: 'cover'}} src={images[0]?.url ? backURL + '/' + images[0]?.url : imgNotFound} alt={name}/>
- </Box>
- <ItemHeaderLine text={name}/>
- </Link>
- )
- }
- const AddToCart = ({good, addToCart}) => {
- return (
- <Button
- sx={{height: '40px', width: '70%', borderRadius: '0', color: '#000', borderColor: '#000', fontSize: '16px', fontWeight: '300'}}
- variant="outlined"
- color={"inherit"}
- onClick={() => addToCart(good)}
- >
- ADD TO CART
- </Button>
- )
- }
- const RemoveFromWishList = ({good, onWishListRemove}) => {
- return (
- <Button
- size="small"
- color="inherit"
- onClick={() => onWishListRemove(good)}
- >
- <CloseIcon/>
- </Button>
- )
- }
- const TableLine = ({columnName, role='header'}) => {
- const good = {'_id': columnName[0][0], 'name': columnName[0][1], 'images': columnName[0][2], 'price': columnName[1]};
- return (
- <Grid container justifyContent='space-between' marginBottom='20px' alignItems='center'>
- <Grid item xs={3} md={5}>
- {role === 'header' ? <ItemHeaderLine text={columnName[0]}/> : <LinkProductItem item={columnName[0]}/>}
- </Grid>
- <Grid item xs={3} md={2}>
- <ItemHeaderLine text={role === 'header' ? columnName[1] : '$'+columnName[1]} align={'center'}/>
- </Grid>
- <Grid item xs={3} md={3} display='flex' justifyContent='center'>
- {role === 'header' ? <ItemHeaderLine text={columnName[3]} align={'center'}/> : <AddToCart good={good} addToCart={columnName[3]}/>}
- </Grid>
- <Grid item xs={3} md={1} display='flex' justifyContent='center'>
- {role === 'header' ? <ItemHeaderLine text={columnName[2]} align={'center'}/> : <RemoveFromWishList good={good} onWishListRemove={columnName[2]}/>}
- </Grid>
- </Grid>
- )
- }
- const WishListPage = ({wishlist, addToCart, onWishListRemove}) => {
- const matches = useMediaQuery('(max-width:899px)')
- let rows = []
- for (const key of Object.values(wishlist)) {
- for (const item in key) {
- rows.push(key[item])
- }
- }
- return (
- <>
- <Breadcrumb links={['wish list']}/>
- {Object.values(wishlist).length > 0 ?
- <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
- <Container maxWidth="lg">
- <TableLine columnName={['PRODUCT', 'PRICE', 'REMOVE', 'ADD TO CART']}/>
- <Divider sx={{marginBottom: '20px'}}/>
- {rows.map(item => <TableLine columnName={[[item?._id, item?.name, item?.images], item?.price, onWishListRemove, addToCart]} role={'item'}/>)}
- <Divider/>
- </Container>
- </main> :
- <NotFoundBlock img={imgUrl} headerText={'YOUR WISHLIST IS CURRENTLY EMPTY'} text={<Box display='flex' alignItems='center'><Typography component='span'>Click the</Typography><FavoriteBorderIcon sx={{margin: '0 10px'}}/><Typography component='span'>icons to add products</Typography></Box>}/>
- }
- </>
- )
- }
- const CWishListPage = connect(state => ({wishlist: state.wishlist}), {addToCart: actionCardChange, onWishListRemove: actionWishListRemove})(WishListPage)
- export default CWishListPage
- // TODO MOBILE VERSION
|