Adding mark item as purchased

src/App.jsx

@@ -50,7 +50,10 @@ export function App() {
 						index
 						element={<Home data={lists} setListPath={setListPath} exact />}
 					/>
-					<Route path="/list" element={<List data={data} />} />
+					<Route
+						path="/list"
+						element={<List data={data} listPath={listPath} />}
+					/>
 					<Route
 						path="/manage-list"
 						element={<ManageList listPath={listPath} />}

src/api/firebase.js

@@ -179,12 +179,20 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	});
 }
 
-export async function updateItem() {
+export async function updateItem(listPath, { itemId, totalPurchases }) {
 	/**
 	 * 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!
 	 */
+
+	const itemDoc = doc(db, listPath, 'items', itemId);
+
+	updateDoc(itemDoc, {
+		dateLastPurchased: new Date(),
+		totalPurchases: totalPurchases + 1,
+	});
+	return 'Item purchased!';
 }
 
 export async function deleteItem() {

src/components/ListItem.jsx

@@ -1,5 +1,41 @@
+import React, { useState, useEffect } from 'react';
 import './ListItem.css';
+import { updateItem } from '../api/firebase';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({ item, listPath }) {
+	const { id, totalPurchases, name, dateLastPurchased } = item;
+	const lessThan24HoursSincePurchase =
+		dateLastPurchased &&
+		(new Date() - dateLastPurchased.toDate()) / 3600000 < 24;
+
+	const [isChecked, setIsChecked] = useState(
+		lessThan24HoursSincePurchase || false,
+	);
+
+	async function handleCheckboxCheck() {
+		setIsChecked(!isChecked);
+		if (!isChecked) {
+			try {
+				await updateItem(listPath, {
+					itemId: id,
+					totalPurchases: totalPurchases,
+				});
+			} catch (error) {
+				console.error(error);
+			}
+		}
+	}
+
+	return (
+		<div>
+			<input
+				type="checkbox"
+				id="item"
+				name="item"
+				checked={isChecked}
+				onChange={handleCheckboxCheck}
+			/>
+			<label htmlFor="item">{name}</label>
+		</div>
+	);
 }

src/views/List.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ListItem } from '../components';
 
-export function List({ data }) {
+export function List({ data, listPath }) {
 	const [input, setInput] = useState('');
 
 	const filteredItems = data.filter((item) => {
@@ -38,7 +38,7 @@ export function List({ data }) {
 			</p>
 			<ul>
 				{filteredItems.map((item) => (
-					<ListItem key={item.id} name={item.name} />
+					<ListItem key={item.id} item={item} listPath={listPath} />
 				))}
 			</ul>
 		</>