Merge pull request #20 from the-collab-lab/mm-qg-feat-addItem

Add item to firestore

src/App.jsx

@@ -51,7 +51,10 @@ export function App() {
 						}
 					/>
 					<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,9 +166,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, {
+	return 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,56 @@
-export function ManageList() {
+import { useState } from 'react';
+import { addItem } from '../api/firebase';
+export function ManageList({ listPath }) {
+	const [formData, setFormData] = useState({
+		itemName: '',
+		daysUntilNextPurchase: '',
+	});
+
+	const handleSubmit = async (event) => {
+		try {
+			event.preventDefault();
+			await addItem(listPath, formData);
+			alert(`${formData.itemName} was added to the list successfully`);
+		} catch (error) {
+			alert(`There was a problem adding ${formData.itemName} to the list`);
+		}
+	};
+
+	const handleChange = (event) => {
+		let { name, value } = event.target;
+		setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
+	};
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<form onSubmit={(event) => handleSubmit(event)}>
+			<div className="item-name">
+				<label htmlFor="itemName">Enter the item name: </label>
+				<input
+					type="text"
+					name="itemName"
+					id="itemName"
+					required
+					value={formData.itemName}
+					onChange={handleChange}
+				/>
+			</div>
+			<div className="buy-again">
+				<label htmlFor="daysUntilNextPurchase">
+					When do you think you will need to purchase this item again?
+				</label>
+				<select
+					name="daysUntilNextPurchase"
+					id="daysUntilNextPurchase"
+					value={formData.daysUntilNextPurchase}
+					onChange={handleChange}
+				>
+					<option value="">Select Time</option>
+					<option value="7">Soon (7 days)</option>
+					<option value="14">Kind of soon (14 days)</option>
+					<option value="30">Not soon (30 days)</option>
+				</select>
+			</div>
+			<button type="submit">Add Item</button>
+		</form>
 	);
 }