Merge pull request #21 from the-collab-lab/vi_ce_form_list

Create a new list

src/App.jsx

@@ -45,12 +45,19 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
-				<Route path="/" element={<Layout />}>
+				<Route path="/" element={<Layout listPath={listPath} />}>
 					<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="/list/:path/:path" element={<List data={data} />} />
 					<Route
 						path="/manage-list"
 						element={<ManageList listPath={listPath} />}

src/api/firebase.js

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

src/components/ListForm.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { createList } from '../api';
+import { useNavigate } from 'react-router-dom';
+
+const ListForm = (props) => {
+	const { setMessage, setListPath, userId, userEmail } = props;
+	const [newList, setNewList] = useState('');
+	const navigate = useNavigate();
+
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (newList.trim().length === 0) {
+			setMessage('Please type a list name :)');
+			setNewList('');
+			return;
+		}
+
+		try {
+			const response = await createList(userId, userEmail, newList);
+			if (response) {
+				setListPath(
+					`${response._key.path.segments[0]}/${response._key.path.segments[1]}`,
+				);
+				navigate(
+					`/list/${response._key.path.segments[0]}/${response._key.path.segments[1]}`,
+				);
+			}
+		} catch (error) {
+			if (error) {
+				setMessage('There was an error creating the list');
+			}
+		}
+		setNewList('');
+	};
+
+	const handleInputChange = (event) => {
+		const data = event.target.value;
+		setNewList(data);
+		setMessage(null);
+	};
+	const handleKeyPressed = (event) => {
+		if (event.key === 'Enter') {
+			handleSubmit();
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<label htmlFor="new list name">Name new list</label>
+			<input
+				type="text"
+				id="new list name"
+				value={newList}
+				onChange={(event) => handleInputChange(event)}
+				onClick={(event) => handleKeyPressed(event)}
+			/>
+			<button type="submit">Create list</button>
+		</form>
+	);
+};
+
+export default ListForm;

src/components/SingleList.jsx

@@ -1,8 +1,11 @@
+import { useNavigate } from 'react-router-dom';
 import './SingleList.css';
 
 export function SingleList({ name, path, setListPath }) {
+	const navigate = useNavigate();
 	function handleClick() {
 		setListPath(path);
+		navigate(`/list/${path}`);
 	}
 
 	return (

src/views/Home.jsx

@@ -1,12 +1,23 @@
 import './Home.css';
 import { SingleList } from '../components';
+import { useState } from 'react';
+import ListForm from '../components/ListForm';
+
+export function Home({ data, setListPath, userId, userEmail }) {
+	const [message, setMessage] = useState(null);
 
-export function Home({ data, setListPath }) {
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
+			<ListForm
+				setMessage={setMessage}
+				setListPath={setListPath}
+				userId={userId}
+				userEmail={userEmail}
+			/>
+			<span> {message ? <p> {message} </p> : <></>} </span>
 			<ul>
 				{data.map((list, i) => (
 					<SingleList

src/views/Layout.jsx

@@ -4,7 +4,7 @@ import './Layout.css';
 import { auth } from '../api/config.js';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
 
-export function Layout() {
+export function Layout({ listPath }) {
 	const { user } = useAuth();
 
 	return (
@@ -23,7 +23,7 @@ export function Layout() {
 						<NavLink to="/" className="Nav-link">
 							Home
 						</NavLink>
-						<NavLink to="/list" className="Nav-link">
+						<NavLink to={`/list/${listPath}`} className="Nav-link">
 							List
 						</NavLink>
 						<NavLink to="/manage-list" className="Nav-link">