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>
  );
 }