FinalProject/src/pages/MyOrdersPage.jsx

import Breadcrumb from "../components/Breadcrumbs";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary, Box,
    CircularProgress,
    Container, Divider, Grid, Pagination,
    Typography,
    useMediaQuery
} from "@mui/material";
import {connect} from "react-redux";
import {actionFullOrderFind} from "../actions/ActionOrderFind";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {timeCalc} from "./ProductPage";
import {backURL} from "../actions/PathDB";
import {actionMyOrderClear} from "../reducers/MyOrdersReducer";
import {useEffect, useState} from "react";
import imgNotFound from "../img/catalog/imgNotFound.png";
import Link from "react-router-dom/es/Link";
import {NotFoundBlock} from "../components/NotFoundBlock";

const AccordionHeaderText = ({columnText, content}) => {
    return (
        <Box display='flex' flexDirection='column' justifyContent='space-between'>
            <Typography
                variant='body2'
                color='#616161'
                marginBottom='20px'
            >
                {columnText}
            </Typography>
            <Typography
                variant='body1'
            >
                {content}
            </Typography>
        </Box>
    )
}
const AccordionItem = ({data}) => {
    const time = timeCalc(+data['createdAt'])
    const [status, setStatus] = useState(false);

    return (
        <Accordion onChange={() => setStatus(!status)}>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
            >
                <Divider orientation="vertical" flexItem sx={{backgroundColor: data['total'] ? '#7cd545': '#ad2222', width:'5px', borderRadius: '3px', boxShadow: 'none'}}/>
                <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', padding: '10px 20px'}}>
                    <AccordionHeaderText columnText={`№ ${data['_id']} from ${time}`} content={data['total'] ? 'Completed' : 'Canceled'}/>
                    {!status && <AccordionHeaderText columnText={'Order price'} content={data['total'] ? `$${data['total']}` : 'null'}/>}
                    {!status && <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '200px'}}>
                        {data['orderGoods'] && data['orderGoods'].map((item, index, array) => {
                            if (index < 2) {
                                return <Box sx={{width:'60px', height:'60px'}}>
                                            <img src={item?.good?.images && Array.isArray(item.good.images) ? `${backURL}/${item.good.images[0].url}` : imgNotFound}
                                                 alt={'image'}
                                                 style={{width: '100%', height: '100%', objectFit:'cover'}}
                                            />
                                        </Box>
                            }
                            else if (index === 2) {
                                return <Box sx={{width:'60px', height:'60px', border:'1px solid #616161', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#616161', borderRadius: '10px'}}>
                                            +{array.length - 2}
                                       </Box>}
                            })
                        }
                    </Box>}
                </Box>
            </AccordionSummary>
            <AccordionDetails sx={{padding: '20px'}}>
                {data['orderGoods'] && data['orderGoods'].length > 0 ?
                    <>
                        <Grid container>
                            <Grid item md={7}>
                                <Typography
                                    color='#616161'
                                    variant='body1'
                                    letterSpacing='1px'
                                    textAlign='left'
                                >
                                    Product
                                </Typography>
                            </Grid>
                            <Grid item md={2}>
                                <Typography
                                    color='#616161'
                                    variant='body1'
                                    letterSpacing='1px'
                                    textAlign='center'
                                >
                                    Price
                                </Typography>
                            </Grid>
                            <Grid item md={1}>
                                <Typography
                                    color='#616161'
                                    variant='body1'
                                    letterSpacing='1px'
                                    textAlign='center'
                                >
                                    Count
                                </Typography>
                            </Grid>
                            <Grid item md={2}>
                                <Typography
                                    color='#616161'
                                    variant='body1'
                                    letterSpacing='1px'
                                    textAlign='right'
                                >
                                    Sum
                                </Typography>
                            </Grid>
                        </Grid>
                        <Divider sx={{margin: '10px 0'}}/>
                        {data['orderGoods'].map(item => {
                            return <Grid container alignItems='center' marginBottom='20px'>
                                <Grid item md={7}>
                                    <Link style={{textDecoration: 'none', display: 'flex', alignItems: 'center', color: '#616161'}} to={`/good/${item?.good?._id}`}>
                                        <Box sx={{width:'60px', height:'60px'}} marginRight='10px'>
                                            <img src={item?.good?.images && Array.isArray(item.good.images) ? `${backURL}/${item.good.images[0].url}` : imgNotFound}
                                                 alt={'image'}
                                                 style={{width: '100%', height: '100%', objectFit:'cover'}}
                                            />
                                        </Box>
                                        <Typography
                                            variant='body1'
                                        >
                                            {item.good?.name || 'product name'}
                                        </Typography>
                                    </Link>
                                </Grid>
                                <Grid item md={2}>
                                    <Typography
                                        color='#616161'
                                        variant='body1'
                                        letterSpacing='1px'
                                        textAlign='center'
                                    >
                                        {item?.price ? '$' + parseFloat(item.price).toFixed(2) : 'NaN'}
                                    </Typography>
                                </Grid>
                                <Grid item md={1}>
                                    <Typography
                                        color='#616161'
                                        variant='body1'
                                        letterSpacing='1px'
                                        textAlign='center'
                                    >
                                        {item?.count || '1'}
                                    </Typography>
                                </Grid>
                                <Grid item md={2}>
                                    <Typography
                                        color='#616161'
                                        variant='body1'
                                        letterSpacing='1px'
                                        textAlign='right'
                                    >
                                        {item?.price && item?.count ? '$'+parseFloat(item.price * item.count).toFixed(2) : 'NaN'}
                                    </Typography>
                                </Grid>
                            </Grid>
                        })}
                        <Divider sx={{margin: '-10px 0 10px 0'}}/>
                        <Box display='flex' justifyContent='space-between'>
                            <Typography
                                variant='body1'
                                color='#616161'
                            >
                                Total
                            </Typography>
                            <Typography
                                variant='body1'
                                color='#616161'
                            >
                                {data?.total ? '$'+parseFloat(data.total).toFixed(2) : 'NaN'}
                            </Typography>
                        </Box>
                    </> :
                    <Typography>Error</Typography>
                }
            </AccordionDetails>
        </Accordion>
    )
}

const MyOrdersPage = ({orders, onFindOrders, onOrdersClear}) => {
    const itemsPerPage = 10
    const [page, setPage] = useState(1)
    const [count, setCount] = useState(1)
    const handleChange = (event, value) => {
        setPage(value);
    }

    useEffect(() => {
        onOrdersClear()
    }, [onOrdersClear])

    useEffect(() => {
        if(orders?.orderResult && Object.entries(orders.orderResult).length > 0) {
            setCount(Math.ceil(Object.entries(orders.orderResult).length / itemsPerPage))
        }
    }, [orders])

    if(Object.entries(orders).length === 0) onFindOrders()

    const matches = useMediaQuery('(max-width:768px)')
    return (
        <>
            <Breadcrumb links={['My orders']} />
            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0", minHeight:'300px'}}>
                <Container maxWidth="lg" sx={{position:'relative'}}>
                    {Object.entries(orders).length === 0 ?
                        <Box sx={{height: '100%', width: '100%', display: 'flex', justifyContent:'center', alignItems:'center'}}><CircularProgress color="inherit"/></Box> :
                        Object.entries(orders?.orderResult).length > 0 ?
                            <Box>
                                {Object.values(orders.orderResult).slice((page - 1) * itemsPerPage, page * itemsPerPage).map(item => <AccordionItem data={item}/>)}
                                <Divider sx={{margin: '20px'}}/>
                                <Box display='flex' justifyContent='center' width='100%'>
                                    <Pagination
                                        count={count}
                                        page={page}
                                        onChange={handleChange}
                                        defaultPage={1}
                                        color="primary"
                                        size="large"
                                        showFirstButton
                                        showLastButton
                                    />
                                </Box>
                            </Box>
                        :
                        <NotFoundBlock headerText={'OOPS! ORDERS CAN’T BE FOUND'} text={'No order has been made yet.'}/>
                    }
                </Container>
            </main>
        </>
    )
}
const CMyOrdersPage = connect(state=>({orders: state.myorders}), {onFindOrders: actionFullOrderFind, onOrdersClear: actionMyOrderClear})(MyOrdersPage)

export default CMyOrdersPage