Merge pull request #22 from the-collab-lab/sd-dtp-managelist

src/App.jsx

@@ -49,7 +49,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';
@@ -165,7 +166,7 @@ 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, {
+	return 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,69 @@
-export function ManageList() {
+import { useState } from 'react';
+import { addItem } from '../api/firebase';
+
+export function ManageList({ listPath }) {
+	const [itemName, setItemName] = useState('');
+	const [daysUntilNextPurchase, setDaysUntilNextPurchase] = useState(7);
+	const [message, setMessage] = useState('');
+
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		try {
+			await addItem(listPath, { itemName, daysUntilNextPurchase });
+			setMessage('Item was successfully saved to the database.');
+		} catch (error) {
+			setMessage('There was an error saving the item to the database.');
+		}
+		setItemName('');
+		setDaysUntilNextPurchase(7);
+	};
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<div>
+			<h1>Manage Your Shopping List</h1>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="itemName">Item Name:</label>
+				<input
+					type="text"
+					id="itemName"
+					value={itemName}
+					onChange={(e) => setItemName(e.target.value)}
+					required
+				/>
+				<fieldset>
+					<legend>How soon will you need to buy this item again?</legend>
+					<label>
+						<input
+							type="radio"
+							value={7}
+							checked={daysUntilNextPurchase === 7}
+							onChange={() => setDaysUntilNextPurchase(7)}
+						/>
+						Soon (7 days)
+					</label>
+					<label>
+						<input
+							type="radio"
+							value={14}
+							checked={daysUntilNextPurchase === 14}
+							onChange={() => setDaysUntilNextPurchase(14)}
+						/>
+						Kind of soon (14 days)
+					</label>
+					<label>
+						<input
+							type="radio"
+							value={30}
+							checked={daysUntilNextPurchase === 30}
+							onChange={() => setDaysUntilNextPurchase(30)}
+						/>
+						Not soon (30 days)
+					</label>
+				</fieldset>
+				<br />
+				<button type="submit">Add Item</button>
+			</form>
+			{message && <p>{message}</p>}
+		</div>
 	);
 }