Merge pull request #20 from the-collab-lab/dc-tc-new-shopping-list

creating a new shopping list

src/App.jsx

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

src/views/Home.css

@@ -0,0 +1,10 @@
+form {
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+}
+#listName,
+.button {
+	padding: 4% 4%;
+	margin: 2% 2%;
+}

src/views/Home.jsx

@@ -1,7 +1,35 @@
 import './Home.css';
 import { SingleList } from '../components';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createList } from '../api/firebase';
+
+export function Home({ data, setListPath, userId, userEmail }) {
+	const [listName, setListName] = useState('');
+	const [message, setMessage] = useState('');
+	const navigate = useNavigate(); //to call redirected to the List view
+
+	const handleCreateListButton = async (e) => {
+		e.preventDefault();
+		if (!listName) {
+			setMessage('Enter a list name');
+			return;
+		}
+
+		try {
+			await createList(userId, userEmail, listName);
+			setMessage('New list successfully created');
+
+			const createListPath = `${userId}/${listName}}`;
+			setListPath(createListPath);
+			navigate('/list'); //redirect to the list view
+		} catch (error) {
+			//Logging and error messages if list is not created
+			console.error('error creating a list', error);
+			setMessage('Failed to create list. Please try again!');
+		}
+	};
 
-export function Home({ data, setListPath }) {
 	return (
 		<div className="Home">
 			<p>
@@ -17,6 +45,21 @@ export function Home({ data, setListPath }) {
 					/>
 				))}
 			</ul>
+
+			<form onSubmit={handleCreateListButton}>
+				<label htmlFor="listName">List Name:</label>
+				<input
+					type="text"
+					id="listName"
+					value={listName}
+					onChange={(e) => setListName(e.target.value)}
+					placeholder="Enter the name of your new list"
+				/>
+				<button type="submit" className="button">
+					Create list
+				</button>
+				{message}
+			</form>
 		</div>
 	);
 }