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) {
                                {console.log(item.good.images[0].url)}
                                return <Box minWidth='60px' maxWidth='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='20px'>
                                            <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
                                                 src={item.good.images && item.good.images[0].url ? backURL + '/' + item.good.images[0].url : imgNotFound}
                                                 alt={'image'}/>
                                        </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 minWidth='60px' maxWidth='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='20px'>
                                            <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
                                                 src={item.good.images && item.good.images[0].url ? backURL + '/' + item.good.images[0].url : imgNotFound}
                                                 alt={'image'}/>
                                        </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 MainOrders = ({itemsPerPage=10, orders, onFindOrders, onOrdersClear}) => {
    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()

    return (
        <>
            {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.'}/>
            }
        </>
    )
}
export const CMainOrders = connect(state=>({orders: state.myorders}), {onFindOrders: actionFullOrderFind, onOrdersClear: actionMyOrderClear})(MainOrders)

const MyOrdersPage = () => {
    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'}}>
                    <CMainOrders />
                </Container>
            </main>
        </>
    )
}

export default MyOrdersPage