Merge pull request #21 from the-collab-lab/rt-el-add-new-item

Rt el add new item

package.json

@@ -45,5 +45,13 @@
 			"prettier --cache --write"
 		],
 		"*.{html,json,css,scss,md}": "prettier --cache --write"
-	}
+	},
+	"version": "1.0.0",
+	"description": "This README file explains The Collab Lab’s smart shopping list project and provides instructions for developing it locally.",
+	"main": "vite.config.js",
+	"directories": {
+		"test": "tests"
+	},
+	"author": "",
+	"license": "ISC"
 }

src/App.jsx

@@ -56,7 +56,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

@@ -1,4 +1,5 @@
 import {
+	addDoc,
 	arrayUnion,
 	getDoc,
 	setDoc,
@@ -162,18 +163,22 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
  * @param {number} itemData.daysUntilNextPurchase The number of days until the user thinks they'll need to buy the item again.
  */
 export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
-	const listCollectionRef = collection(db, listPath, 'items');
+	const listCollectionRef = await 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, {
-		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!
-		dateLastPurchased: null,
-		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
-		name: itemName,
-		totalPurchases: 0,
-	});
+	try {
+		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!
+			dateLastPurchased: null,
+			dateNextPurchased: getFutureDate(daysUntilNextPurchase),
+			name: itemName,
+			totalPurchases: 0,
+		});
+	} catch (error) {
+		console.log(error);
+	}
 }
 
 export async function updateItem() {

src/views/ManageList.jsx

@@ -1,7 +1,79 @@
-export function ManageList() {
+import { useState } from 'react';
+import { addItem } from '../api';
+
+export function ManageList({ listPath }) {
+	const [formData, setFormData] = useState({
+		name: '',
+		nextPurchase: 0,
+	});
+	const [message, setMessage] = useState('');
+
+	const handleChange = (e) => {
+		const { name, value } = e.target;
+		setFormData((prevFormData) => {
+			return {
+				...prevFormData,
+				[name]: value,
+			};
+		});
+	};
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		const { name, nextPurchase } = formData;
+
+		if (!name || !nextPurchase) {
+			setMessage('Please fill out all fields');
+			return;
+		}
+		try {
+			await addItem(listPath, {
+				itemName: name,
+				daysUntilNextPurchase: nextPurchase,
+			});
+			setMessage(`${name} has been successfully added to the list`);
+			setFormData({
+				name: '',
+				nextPurchase: 0,
+			});
+		} catch (error) {
+			console.log('Failed to add the item: ', error);
+			setMessage('Failed to add the item to the list.');
+		}
+	};
+
 	return (
-		<p>
-			Hello from the <code>/manage-list</code> page!
-		</p>
+		<>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="name">Item name</label>
+				<input
+					id="name"
+					type="text"
+					placeholder="Item"
+					value={formData.name}
+					onChange={handleChange}
+					name="name"
+					required
+				/>
+				<br />
+
+				<label htmlFor="nextPurchase">When is your next purchase</label>
+				<select
+					name="nextPurchase"
+					id="nextPurchase"
+					onChange={handleChange}
+					value={formData.nextPurchase}
+				>
+					<option value="">---</option>
+					<option value={7}>Soon</option>
+					<option value={14}>Kind of soon</option>
+					<option value={30}>Not soon</option>
+				</select>
+
+				<p>{message}</p>
+
+				<button>Add Item</button>
+			</form>
+		</>
 	);
 }