Feat: Allowing user to add items to shopping list

package.json

@@ -10,6 +10,7 @@
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-hot-toast": "^2.4.1",
 		"react-router-dom": "^6.26.0"
 	},
 	"devDependencies": {

src/api/firebase.js

@@ -165,6 +165,19 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	const listCollectionRef = collection(db, listPath, 'items');
 	// TODO: Replace this call to console.log with the appropriate
 	// Firebase function, so this information is sent to your database!
+
+	//This saves item to database.
+	await setDoc(listCollectionRef, {
+		owner: userId,
+	});
+
+	// This updates user record.
+	const userDocumentRef = doc(db, 'users', userEmail);
+
+	updateDoc(userDocumentRef, {
+		sharedLists: arrayUnion(listCollectionRef),
+	});
+
 	return console.log(listCollectionRef, {
 		dateCreated: new Date(),
 		// NOTE: This is null because the item has just been created.

src/views/ManageList.jsx

@@ -1,7 +1,38 @@
+import { addItem } from '../api/firebase';
+import toast, { Toaster } from 'react-hot-toast';
+
 export function ManageList() {
+	const notify = () => toast.success('Item added to list!');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		addItem({ itemName: item });
+		console.log('hi');
+		notify();
+	};
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<div>
+			<p>
+				Hello from the <code>/manage-list</code> page!
+			</p>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="item">Item </label>
+				<input id="item" type="text" />
+				<br />
+				{/* radio inputs for how soon to buy. */}
+				<input type="radio" id="soon" name="when-to-buy" value="7" />
+				<label htmlFor="soon">Soon</label>
+				<br />
+				<input type="radio" id="kind-of-soon" name="when-to-buy" value="14" />
+				<label htmlFor="kind-of-soon">Kind of soon</label>
+				<br />
+				<input type="radio" id="not-soon" name="when-to-buy" value="30" />
+				<label htmlFor="not-soon">Not soon</label>
+				<br />
+				<button type="submit">Submit Item</button>
+			</form>
+			<Toaster />
+		</div>
 	);
 }