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';
 
@@ -53,17 +53,18 @@ export function getItemData(snapshot) {
  */
 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, {
+	const data = 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((err) => {
+		console.error(err);
 	});
+	return data;
 }
 
 export async function updateItem() {

src/views/AddItem.jsx

@@ -1,3 +1,114 @@
-export function AddItem() {
-	return <p>Hello from the <code>/add-item</code> page!</p>
+import { useEffect, useState } from 'react';
+import { addItem } from '../api/firebase';
+
+const timeframeToDays = {
+	Soon: 7,
+	'Kind of Soon': 14,
+	'Not Soon': 30,
+};
+
+export function AddItem({ listId }) {
+	const [timeframe, setTimeframe] = useState('Soon');
+	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 = (e) => {
+		e.preventDefault();
+		// Make sure the user has entered an item name
+		if (!itemName) {
+			setMessage('Please enter an item name');
+			return;
+		}
+
+		const result = addItem(listId, {
+			itemName,
+			daysUntilNextPurchase: timeframeToDays[timeframe],
+		});
+		if (result) {
+			setMessage(`Added ${itemName} to your list.`);
+			setItemName('');
+			setTimeframe('Soon');
+		} else {
+			setMessage('Error adding item');
+		}
+	};
+
+	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',
+				}}
+			>
+				<label htmlFor="timeframe" style={{ gridColumn: 'span 2' }}>
+					How soon will you buy this again?
+				</label>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value="Soon"
+					id="soon"
+					checked={timeframe === 'Soon'}
+					onChange={onTimeChange}
+				/>
+
+				<label htmlFor="soon">Soon</label>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value="Kind of Soon"
+					id="kindOfSoon"
+					checked={timeframe === 'Kind of Soon'}
+					onChange={onTimeChange}
+				/>
+
+				<label htmlFor="kindOfSoon">Kind of Soon</label>
+
+				<input
+					type="radio"
+					name="timeframe"
+					value="Not Soon"
+					id="notSoon"
+					checked={timeframe === 'Not Soon'}
+					onChange={onTimeChange}
+				/>
+				<label htmlFor="notSoon">Not Soon</label>
+			</fieldset>
+			<button type="submit">Add Item</button>
+			{message && <p>{message}</p>}
+		</form>
+	);
 }