Merge pull request #22 from the-collab-lab/mp-sm-create-new-shopping-…

…list

create new shopping list

src/api/firebase.js

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

src/views/Home.jsx

@@ -1,6 +1,37 @@
 import './Home.css';
 import { SingleList } from '../components';
+import { useState } from 'react';
+import { createList, useAuth } from '../api';
+import { useNavigate } from 'react-router-dom';
+
 export function Home({ data, setListPath }) {
+	const [listName, setListName] = useState('');
+	const [error, setError] = useState('');
+	const { user } = useAuth();
+	const userId = user?.uid;
+	const userEmail = user?.email;
+	const navigate = useNavigate();
+
+	async function handleSubmit(e) {
+		e.preventDefault();
+
+		try {
+			if (!listName || !listName.trim()) {
+				throw new Error('Empty field, please enter a valid name');
+			}
+			const result = await createList(userId, userEmail, listName);
+			setListPath(result);
+			navigate('/list');
+
+			setTimeout(() => {
+				alert('List saved to database');
+			}, 100);
+		} catch (err) {
+			setError(err.message);
+			console.log(error);
+		}
+	}
+
 	return (
 		<div className="Home">
 			<p>
@@ -10,15 +41,28 @@ export function Home({ data, setListPath }) {
 				{data &&
 					data.map((list) => {
 						return (
-							<SingleList
-								key={crypto.randomUUID()}
-								name={list.name}
-								setListPath={setListPath}
-								path={list.path}
-							/>
+							<>
+								<SingleList
+									key={crypto.randomUUID()}
+									name={list.name}
+									setListPath={setListPath}
+									path={list.path}
+								/>
+							</>
 						);
 					})}
 			</ul>
+			<form action="" onSubmit={handleSubmit}>
+				<label htmlFor="listName">Enter List Name:</label>
+				<input
+					type="text"
+					id="listName"
+					value={listName}
+					onChange={(e) => setListName(e.target.value)}
+				/>
+				<button>Submit</button>
+				<p>{error}</p>
+			</form>
 		</div>
 	);
 }

src/views/Layout.jsx

@@ -1,5 +1,4 @@
-import { Outlet } from 'react-router-dom';
-import { NavLink } from 'react-router-dom';
+import { Outlet, NavLink } from 'react-router-dom';
 
 import './Layout.css';
 import { useAuth, SignInButton, SignOutButton } from '../api';