[ISSUE 21] - Display more item information about a selected item

src/api/firebase.js

@@ -167,6 +167,7 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		dateNextPurchased: addDaysFromToday(daysUntilNextPurchase),
 		name: itemName,
 		totalPurchases: 0,
+		averagePurchaseInterval: 0,
 	});
 }
 
@@ -178,13 +179,19 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
  * @param {Date} updatedData.dateLastPurchased The date the item was last purchased.
  * @param {Date} updatedData.dateNextPurchased The estimated date for the next purchase.
  * @param {number} updatedData.totalPurchases The total number of times the item has been purchased.
+ * @param {number} updatedData.averagePurchaseInterval The average purchase interval of the item that has been purchased.
  * @returns {Promise<string>} A message confirming the item was successfully updated.
  * @throws {Error} If the item update fails.
  */
 export async function updateItem(
 	listPath,
 	itemId,
-	{ dateLastPurchased, dateNextPurchased, totalPurchases },
+	{
+		dateLastPurchased,
+		dateNextPurchased,
+		totalPurchases,
+		averagePurchaseInterval,
+	},
 ) {
 	// reference the item path
 	const itemDocRef = doc(db, listPath, 'items', itemId);
@@ -194,6 +201,7 @@ export async function updateItem(
 			dateLastPurchased,
 			dateNextPurchased,
 			totalPurchases,
+			averagePurchaseInterval,
 		});
 		return 'item purchased';
 	} catch (error) {

src/components/AddItems.jsx

@@ -69,13 +69,13 @@ export function AddItems({ items }) {
 					required={true}
 				/>
 
-				{Object.entries(daysUntilPurchaseOptions).map(([key, value]) => (
+				{Object.entries(daysUntilPurchaseOptions).map(([status, days]) => (
 					<RadioInputElement
-						key={key}
-						label={key}
-						id={key}
-						value={value}
-						required={true}
+						key={status}
+						label={status}
+						id={status}
+						value={days}
+						required={status}
 					/>
 				))}
 				<button type="submit">Submit</button>

src/components/IconWithTooltip.jsx

@@ -0,0 +1,27 @@
+import { Tooltip, IconButton, Box } from '@mui/material';
+
+export const tooltipStyle = {
+	fontSize: '1.5rem',
+	marginBlockStart: '0',
+	marginBlockEnd: '0',
+};
+
+export function IconWithTooltip({
+	icon,
+	onClick,
+	ariaLabel,
+	title,
+	placement,
+}) {
+	return (
+		<Tooltip
+			title={<Box style={tooltipStyle}>{title}</Box>}
+			placement={placement}
+			arrow
+		>
+			<IconButton onClick={onClick} aria-label={ariaLabel}>
+				{icon}
+			</IconButton>
+		</Tooltip>
+	);
+}

src/components/InfoCard.jsx

@@ -0,0 +1,63 @@
+import { describeAveragePurchaseInterval } from '../utils';
+import {
+	Box,
+	Card,
+	CardContent,
+	CardHeader,
+	Typography,
+	IconButton,
+	Collapse,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+export const InfoCard = ({ item, toggleCard, show }) => {
+	const typographyOptions = {
+		totalPurchases: `You've purchased this item ${item.totalPurchases} times`,
+		averagePurchaseInterval: describeAveragePurchaseInterval(
+			item.averagePurchaseInterval,
+		),
+		dateCreated: `Item added on: ${item.dateCreated?.toDate().toLocaleString()}`,
+		dateLastPurchased: item.dateLastPurchased
+			? `Last bought on: ${item.dateLastPurchased?.toDate().toLocaleString()}`
+			: 'Not purchased yet',
+		dateNextPurchased: `Expected to buy again by: ${item.dateNextPurchased?.toDate().toLocaleString() ?? 'No estimate yet'}`,
+	};
+
+	return (
+		<Box width="100%">
+			<Collapse in={show}>
+				<Card variant="outlined">
+					<CardHeader
+						title={<Box style={{ fontSize: '2rem' }}>{item?.name}</Box>}
+						action={
+							<IconButton
+								aria-label="close"
+								onClick={toggleCard}
+								sx={(theme) => ({
+									position: 'absolute',
+									right: 20,
+									top: 15,
+									color: theme.palette.grey[700],
+								})}
+							>
+								<CloseIcon />
+							</IconButton>
+						}
+					/>
+					<CardContent sx={{ color: 'text.secondary' }}>
+						{Object.entries(typographyOptions).map(([key, option]) => (
+							<Typography
+								key={key}
+								variant="body2"
+								sx={{ color: 'text.secondary' }}
+								fontSize="large"
+							>
+								{option}
+							</Typography>
+						))}
+					</CardContent>
+				</Card>
+			</Collapse>
+		</Box>
+	);
+};