coffee/components/profile-content/ProfileContent.jsx

import { Alert, Grid, Snackbar, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useSession } from 'next-auth/react';
import { useState } from 'react';
import { updateUser } from '../../requests/user/userUpdateRequest';
import { useUserUpdate } from '../../store/user-context';
import OrderCard from '../cards/order-card/OrderCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';

const ProfileContent = ({ orders }) => {
  const { data: session } = useSession();
  const { updateUserInfo } = useUserUpdate();
  const [enableBtn, setEnableBtn] = useState(true);
  const [open, setOpen] = useState(false);

  const updateUserHandler = async (values) => {
    try {
      setEnableBtn(false);
      updateUserInfo(values);
      await updateUser(values, session.user._id);
      setOpen(true);
      setTimeout(() => {
        setEnableBtn(true);
      }, 5000);
    } catch (error) {
      console.log(error);
      setTimeout(() => {
        setEnableBtn(true);
      }, 3000);
    }
  };

  const handleCloseNotification = () => {
    setOpen(false);
  };

  const mapOrdersToDom = () =>
    orders.slice(-4).map((order, i) => (
      <OrderCard
        key={i}
        data={{
          date: order.time.split('T')[0],
          name: order.shippingAddress.fullName,
          totalPrice: order.totalPrice,
        }}
      ></OrderCard>
    ));

  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <Snackbar
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        open={open}
        autoHideDuration={3000}
        onClose={handleCloseNotification}
      >
        <Alert
          onClose={handleCloseNotification}
          severity="success"
          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
        >
          User profile updated!
        </Alert>
      </Snackbar>
      <Grid item xs={12}>
        <Typography
          variant="h3"
          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
        >
          Welcome to your user account
        </Typography>
      </Grid>
      <Grid item xs={12} md={8} sx={{ mt: 4, mb: { xs: -2, md: 0 } }}>
        <Typography sx={{ pl: 12, fontSize: 20 }}>
          Save details for later
        </Typography>
      </Grid>
      <Grid item xs={4} sx={{ mt: 4, display: { xs: 'none', md: 'block' } }}>
        <Typography sx={{ fontSize: 20, ml: 8 }}>Previous Orders</Typography>
      </Grid>
      <Grid item xs={12} md={8} sx={{ ml: { xs: -8, md: 0 } }}>
        <ShippingDetailsForm
          submitHandler={updateUserHandler}
          enableBtn={enableBtn}
        ></ShippingDetailsForm>
      </Grid>
      <Grid
        item
        xs={12}
        sx={{
          mt: 4,
          display: { xs: 'block', md: 'none' },
          textAlign: 'center',
        }}
      >
        <Typography sx={{ fontSize: 20, ml: 0 }}>Previous Orders</Typography>
      </Grid>
      <Grid item xs={12} md={4}>
        <Box
          sx={{
            width: '60%',
            mt: 2,
            ml: { md: 4, xs: 12 },
          }}
        >
          {mapOrdersToDom()}
        </Box>
      </Grid>
    </Grid>
  );
};

export default ProfileContent;