Ar mp mark item purchased

src/api/firebase.js

@@ -6,6 +6,7 @@ import {
 	doc,
 	onSnapshot,
 	updateDoc,
+	increment,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -183,12 +184,18 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	});
 }
 
-export async function updateItem() {
-	/**
-	 * TODO: Fill this out so that it uses the correct Firestore function
-	 * to update an existing item. You'll need to figure out what arguments
-	 * this function must accept!
-	 */
+export async function updateItem(listPath, { itemName }) {
+	if (!listPath || listPath.trim() === '') {
+		console.error('Error: Invalid listPath');
+		return;
+	}
+	const updateItemListCollectionRef = collection(db, listPath, 'items');
+	const updateItemListDocRef = doc(updateItemListCollectionRef, itemName);
+	const updateData = {
+		dateLastPurchased: new Date(),
+		totalPurchases: increment(1),
+	};
+	return updateDoc(updateItemListDocRef, updateData);
 }
 
 export async function deleteItem() {

src/components/ListItem.jsx

@@ -1,5 +1,56 @@
+import { useState, useEffect } from 'react';
 import './ListItem.css';
+import { updateItem } from '../api';
+import { increment } from 'firebase/firestore';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({ item }) {
+	const { name, dateLastPurchased } = item;
+	const [checked, setChecked] = useState(false);
+	const has24HoursPassed = (dateLastPurchased) => {
+		const purchaseDate = dateLastPurchased.toDate();
+		const currentTime = new Date().getTime(); // Current time in milliseconds
+		const ONE_DAY_IN_MILLISECONDS = 86400000; // 24 hours in milliseconds
+		return currentTime - purchaseDate >= ONE_DAY_IN_MILLISECONDS;
+	};
+
+	useEffect(() => {
+		if (dateLastPurchased) {
+			const is24HoursPassed = has24HoursPassed(dateLastPurchased);
+			if (is24HoursPassed) {
+				setChecked(false);
+			} else {
+				setChecked(true);
+			}
+		}
+	}, [dateLastPurchased]);
+
+	const handleChange = () => {
+		if (!checked) {
+			setChecked(!checked);
+			const listPath = localStorage.getItem('tcl-shopping-list-path');
+			updateItem(listPath, {
+				itemName: name,
+				dateLastPurchased: checked ? new Date() : null,
+				totalPurchases: increment(1),
+			})
+				.then(() => {
+					console.log('Item updated successfully.');
+				})
+				.catch(() => {
+					console.error('Error updating item: ', error);
+				});
+		}
+	};
+
+	return (
+		<li className="ListItem">
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={handleChange}
+				disabled={checked}
+			/>
+			{name}
+		</li>
+	);
 }

src/views/List.jsx

@@ -58,8 +58,8 @@ export function List({ data, userId }) {
 
 			<ul>
 				{filteredList &&
-					filteredList.map((list) => {
-						return <ListItem key={list.id} name={list.name} />;
+					filteredList.map((item) => {
+						return <ListItem key={item.id} item={item} />;
 					})}
 			</ul>
 		</>