Bm vy mark as purchased

src/App.jsx

@@ -57,7 +57,10 @@ export function App() {
 							/>
 						}
 					/>
-					<Route path="/list/:path/:path" element={<List data={data} />} />
+					<Route
+						path="/list/:path/:path"
+						element={<List listPath={listPath} data={data} />}
+					/>
 					<Route
 						path="/manage-list"
 						element={

src/api/firebase.js

@@ -10,7 +10,7 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import { getFutureDate } from '../utils';
+import { getFutureDate, isMoreThanADayAgo } from '../utils';
 
 /**
  * A custom hook that subscribes to the user's shopping lists in our Firestore
@@ -179,12 +179,16 @@ 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, itemId) {
+	const listCollectionRef = collection(db, listPath, 'items');
+	const itemDocumentRef = doc(listCollectionRef, itemId);
+	const item = await getDoc(itemDocumentRef);
+	const itemTotalPurchases = item.data().totalPurchases;
+	await updateDoc(itemDocumentRef, {
+		dateLastPurchased: new Date(),
+		totalPurchases: itemTotalPurchases + 1,
+	});
+	return itemDocumentRef;
 }
 
 export async function deleteItem() {

src/components/ListItem.css

@@ -1,14 +1,27 @@
 .ListItem {
-	align-items: baseline;
 	display: flex;
 	flex-direction: row;
 	font-size: 1.2em;
 }
 
+.ListItem__input {
+	display: flex;
+	padding-inline-start: 0.5em;
+}
 .ListItem-checkbox {
 	accent-color: var(--color-accent);
 }
 
 .ListItem-label {
 	margin-left: 0.2em;
 }
+
+.ListItem__checked {
+	text-decoration: line-through;
+	color: var(--color-checked);
+}
+
+.ListItem__label {
+	font-size: 0.5em;
+	padding: 0.8em 0;
+}

src/components/ListItem.jsx

@@ -1,5 +1,32 @@
 import './ListItem.css';
 
-export function ListItem({ name }) {
-	return <li className="ListItem">{name}</li>;
+export function ListItem({
+	isRecentlyPurchased,
+	itemId,
+	listPath,
+	name,
+	updatePurchaseDate,
+}) {
+	return (
+		<li className="ListItem">
+			<span className={isRecentlyPurchased ? 'ListItem__checked' : ''}>
+				{name}
+			</span>
+			<div className="ListItem__input">
+				<input
+					type="checkbox"
+					onChange={() => {
+						updatePurchaseDate(listPath, itemId);
+					}}
+					id={itemId}
+					checked={isRecentlyPurchased}
+					disabled={isRecentlyPurchased}
+				/>
+				<label
+					htmlFor={itemId}
+					className="ListItem__label"
+				>{`Mark ${name} as purchased`}</label>
+			</div>
+		</li>
+	);
 }

src/index.css

@@ -1,8 +1,10 @@
 :root {
 	--color-black: hsla(220, 13%, 18%, 1);
 	--color-gray-dark: hsla(220, 13%, 25%, 1);
-	--color-white: hsla(220, 13%, 98%, 1);
+	--color-white: hsla(210, 20%, 98%, 1);
 	--color-gray-light: hsla(220, 13%, 94%, 1);
+	--color-gray-medium-dark: hsla(0, 0%, 72%, 1);
+	--color-gray-medium-light: hsla(222, 7%, 34%, 1);
 	--color-emerald-green: hsla(168, 92%, 25%, 1);
 	--color-vermillion-green: hsla(168, 92%, 43%, 1);
 	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
@@ -14,6 +16,7 @@
 	--color-border: hsla(220, 13%, 32%, 1);
 	--color-error: var(--color-red);
 	--color-text: var(--color-white);
+	--color-checked: var(--color-gray-medium-dark);
 }
 
 @media screen and (prefers-color-scheme: light) {
@@ -22,6 +25,7 @@
 		--color-bg: var(--color-white);
 		--color-border: hsla(220, 13%, 78%, 1);
 		--color-text: var(--color-black);
+		--color-checked: var(--color-gray-medium-light);
 	}
 }
 
@@ -57,8 +61,19 @@ html {
 body {
 	background-color: var(--color-bg);
 	color: var(--color-text);
-	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
-		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
 	font-size: 1.8rem;
 	line-height: 1.4;
 	margin: 0;
@@ -75,7 +90,12 @@ code {
 	border-radius: 4px;
 	color: var(--color-text);
 	display: inline-block;
-	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
 		monospace;
 	font-size: 0.9em;
 	padding: 0.15em 0.15em;

src/utils/dates.js

@@ -10,3 +10,14 @@ const ONE_DAY_IN_MILLISECONDS = 86400000;
 export function getFutureDate(offset) {
 	return new Date(Date.now() + offset * ONE_DAY_IN_MILLISECONDS);
 }
+
+/**
+ * Return whether if a date is more than 24 hours ago
+ * @param {Object} date - Date to compare
+ */
+export const isMoreThanADayAgo = (date) => {
+	let now = new Date();
+	const dateInMiliseconds = date.seconds * 1000;
+	const diff = now - dateInMiliseconds;
+	return ONE_DAY_IN_MILLISECONDS < diff;
+};

src/views/List.jsx

@@ -2,15 +2,28 @@ import { useState, useEffect } from 'react';
 import { ListItem } from '../components';
 import SearchList from '../components/SearchList';
 import { useParams } from 'react-router-dom';
+import { updateItem } from '../api/firebase';
+import { isMoreThanADayAgo } from '../utils';
 
-export function List({ data }) {
+export function List({ data, listPath }) {
 	const [newList, setNewList] = useState([]);
 	const { path } = useParams();
 
 	useEffect(() => {
 		setNewList(data);
 	}, [data]);
 
+	const wasRecentlyPurchased = (item) => {
+		if (!item.dateLastPurchased) {
+			return false;
+		}
+		return !isMoreThanADayAgo(item.dateLastPurchased);
+	};
+
+	const updatePurchaseDate = (listPath, item, date) => {
+		updateItem(listPath, item, date);
+	};
+
 	return (
 		<>
 			<h2>
@@ -19,7 +32,16 @@ export function List({ data }) {
 			<SearchList data={data} setNewList={setNewList} />
 			<ul>
 				{newList.map((item) => (
-					<ListItem key={item.id} name={item.name} />
+					<ListItem
+						dateLastPurchased={item.dateLastPurchased}
+						isRecentlyPurchased={wasRecentlyPurchased(item)}
+						itemId={item.id}
+						key={item.id}
+						listPath={listPath}
+						name={item.name}
+						purchaseDate={item.dateLastPurchased}
+						updatePurchaseDate={updatePurchaseDate}
+					/>
 				))}
 			</ul>
 		</>