handle create list button

src/views/Home.jsx

@@ -1,7 +1,27 @@
 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 navigate = useNavigate(); //to call redirected to the List view
+
+	const handleCreateListButton = async (e) => {
+		e.preventDefault();
+
+		try {
+			await createList(userId, userEmail, listName);
+
+			const createListPath = `${userId}/${listName}}`;
+			setListPath(createListPath);
+			navigate('/list'); //redirect to the list view
+		} catch (error) {
+			console.error('error creating a list', error);
+		}
+	};
 
-export function Home({ data, setListPath }) {
 	return (
 		<div className="Home">
 			<p>
@@ -17,6 +37,7 @@ export function Home({ data, setListPath }) {
 					/>
 				))}
 			</ul>
+			<form onSubmit={handleCreateListButton}></form>
 		</div>
 	);
 }