Added the checkbox and update dateLastPurchased

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

@@ -7,6 +7,7 @@ import {
 	onSnapshot,
 	updateDoc,
 	addDoc,
+	FieldValue,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -186,12 +187,26 @@ 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, id) {
+	//console.log(itemName)
+	//const listCollectionRef = collection(db, listPath, 'items');
+	const itemRef = doc(collection(db, listPath, 'items'), id);
+	//const itemtDoc = await getDoc(itemRef);
+	//console.log(parseInt(itemtDoc._document.data.value.mapValue.fields.totalPurchases.integerValue) + 1)
+	try {
+		await updateDoc(itemRef, {
+			dateLastPurchased: new Date(),
+			//totalPurchases is undefiend to be debugged
+			totalPurchases: {
+				...prevFields,
+				integerValue: parseInt(totalPurchases.integerValue) + 1,
+			},
+		});
+
+		console.log('item updated');
+	} catch (error) {
+		console.log(error);
+	}
 }
 
 export async function deleteItem() {

src/components/ListItem.jsx

@@ -1,5 +1,16 @@
 import './ListItem.css';
+import { updateItem } from '../api';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({ name, listPath, id }) {
+	//console.log(listPath)
+	const handleOnChange = async () => {
+		await updateItem(listPath, id);
+	};
+
+	return (
+		<li className="ListItem">
+			<input type="checkbox" id={id} onChange={handleOnChange} />
+			<label htmlFor={`${id}`}>{name}</label>
+		</li>
+	);
 }

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,12 @@ 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}
+					/>
 				))}
 			</ul>
 		</>