Marking shopping list items as purchased

src/App.jsx

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

src/api/firebase.js

@@ -183,15 +183,33 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
 		name: itemName,
 		totalPurchases: 0,
+		checked: false,
 	});
 }
 
-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, id, checked) {
+	const listCollectionRef = collection(db, listPath, 'items');
+	const itemRef = doc(listCollectionRef, id);
+
+	try {
+		const itemDoc = await getDoc(itemRef);
+		const data = itemDoc.data();
+		const currentTotalPurchases = data.totalPurchases;
+
+		if (checked) {
+			await updateDoc(itemRef, {
+				dateLastPurchased: new Date(),
+				totalPurchases: currentTotalPurchases + 1,
+				checked: checked,
+			});
+		} else {
+			await updateDoc(itemRef, {
+				checked: checked,
+			});
+		}
+	} catch (error) {
+		console.error('There was an error updating the item state: ', error);
+	}
 }
 
 export async function deleteItem() {

src/components/ListItem.jsx

@@ -1,5 +1,35 @@
 import './ListItem.css';
+import { updateItem } from '../api';
+import { useEffect } from 'react';
+import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({ name, listPath, id, isChecked, datePurchased }) {
+	const handleOnChange = async (event) => {
+		let { checked } = event.target;
+		if (!checked) return;
+
+		await updateItem(listPath, id, checked);
+	};
+
+	useEffect(() => {
+		const today = new Date().getTime();
+		const datePurchasedInMillis = datePurchased.toMillis();
+
+		if (isChecked && today - datePurchasedInMillis >= ONE_DAY_IN_MILLISECONDS) {
+			updateItem(listPath, id, !isChecked);
+		}
+	}, []);
+
+	return (
+		<li className="ListItem">
+			<input
+				type="checkbox"
+				id={id}
+				onChange={handleOnChange}
+				checked={isChecked}
+				disabled={isChecked}
+			/>
+			<label htmlFor={`${id}`}>{name}</label>
+		</li>
+	);
 }

src/utils/dates.js

@@ -1,4 +1,4 @@
-const ONE_DAY_IN_MILLISECONDS = 86400000;
+export const ONE_DAY_IN_MILLISECONDS = 86400000;
 
 /**
  * Get a new JavaScript Date that is `offset` days in the future.

src/views/Home.jsx

@@ -3,7 +3,6 @@ import './Home.css';
 import CreateShoppingList from '../components/CreateShoppingList';
 
 export function Home({ user, data, setListPath }) {
-	//console.log(user)
 	return (
 		<div className="Home">
 			<p>

src/views/List.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ListItem, SearchBar } from '../components';
 
-export function List({ data }) {
+export function List({ data, listPath }) {
 	const [search, setSearch] = useState('');
 	const [displayData, setDisplayData] = useState([]);
 
@@ -19,7 +19,14 @@ export function List({ data }) {
 			/>
 			<ul>
 				{displayData.map((item) => (
-					<ListItem key={item.id} name={item.name} />
+					<ListItem
+						key={item.id}
+						name={item.name}
+						listPath={listPath}
+						id={item.id}
+						isChecked={item.checked}
+						datePurchased={item.dateLastPurchased}
+					/>
 				))}
 			</ul>
 		</>