Merge pull request #30 from the-collab-lab/nk-db-add-new-item-to-list

Issue #5 | Add Item to Shopping List

src/api/firebase.js

@@ -2,6 +2,7 @@ import {
 	arrayUnion,
 	getDoc,
 	setDoc,
+	addDoc,
 	collection,
 	doc,
 	onSnapshot,
@@ -166,7 +167,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 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,108 @@
+import { useCallback, useState } from 'react';
+import { useStateWithStorage } from '../utils';
+import { addItem } from '../api';
+
+const soonDate = 7;
+const kindOfSoonDate = 14;
+const notSoonDate = 30;
+
 export function ManageList() {
+	const [daysUntilNextPurchase, setDaysUntilNextPurchase] = useState(null);
+	const [itemName, setItemName] = useState('');
+
+	const [listPath, setListPath] = useStateWithStorage(
+		'tcl-shopping-list-path',
+		null,
+	);
+
+	// const listPath = 't4XIww03JAXm1QWr6UPEebbLRl13/first list';
+
+	const handleTextChange = (event) => {
+		setItemName(event.target.value);
+	};
+
+	const handleChange = (event) => {
+		const numberOfDays = parseInt(event.target.value);
+		setDaysUntilNextPurchase(numberOfDays);
+	};
+
+	const handleSubmit = useCallback(
+		async (event) => {
+			event.preventDefault();
+			if (itemName === '') {
+				alert('Please add an item name.');
+				return;
+			}
+			if (!daysUntilNextPurchase) {
+				alert('Please select an option for date');
+				return;
+			}
+
+			try {
+				await addItem(listPath, {
+					itemName,
+					daysUntilNextPurchase,
+				});
+				alert(
+					'Item was added to the database!',
+					itemName,
+					daysUntilNextPurchase,
+				);
+			} catch (error) {
+				alert(`Item was not added to the database, Error: ${error.message}`);
+			}
+		},
+		[itemName, daysUntilNextPurchase, listPath],
+	);
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<div>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="item-name">
+					Item Name:
+					<br />
+					<input
+						type="text"
+						defaultValue=""
+						id="item-name"
+						onChange={handleTextChange}
+						value={itemName}
+					/>
+				</label>
+
+				<br />
+				<label>
+					<input
+						type="radio"
+						value={soonDate}
+						checked={daysUntilNextPurchase === soonDate}
+						onChange={handleChange}
+					/>
+					Soon
+				</label>
+				<br />
+				<label>
+					<input
+						type="radio"
+						value={kindOfSoonDate}
+						checked={daysUntilNextPurchase === kindOfSoonDate}
+						onChange={handleChange}
+					/>
+					Kind of soon
+				</label>
+				<br />
+				<label>
+					<input
+						type="radio"
+						value={notSoonDate}
+						checked={daysUntilNextPurchase === notSoonDate}
+						onChange={handleChange}
+					/>
+					Not soon
+				</label>
+				<br />
+				<button type="submit">Submit</button>
+			</form>
+		</div>
 	);
 }