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 updateItemQuantity(
+	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 to", 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.css";
-import { updateItem, deleteItem, ListItem } from "../api";
+import { updateItem, deleteItem, ListItem, updateItemQuantity } from "../api";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils";
+import ItemQuantityForm from "./forms/ItemQuantityForm";
 
 interface Props {
 	item: ListItem;
@@ -83,6 +84,30 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 		}
 	};
 
+	const editItemQuantity = async (quantity: number) => {
+		console.log("Item quantity edited:", quantity);
+
+		if (!listPath) {
+			toast.error("Error: listPath is missing or invalid.");
+			return;
+		}
+
+		if (quantity === 0) {
+			deleteItemHandler();
+		}
+
+		try {
+			await toast.promise(updateItemQuantity(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?");
 
@@ -113,6 +138,7 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 					aria-checked={isChecked}
 					disabled={isChecked}
 				/>
+				<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} /> x{" "}
 				{item.name}
 			</label>
 

src/components/forms/AddItemForm.tsx

@@ -4,10 +4,12 @@ import { validateItemName } from "../../utils";
 import toast from "react-hot-toast";
 
 import { useNavigate } from "react-router-dom";
+import ItemQuantityForm from "./ItemQuantityForm";
 
 interface Props {
 	listPath: string | null;
 	data: ListItem[];
+	item: ListItem;
 }
 
 enum PurchaseTime {
@@ -22,14 +24,20 @@ const purchaseTimelines = {
 	[PurchaseTime.notSoon]: 30,
 };
 
-export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
+export function AddItemForm({
+	listPath,
+	data: unfilteredListItems,
+	item,
+}: Props) {
 	const navigate = useNavigate();
 
 	const [itemName, setItemName] = useState("");
 	const [itemNextPurchaseTimeline, setItemNextPurchaseTimeline] = useState(
 		PurchaseTime.soon,
 	);
 
+	const [itemQuantity, setItemQuantity] = useState(1);
+
 	const handleItemNameTextChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setItemName(e.target.value);
 	};
@@ -38,6 +46,11 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		setItemNextPurchaseTimeline(changed);
 	};
 
+	const handleItemQuantityChange = (quantity: number) => {
+		setItemQuantity(quantity);
+		console.log("Item quantity entered:", quantity);
+	};
+
 	const handleSubmit = async (
 		e: FormEvent<HTMLFormElement>,
 		listPath: string,
@@ -63,23 +76,30 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 			return;
 		}
 
+		if (itemQuantity < 1) {
+			toast.error("Oops! Item quantity must be more than 0!");
+			return;
+		}
+
 		const daysUntilNextPurchase = purchaseTimelines[itemNextPurchaseTimeline];
 
 		try {
 			await toast.promise(
-				addItem(listPath, itemName, daysUntilNextPurchase), // saving original input
+				addItem(listPath, itemName, daysUntilNextPurchase, itemQuantity), // saving original input
 				{
 					loading: "Adding item to list.",
 					success: () => {
 						setItemName("");
 						setItemNextPurchaseTimeline(PurchaseTime.soon);
-						return `${itemName} successfully added to your list!`; // showing original input
+						setItemQuantity(1);
+						return `${itemQuantity} ${itemName} successfully added to your list!`; // showing original input
 					},
 					error: () => {
-						return `${itemName} failed to add to your list. Please try again!`;
+						return `${itemQuantity} ${itemName} failed to add to your list. Please try again!`;
 					},
 				},
 			);
+			console.log("Item quantity added:", itemQuantity);
 		} catch (error) {
 			console.error("Failed to add item:", error);
 		}
@@ -94,6 +114,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 				<>
 					<form onSubmit={(e) => handleSubmit(e, listPath)}>
 						<h3>First, add your item!</h3>
+						<ItemQuantityForm
+							saveItemQuantity={handleItemQuantityChange}
+							item={item}
+						/>
 						<label htmlFor="item-name">
 							Item:
 							<input

src/components/forms/ItemQuantityForm.tsx

@@ -0,0 +1,60 @@
+import { FormEvent, useState } from "react";
+import { ListItem } from "../../api";
+
+interface ItemQuantityFormProps {
+	saveItemQuantity: (quantity: number) => void;
+	item: ListItem;
+}
+
+const ItemQuantityForm: React.FC<ItemQuantityFormProps> = ({
+	saveItemQuantity,
+	item,
+}) => {
+	// A state variable to store the item quantity.
+	const [itemQuantity, setItemQuantity] = useState<number>(item?.itemQuantity);
+
+	// 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();
+		setEdit(!edit);
+		saveItemQuantity(itemQuantity);
+		console.log("Item quantity saved:", itemQuantity);
+	};
+
+	return (
+		<section>
+			<form>
+				<label htmlFor="item-quantity">How many:</label>{" "}
+				<input
+					id="item-quantity"
+					aria-label="Item quantity"
+					type="number"
+					name="item-quantity"
+					max="100"
+					value={itemQuantity}
+					onChange={(e) => setItemQuantity(Number(e.target.value))}
+					disabled={!edit}
+				/>
+				<div>
+					{edit ? (
+						<button onClick={updateItemQuantity}>Save</button>
+					) : (
+						<button onClick={toggleEdit}>Edit</button>
+					)}
+				</div>
+			</form>
+		</section>
+	);
+};
+
+export default ItemQuantityForm;