Add addItem function import

src/App.jsx

@@ -53,7 +53,7 @@ export function App() {
 				<Route path="/" element={<Layout />}>
 					<Route index element={<Home />} />
 					<Route path="/list" element={<List data={data} />} />
-					<Route path="/add-item" element={<AddItem />} />
+					<Route path="/add-item" element={<AddItem listId={listToken} />} />
 				</Route>
 			</Routes>
 		</Router>

src/api/firebase.js

@@ -1,4 +1,4 @@
-import { collection, onSnapshot } from 'firebase/firestore';
+import { addDoc, collection, onSnapshot } from 'firebase/firestore';
 import { db } from './config';
 import { getFutureDate } from '../utils';
 
@@ -52,18 +52,21 @@ export function getItemData(snapshot) {
  * @param {number} itemData.daysUntilNextPurchase The number of days until the user thinks they'll need to buy the item again.
  */
 export async function addItem(listId, { itemName, daysUntilNextPurchase }) {
-	const listCollectionRef = collection(db, listId);
-	// 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 {
+		const listCollectionRef = collection(db, listId);
+		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) {
+		return false;
+	}
+	return true;
 }
 
 export async function updateItem() {

src/views/AddItem.jsx

@@ -1,3 +1,111 @@
-export function AddItem() {
-	return <p>Hello from the <code>/add-item</code> page!</p>
+import { useEffect, useState } from 'react';
+import { addItem } from '../api/firebase';
+
+export function AddItem({ listId }) {
+	const [timeframe, setTimeframe] = useState('7');
+	const [itemName, setItemName] = useState('');
+	const [message, setMessage] = useState(null);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setMessage(null);
+		}, 3000);
+
+		return () => clearTimeout(timer);
+	}, [message]);
+
+	const onTimeChange = (e) => setTimeframe(e.target.value);
+	const onItemChange = (e) => setItemName(e.target.value);
+	const onFormSubmit = async (e) => {
+		e.preventDefault();
+		// Make sure the user has entered an item name
+		if (!itemName) {
+			setMessage('Please enter an item name');
+			return;
+		}
+
+		const result = await addItem(listId, {
+			itemName,
+			daysUntilNextPurchase: timeframe,
+		});
+		if (result) {
+			setMessage(`Added ${itemName} to your list.`);
+			setItemName('');
+			setTimeframe('7');
+		} else {
+			setMessage('Error adding item, please try again.');
+		}
+	};
+
+	return (
+		<form onSubmit={onFormSubmit}>
+			<div
+				style={{
+					border: 'none',
+					padding: 0,
+					paddingBottom: '1.5rem',
+					display: 'flex',
+					flexDirection: 'column',
+				}}
+			>
+				<label htmlFor="itemName">Item name:</label>
+				<input
+					type="text"
+					id="itemName"
+					name="itemName"
+					value={itemName}
+					onChange={onItemChange}
+				></input>
+			</div>
+			<fieldset
+				style={{
+					border: 'none',
+					padding: 0,
+					display: 'grid',
+					gridTemplateColumns: '1fr 1fr',
+				}}
+			>
+				<legend
+					htmlFor="timeframe"
+					style={{ padding: 0, gridColumn: 'span 2' }}
+				>
+					How soon will you buy this again?
+				</legend>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value={7}
+					id="soon"
+					checked={timeframe === '7'}
+					onChange={onTimeChange}
+				/>
+
+				<label htmlFor="soon">Soon</label>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value={14}
+					id="kindOfSoon"
+					checked={timeframe === '14'}
+					onChange={onTimeChange}
+				/>
+
+				<label htmlFor="kindOfSoon">Kind of Soon</label>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value={30}
+					id="notSoon"
+					checked={timeframe === '30'}
+					onChange={onTimeChange}
+				/>
+				<label htmlFor="notSoon">Not Soon</label>
+			</fieldset>
+			<button type="submit">Add Item</button>
+			{message && <p>{message}</p>}
+		</form>
+	);
 }