FinalProject/src/pages/WishListPage.jsx

import Breadcrumb from "../components/Breadcrumbs";
import {Box, Container, Divider, Typography, useMediaQuery} from "@mui/material";
import {connect} from 'react-redux';
import {actionWishListRemove} from "../reducers/WishListReducer";
import {actionCardChange} from "../reducers/CartReducer";
import {NotFoundBlock} from "../components/NotFoundBlock";
import imgUrl from "../img/not-found/2.png"
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import {TableLine} from "../components/TableLine";

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])
        }
    }
    console.log(rows)
    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