COMPONENT - Class Details

[keanacobarde]

User Story

• I, as a user, should be able to select a Class and navigate to its detail page which will allow me to see the notes associated with that class.

Acceptance Criteria

WHEN I select on a 'See Details' icon/button, I should be redirected to a page.

Dependencies

3

Dev Notes

• NoteCard.js component must exist
• Dynamic routing for class ID
• HHPW, ItemCard.js Component

  
  import React from 'react';
  import PropTypes from 'prop-types';
  import DeleteIcon from '@mui/icons-material/Delete';
  import AddIcon from '@mui/icons-material/Add';
  import { useRouter } from 'next/router';
  import {
  IconButton,
  Card, Grid, CardContent, Typography,
  } from '@mui/material';
  import { deleteItemFromOrder, addItemToOrder } from '../../API/OrderItemData';

function ItemCard({ itemObj, context, orderId, onUpdate, }) { const router = useRouter();

const deleteThisItem = () => { if (window.confirm(Delete ${itemObj.name}?)) { const payload = { orderId, orderItemId: itemObj.orderItemId, }; deleteItemFromOrder(payload).then(() => onUpdate()); } };

const addItemToThisOrder = () => { const payload = { orderId, itemId: itemObj.id, }; addItemToOrder(payload).then(() => router.push(/orders/${orderId})); };

return (

{itemObj.name} ${itemObj.price} {context !== 'orderdetails' ? ( ) : ( )}

); }

ItemCard.propTypes = { itemObj: PropTypes.shape({ id: PropTypes.number.isRequired, orderItemId: PropTypes.number, name: PropTypes.string.isRequired, price: PropTypes.number.isRequired, }).isRequired, context: PropTypes.string.isRequired, orderId: PropTypes.number.isRequired, onUpdate: PropTypes.func, };

ItemCard.defaultProps = { onUpdate: () => {}, };

export default ItemCard;

- HHPW, OrderDetails page 

import React, { useState, useEffect } from 'react'; import { Box, Button, Stack, Typography, } from '@mui/material'; import { useRouter } from 'next/router'; import { getAllOrdersById, getItemsFromOrderId } from '../../API/OrderData'; import ItemCard from '../../components/Cards/ItemCard';

function OrderDetails() { const router = useRouter(); const { id } = router.query; const [order, setOrder] = useState([]); const [items, setItems] = useState([]);

const getTheOrder = () => { getAllOrdersById(id).then(setOrder); };

const getAllTheOrderItems = () => { getItemsFromOrderId(id).then(setItems); };

useEffect(() => { getTheOrder(); getAllTheOrderItems(); }, []);

return ( <Stack spacing={2} direction="column" justifyContent="center"

<Typography component="h1" variant="h3" align="center" color="text.primary" gutterBottom

Total: ${order?.subtotal} <Box display="grid" sx={{ width: '100%' }} gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(2, 1fr)" gap="0.5rem" alignItems="start"

{items[0]?.items?.map((item) => <ItemCard itemObj={item} context="orderdetails" orderId={parseInt(id, 10)} onUpdate={getAllTheOrderItems} />)}

{ order.status ? <Button variant="contained" onClick={() => router.push(/Items/${id})}>Add Item : Add Item} <Button variant="contained" onClick={() => router.push(/paymentInfo/${id})}> Go to Payment ); }

export default OrderDetails;