Issue 5. Add Items to list

src/App.jsx

@@ -51,7 +51,10 @@ export function App() {
 						element={<Home data={lists} setListPath={setListPath} />}
 					/>
 					<Route path="/list" element={<List data={data} />} />
-					<Route path="/manage-list" element={<ManageList />} />
+					<Route
+						path="/manage-list"
+						element={<ManageList listPath={listPath} />}
+					/>
 				</Route>
 			</Routes>
 		</Router>

src/api/firebase.js

@@ -6,6 +6,7 @@ import {
 	doc,
 	onSnapshot,
 	updateDoc,
+	addDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -163,9 +164,7 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
  */
 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!
-	return console.log(listCollectionRef, {
+	await addDoc(listCollectionRef, {
 		dateCreated: new Date(),
 		// NOTE: This is null because the item has just been created.
 		// We'll use updateItem to put a Date here when the item is purchased!

src/views/ManageList.jsx

@@ -1,7 +1,79 @@
-export function ManageList() {
+import { addItem } from '../api/firebase';
+import { useRef } from 'react';
+
+export function ManageList({ listPath }) {
+	const formRef = useRef(null);
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+
+		const formData = new FormData(e.target);
+		const itemName = formData.get('itemName');
+		const daysUntilNextPurchase = parseInt(
+			formData.get('daysUntilNextPurchase'),
+		);
+
+		try {
+			await addItem(listPath, {
+				itemName,
+				daysUntilNextPurchase,
+			});
+
+			alert('Item saved successfully');
+			formRef.current.reset();
+		} catch (error) {
+			alert(`There was a problem: ${error.message}`);
+		}
+	};
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<form ref={formRef} onSubmit={handleSubmit}>
+			<div>
+				<label htmlFor="item">Item Name</label>
+				<input name="itemName" type="text" id="item" required />
+			</div>
+
+			<div>
+				<label htmlFor="daysUntilNextPurchase">
+					How soon do you think you'll purchase this item again?
+				</label>
+
+				<p>Please select an option:</p>
+
+				<ul>
+					<li>
+						<label htmlFor="soon"> Soon (7 days)</label>
+						<input
+							value={7}
+							name="daysUntilNextPurchase"
+							type="radio"
+							id="soon"
+							required
+						/>
+					</li>
+					<li>
+						<label htmlFor="kind-of-soon"> Kind of Soon (14 days)</label>
+						<input
+							value={14}
+							name="daysUntilNextPurchase"
+							type="radio"
+							id="kind-of-soon"
+							required
+						/>
+					</li>
+					<li>
+						<label htmlFor="not-soon"> Not Soon (30 days)</label>
+						<input
+							value={30}
+							name="daysUntilNextPurchase"
+							type="radio"
+							id="not-soon"
+							required
+						/>
+					</li>
+				</ul>
+			</div>
+			<button type="submit">Submit</button>
+		</form>
 	);
 }