Feat/add item quantity

src/api/firebase.ts

@@ -95,6 +95,7 @@ export function useShoppingLists(user: User | null) {
 const ListItemModel = t.type({
 	id: t.string,
 	name: t.string,
+	itemQuantity: t.number,
 	dateLastPurchased: t.union([FirebaseTimestamp, t.null]),
 	dateNextPurchased: FirebaseTimestamp,
 	totalPurchases: t.number,
@@ -233,6 +234,7 @@ export async function addItem(
 	listPath: string,
 	name: string,
 	daysUntilNextPurchase: number,
+	itemQuantity: number,
 ) {
 	const listCollectionRef = collection(db, listPath, "items");
 
@@ -244,8 +246,10 @@ export async function addItem(
 			dateLastPurchased: null,
 			dateNextPurchased: getFutureDate(daysUntilNextPurchase),
 			name,
+			itemQuantity,
 			totalPurchases: 0,
 		});
+		console.log("Item added successfully!", name, itemQuantity);
 	} catch (error) {
 		console.error("Error adding an item", error);
 		throw error;
@@ -295,6 +299,28 @@ export async function updateItem(listPath: string, item: ListItem) {
 	}
 }
 
+export async function storeItemQuantity(
+	listPath: string,
+	item: ListItem,
+	newQuantity: number,
+) {
+	const itemDocRef = doc(db, listPath, "items", item.id);
+	const oldItemQuantity = item.itemQuantity;
+	console.log("Old item quantity from Firebase:", oldItemQuantity);
+
+	const updates = {
+		itemQuantity: newQuantity,
+	};
+
+	try {
+		await updateDoc(itemDocRef, updates);
+		console.log("Item quantity updated in Firebase:", newQuantity);
+	} catch (error) {
+		console.error("Error updating quantity", error);
+		throw error;
+	}
+}
+
 //delete an item from the list
 export async function deleteItem(listPath: string, item: ListItem) {
 	//reference the item document

src/components/ListItem.tsx

@@ -1,8 +1,9 @@
 import "./ListItem.scss";
-import { updateItem, deleteItem, ListItem } from "../api";
+import { updateItem, deleteItem, ListItem, storeItemQuantity } from "../api";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils";
+import { ItemQuantityForm } from "./forms/ItemQuantityForm";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 
@@ -80,6 +81,26 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 		}
 	};
 
+	const editItemQuantity = async (quantity: number) => {
+		console.log("Quantity edited in list:", quantity);
+
+		if (quantity < 1) {
+			toast.error("Oops! Quantity must be at least 1!");
+			return;
+		}
+
+		try {
+			await toast.promise(storeItemQuantity(listPath, item, quantity), {
+				loading: `Updating ${item.name} quantity!`,
+				success: `${item.name} quantity updated!`,
+				error: `Failed to update ${item.name} quantity. Please try again!`,
+			});
+		} catch (error) {
+			console.error(`Error updating ${item.name} quantity`, error);
+			alert("Error updating item quantity!");
+		}
+	};
+
 	const deleteItemHandler = () => {
 		const isConfirmed = window.confirm("Do you want to delete this item?");
 
@@ -108,12 +129,11 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 				onChange={handleCheckChange}
 				aria-checked={isChecked}
 				disabled={isChecked}
-				label={item.name}
 			/>
-
+			<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} /> x{" "}
+			{item.name}{" "}
 			<span>
 				{getUrgencyStatus(item)}
-
 				<Button onClick={() => deleteItemHandler()}>Delete Item</Button>
 			</span>
 		</div>

src/components/forms/AddItemForm.tsx

@@ -32,6 +32,8 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		PurchaseTime.soon,
 	);
 
+	const [addedQuantity, setAddedQuantity] = useState(1);
+
 	const handleItemNameTextChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setItemName(e.target.value);
 	};
@@ -40,6 +42,11 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		setItemNextPurchaseTimeline(changed);
 	};
 
+	const handleItemQuantityChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setAddedQuantity(Number(e.target.value));
+		console.log("Quantity captured in Add Item input:", addedQuantity);
+	};
+
 	const handleSubmit = async (
 		e: FormEvent<HTMLFormElement>,
 		listPath: string,
@@ -69,103 +76,111 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 
 		try {
 			await toast.promise(
-				addItem(listPath, itemName, daysUntilNextPurchase), // saving original input
+				addItem(listPath, itemName, daysUntilNextPurchase, addedQuantity), // saving original input
 				{
 					loading: "Adding item to list.",
 					success: () => {
 						setItemName("");
 						setItemNextPurchaseTimeline(PurchaseTime.soon);
-						return `${itemName} successfully added to your list!`; // showing original input
+						setAddedQuantity(1);
+						return `${addedQuantity} ${itemName} successfully added to your list!`; // showing original input
 					},
 					error: () => {
-						return `${itemName} failed to add to your list. Please try again!`;
+						return `Failed to add ${addedQuantity} ${itemName} to your list. Please try again!`;
 					},
 				},
 			);
+			console.log("Quantity added from Add Item form:", addedQuantity);
 		} catch (error) {
 			console.error("Failed to add item:", error);
 		}
 	};
+
 	const navigateToListPage = () => {
 		navigate("/list");
 	};
 
 	return (
 		<section>
-			{listPath && (
-				<>
-					<Form onSubmit={(e) => handleSubmit(e, listPath)}>
-						<h3>First, add your item!</h3>
-						<Form.Label htmlFor="item-name">Item:</Form.Label>
-						<Form.Control
-							id="item-name"
-							type="text"
-							name="item"
-							value={itemName}
-							onChange={handleItemNameTextChange}
-							aria-label="Enter the item name"
-							aria-required
+			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
+				<h3>First, add your item!</h3>
+				<Form.Label htmlFor="item-name">
+					Item:
+					<Form.Control
+						id="item-name"
+						type="text"
+						name="item"
+						value={itemName}
+						onChange={handleItemNameTextChange}
+						aria-label="Enter the item name"
+						aria-required
+					/>
+				</Form.Label>
+				<label htmlFor="item-quantity">
+					Quantity:
+					<Form.Control
+						id="item-quantity"
+						type="number"
+						name="quantity"
+						value={addedQuantity}
+						onChange={handleItemQuantityChange}
+						aria-label="Enter the item quantity"
+						aria-required
+					/>
+				</label>
+				<br />
+				<h3>Next, pick when you plan on buying this item again!</h3>
+				<fieldset>
+					<legend>When to buy:</legend>
+					<Form.Label htmlFor={PurchaseTime.soon}>
+						<Form.Check
+							type="radio"
+							id={PurchaseTime.soon}
+							name="when-to-buy"
+							value={PurchaseTime.soon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.soon}
+							aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
+						/>
+						Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
+					</Form.Label>
+					<br />
+					<Form.Label htmlFor={PurchaseTime.kindOfSoon}>
+						<Form.Check
+							type="radio"
+							id={PurchaseTime.kindOfSoon}
+							name="when-to-buy"
+							value={PurchaseTime.kindOfSoon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.kindOfSoon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
+							aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
+						/>
+						Kind of soon -- Within {purchaseTimelines[PurchaseTime.kindOfSoon]}{" "}
+						days!
+					</Form.Label>
+					<br />
+					<label htmlFor={PurchaseTime.notSoon}>
+						<Form.Check
+							type="radio"
+							id={PurchaseTime.notSoon}
+							name="when-to-buy"
+							value={PurchaseTime.notSoon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
+							aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
 						/>
-						<br />
-						<h3>Next, pick when you plan on buying this item again!</h3>
-						<fieldset className="border border-2 rounded-1 p-2 mb-4">
-							<legend className="fs-2 float-none w-auto p-2">
-								When to buy:
-							</legend>
-							<Form.Check
-								type="radio"
-								className="mb-3 ms-3"
-								id={PurchaseTime.soon}
-								name="when-to-buy"
-								value={PurchaseTime.soon}
-								required
-								onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
-								checked={itemNextPurchaseTimeline === PurchaseTime.soon}
-								aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
-								label={`Soon -- Within ${purchaseTimelines[PurchaseTime.soon]} days!`}
-							/>
-							<Form.Check
-								type="radio"
-								className="mb-3 ms-3"
-								id={PurchaseTime.kindOfSoon}
-								name="when-to-buy"
-								value={PurchaseTime.kindOfSoon}
-								required
-								onChange={() =>
-									handleNextPurchaseChange(PurchaseTime.kindOfSoon)
-								}
-								checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
-								aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
-								label={`Kind of soon -- Within
-											${purchaseTimelines[PurchaseTime.kindOfSoon]} days!`}
-							/>
-							<Form.Check
-								type="radio"
-								className="mb-3 ms-3"
-								id={PurchaseTime.notSoon}
-								name="when-to-buy"
-								value={PurchaseTime.notSoon}
-								required
-								onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
-								checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
-								aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
-								label={`Not soon -- Within ${purchaseTimelines[PurchaseTime.notSoon]} days!`}
-							/>
-						</fieldset>
-						<Button
-							type="submit"
-							aria-label="Add item to shopping list"
-							className="mb-3"
-						>
-							Submit Item
-						</Button>
-					</Form>
-					<h4>Let&apos;s go look at your list!</h4>
-					<Button onClick={navigateToListPage} className="my-3">
-						{"View List"}
-					</Button>
-				</>
-			)}
+						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
+					</label>
+				</fieldset>
+				<Button type="submit" aria-label="Add item to shopping list">
+					Submit Item
+				</Button>
+			</Form>
+			<h4>Let&apos;s go look at your list!</h4>
+			<Button onClick={navigateToListPage}>{"View List"}</Button>
 		</section>
 	);
 }

src/components/forms/ItemQuantityForm.tsx

@@ -0,0 +1,68 @@
+import { FormEvent, useState } from "react";
+import { ListItem } from "../../api";
+import { toast } from "react-hot-toast";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+
+interface ItemQuantityFormProps {
+	saveItemQuantity: (quantity: number) => void;
+	item: ListItem;
+}
+
+export function ItemQuantityForm({
+	saveItemQuantity,
+	item,
+}: ItemQuantityFormProps) {
+	// A state variable to store the item quantity.
+	const [itemQuantity, setItemQuantity] = useState<number>(
+		item ? item.itemQuantity : 1,
+	);
+
+	// A state variable to store the edit mode.
+	const [edit, setEdit] = useState<boolean>(false);
+
+	// A function that will toggle the edit mode.
+	const toggleEdit = (e: FormEvent<HTMLButtonElement>): void => {
+		e.preventDefault();
+		setEdit(!edit);
+		console.log("Toggle edit mode:", edit);
+	};
+
+	// A function that will save the item quantity.
+	const updateItemQuantity = (e: FormEvent<HTMLButtonElement>): void => {
+		e.preventDefault();
+
+		if (itemQuantity < 1) {
+			toast.error("Oops! Quantity must be at least 1!");
+			setEdit(edit);
+			return;
+		}
+		setEdit(!edit);
+		saveItemQuantity(itemQuantity);
+		console.log("Item quantity updated in Item Quantity Form:", itemQuantity);
+	};
+
+	return (
+		<>
+			<Form.Control
+				id="item-quantity"
+				aria-label="Item quantity"
+				type="number"
+				name="item-quantity"
+				min="1"
+				max="100"
+				value={itemQuantity}
+				onChange={(e) => setItemQuantity(Number(e.target.value))}
+				disabled={!edit}
+			/>
+			{edit ? (
+				<span>
+					<Button onClick={updateItemQuantity}>Save!</Button>{" "}
+					<Button onClick={toggleEdit}>Cancel!</Button>
+				</span>
+			) : (
+				<Button onClick={toggleEdit}>Edit!</Button>
+			)}
+		</>
+	);
+}