Issue #9 : mark an item on shopping list as purchased and implement 24HR expiration for repurchasing.

package.json

@@ -7,6 +7,7 @@
 		"npm": ">=8.19.0"
 	},
 	"dependencies": {
+		"@uidotdev/usehooks": "^2.4.1",
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

src/App.jsx

@@ -50,7 +50,10 @@ export function App() {
 							<Home data={lists} setListPath={setListPath} user={user} />
 						}
 					/>
-					<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

@@ -198,12 +198,22 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	});
 }
 
-export async function updateItem() {
+export async function updateItem(
+	listPath,
+	{ itemId, totalPurchases, dateLastPurchased },
+) {
 	/**
 	 * 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!
 	 */
+	console.table({ listPath, itemId, totalPurchases });
+	const itemDocRef = doc(db, `${listPath}/items`, itemId);
+
+	await updateDoc(itemDocRef, {
+		totalPurchases,
+		dateLastPurchased,
+	});
 }
 
 export async function deleteItem() {

src/components/ListItem.css

@@ -1,7 +1,10 @@
 .ListItem {
-	align-items: baseline;
 	display: flex;
 	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	border-bottom: 1px solid var(--color-border);
 	font-size: 1.2em;
 }
 
@@ -12,3 +15,8 @@
 .ListItem-label {
 	margin-left: 0.2em;
 }
+
+.item-name {
+	flex-grow: 1;
+	margin-right: 10px;
+}

src/components/ListItem.jsx

@@ -1,5 +1,65 @@
+import { useEffect } from 'react';
+import { useToggle } from '@uidotdev/usehooks';
+import { Toggle } from './Toggle.jsx';
 import './ListItem.css';
+import { updateItem } from '../api/firebase.js';
+// import { getFutureDate} from '../utils/dates.js'
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({
+	name,
+	listPath,
+	itemId,
+	totalPurchases,
+	dateLastPurchased,
+}) {
+	const [purchased, setPurchased] = useToggle(false);
+
+	useEffect(() => {
+		if (dateLastPurchased) {
+			const checkExpiration = () => {
+				const expirationDate = new Date(
+					dateLastPurchased.toMillis() + 24 * 60 * 60 * 1000,
+				);
+				const currentDate = new Date();
+				if (currentDate > expirationDate) {
+					setPurchased(false);
+				} else {
+					setPurchased(true);
+				}
+			};
+			checkExpiration();
+			const refreshInterval = setInterval(checkExpiration, 1000);
+			return () => clearInterval(refreshInterval);
+		}
+	}, [dateLastPurchased]);
+
+	const handleToggle = async () => {
+		const isPurchasing = !purchased;
+		setPurchased();
+		if (isPurchasing) {
+			try {
+				await updateItem(listPath, {
+					itemId,
+					totalPurchases: totalPurchases + 1,
+					dateLastPurchased: new Date(),
+				});
+				console.log(`${name} updated successfully`);
+				alert(`${name} is purchased successfully`);
+			} catch (error) {
+				console.error('Error updating item:', error);
+			}
+		}
+	};
+
+	return (
+		<div>
+			<li className="ListItem">
+				<div className="item-name">{name}</div>
+				<Toggle toggle={handleToggle} on={purchased} name={name} />
+				<div>
+					{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
+				</div>
+			</li>
+		</div>
+	);
 }

src/components/Toggle.css

@@ -0,0 +1,19 @@
+.Toggle {
+	margin-right: 10px;
+	display: flex;
+	align-items: center;
+}
+
+.Toggle-checkbox {
+	accent-color: var(--color-accent);
+	margin-right: 10px;
+	cursor: pointer;
+}
+
+.Toggle-label {
+	font-size: 1em;
+}
+
+.Toggle-text {
+	margin-left: 5px;
+}

src/components/Toggle.jsx

@@ -0,0 +1,27 @@
+import './Toggle.css';
+
+export function Toggle({ on, toggle, name }) {
+	const handleToggle = () => {
+		const newCheckedState = window.confirm(
+			'Would you like to confirm the purchase?',
+		);
+		if (newCheckedState) {
+			toggle();
+		}
+	};
+
+	return (
+		<div className="Toggle">
+			<label className="Toggle-label" htmlFor={name}>
+				<input
+					type="checkbox"
+					id={name}
+					checked={on}
+					onChange={handleToggle}
+					className="Toggle-checkbox"
+				/>
+				<span className="Toggle-text">{on ? 'Purchased' : 'Unpurchased'}</span>
+			</label>
+		</div>
+	);
+}

src/views/List.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { ListItem } from '../components';
 
-export function List({ data }) {
+export function List({ data, listPath }) {
+	// console.log("list", listPath)
 	const [searchInput, setSearchInput] = useState('');
 
 	const handleInputChange = (e) => {
@@ -42,7 +43,16 @@ export function List({ data }) {
 			<ul>
 				{filterList.length ? (
 					filterList.map((item) => {
-						return <ListItem key={item.id} name={item.name} />;
+						return (
+							<ListItem
+								key={item.id}
+								name={item.name}
+								itemId={item.id}
+								listPath={listPath}
+								totalPurchases={item.totalPurchases}
+								dateLastPurchased={item.dateLastPurchased}
+							/>
+						);
 					})
 				) : (
 					<li> No items found!</li>