Add CreateShoppingList file to components folder

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 listDocRef = await createList(userId, userEmail, listName);
+			setListPath(listDocRef);
+			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>
 		</>
 	);