Merge pull request #21 from the-collab-lab/jo-hm-createList

package.json

@@ -10,6 +10,7 @@
  "firebase": "^10.12.5",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
+ "react-hot-toast": "^2.4.1",
  "react-router-dom": "^6.26.0"
  },
  "devDependencies": {

src/App.jsx

@@ -46,7 +46,9 @@ export function App() {
  <Route path="/" element={<Layout />}>
  <Route
  index
- element={<Home data={lists} setListPath={setListPath} />}
+ element={
+ <Home user={user} data={lists} setListPath={setListPath} />
+ }
  />
  <Route path="/list" element={<List data={data} />} />
  <Route path="/manage-list" element={<ManageList />} />

src/api/firebase.js

@@ -127,6 +127,8 @@ export async function createList(userId, userEmail, listName) {
  updateDoc(userDocumentRef, {
  sharedLists: arrayUnion(listDocRef),
  });
+
+ return listDocRef.path;
 }
 
 /**

src/components/CreateShoppingList.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { createList } from '../api/firebase';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+
+export default function CreateShoppingList({ user, setListPath }) {
+ const [listName, setListName] = useState('');
+ const userId = user?.uid;
+ const userEmail = user?.email;
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ try {
+ const listPath = await createList(userId, userEmail, listName);
+ setListPath(listPath);
+ toast.success('List created successfully!');
+ navigate('/list');
+ } catch (error) {
+ toast.error('List creation failed. Please try again');
+ }
+ };
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <label htmlFor="shoppingList">Enter Shopping List name:</label>
+ <input
+ id="shoppingList"
+ type="text"
+ value={listName}
+ onChange={(e) => setListName(e.target.value)}
+ required
+ />
+ <button type="submit">Create Shopping List</button>
+ </form>
+ );
+}

src/views/Home.jsx

@@ -1,14 +1,16 @@
 import { SingleList } from '../components';
 import './Home.css';
+import CreateShoppingList from '../components/CreateShoppingList';
 
-export function Home({ data, setListPath }) {
+export function Home({ user, data, setListPath }) {
+ //console.log(user)
  return (
  <div className="Home">
  <p>
  Hello from the home (<code>/</code>) page!
  </p>
  <ul>
- {data.map((item, index) => (
+ {data?.map((item, index) => (
  <SingleList
  key={index}
  name={item.name}
@@ -17,6 +19,7 @@ export function Home({ data, setListPath }) {
  />
  ))}
  </ul>
+ <CreateShoppingList user={user} setListPath={setListPath} />
  </div>
  );
 }

src/views/Layout.jsx

@@ -5,6 +5,7 @@ import './Layout.css';
 import { useAuth } from '../api';
 import { SignInButton, SignOutButton } from '../api/useAuth';
 import { NavLink } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -46,6 +47,7 @@ export function Layout() {
  </NavLink>
  </div>
  </nav>
+ <Toaster />
  </div>
  </>
  );