Issue #9 - Marking item as purchased (#28)

* add checkbox to ListItem

* updated isPurchased handling

* Passed through listPath, added updateDoc to firebase function, debugging list item

* passed listPath to ListItem, added useEffect to update isPurchased, changed updateItem function in firebase

* Refactored to remove try/catch in updateItem function

* used setTimeout to uncheck boxes for items that were purchased more than a day ago

* debugged checkbox

* Changed to useMemo, updated timeout to use milliseconds in a day

* Changed to useMemo, updated timeout to use milliseconds in a day

* Decrement in the db when user unchecks before 24hrs is up, moved async purchaseItem function into changeHandler and removed useEffect

* Revert "Decrement in the db when user unchecks before 24hrs is up, moved async purchaseItem function into changeHandler and removed useEffect"

This reverts commit d5688d8.

* Decrement in the db when user unchecks before 24hrs is up, moved async purchaseItem function into changeHandler and removed useEffect

* removed unnecessary comments, added in intentional comments

* Switched changeHandler to function expression

* Added updateTimer function to calculate remaining time, updated useEffeect to use remaining time in setTimeout

* Updated setTimeout if statement

* Update src/components/ListItem.jsx

Co-authored-by: Raynaldo Sutisna <[email protected]>

* refactored to prevent timer running when purchasedOneDayAgo is false

---------

Co-authored-by: Devina Gillis <[email protected]>
Co-authored-by: Devina Gillis <[email protected]>
Co-authored-by: Raynaldo Sutisna <[email protected]>

src/api/firebase.js

@@ -7,6 +7,7 @@ import {
 	doc,
 	onSnapshot,
 	updateDoc,
+	increment,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -186,12 +187,13 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	return newItem;
 }
 
-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, itemID, isChecked) {
+	const listRef = doc(db, listPath, 'items', itemID);
+
+	await updateDoc(listRef, {
+		dateLastPurchased: isChecked ? new Date() : null,
+		totalPurchases: isChecked ? increment(1) : increment(-1),
+	});
 }
 
 export async function deleteItem() {

src/components/ListItem.jsx

@@ -1,5 +1,70 @@
 import './ListItem.css';
+import { updateItem } from '../api/firebase.js';
+import { useState, useEffect, useMemo } from 'react';
+import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates.js';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({ listPath, item }) {
+	/* Returns a boolean that is passed into isChecked useState
+	On render, box is checked if purchased less than a day ago */
+
+	const purchasedOneDayAgo = useMemo(() => {
+		if (item.dateLastPurchased === null) {
+			return false;
+		}
+
+		const timeDiff = Date.now() - item.dateLastPurchased.seconds * 1000;
+		return timeDiff <= ONE_DAY_IN_MILLISECONDS;
+	}, [item.dateLastPurchased]);
+
+	const [isChecked, setIsChecked] = useState(purchasedOneDayAgo);
+	const changeHandler = (e) => {
+		setIsChecked(!isChecked);
+		async function purchaseItem() {
+			try {
+				await updateItem(listPath, item.id, !isChecked);
+			} catch (error) {
+				alert(error.message);
+			}
+		}
+		purchaseItem();
+	};
+
+	//Calculate time remaining if purchase was less than 24 hours ago
+	const updateTimer = () => {
+		if (item.dateLastPurchased) {
+			const timeElapsed = Date.now() - item.dateLastPurchased.seconds * 1000;
+			if (timeElapsed < ONE_DAY_IN_MILLISECONDS) {
+				return ONE_DAY_IN_MILLISECONDS - timeElapsed;
+			} else {
+				return 0;
+			}
+		}
+	};
+
+	//sets a timer to uncheck an item 24 hours after it's purchased
+	useEffect(() => {
+		if (purchasedOneDayAgo) {
+			let timeRemaining = updateTimer();
+
+			const timer = setTimeout(() => {
+				setIsChecked(false);
+			}, timeRemaining);
+			return () => clearTimeout(timer);
+		}
+	}, [isChecked, purchasedOneDayAgo]);
+
+	return (
+		<li className="ListItem">
+			<label htmlFor={item.name}>
+				{item.name}
+				<input
+					type="checkbox"
+					id={item.name}
+					name="purchased"
+					onChange={changeHandler}
+					checked={isChecked}
+				/>
+			</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/List.jsx

@@ -2,7 +2,9 @@ import { ListItem } from '../components';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+
 export function List({ data, listPath }) {
+
 	const [searchTerm, setSearchTerm] = useState('');
 
 	const navigate = useNavigate();
@@ -62,7 +64,7 @@ export function List({ data, listPath }) {
 			) : null}
 			<ul>
 				{filteredData.map((item) => {
-					return <ListItem key={item.id} name={item.name} />;
+					return <ListItem key={item.id} item={item} listPath={listPath} />;
 				})}
 			</ul>
 		</>