Set focus on the ManageList's inputs when users navigate to them using the List's buttons

src/App.jsx

@@ -79,7 +79,7 @@ export function App() {
 						}
 					/>
 					<Route
-						path="/manage-list"
+						path="/manage-list?/:param"
 						element={
 							<ManageList
 								data={data}

src/api/firebase.js

@@ -175,6 +175,10 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 	return { code: 'ok' };
 }
 
+const userIsListOwner = (id, path) => {
+	return path.includes(id);
+};
+
 /**
  * Delete a user's list only if the current user is the list owner.
  * @param {string} userId The id of the user who owns the list.
@@ -184,7 +188,7 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
  */
 export async function deleteList(userId, userEmail, listPath, listId) {
 	// Check if current user is owner.
-	if (!listPath.includes(userId)) {
+	if (!userIsListOwner(userId, listPath)) {
 		const usersCollectionRef = collection(db, 'users');
 		const userDocumentRef = doc(usersCollectionRef, userEmail);
 		const userSharedLists = (await getDoc(userDocumentRef)).data().sharedLists;
@@ -199,6 +203,8 @@ export async function deleteList(userId, userEmail, listPath, listId) {
 	// Delete list doc
 	const listCollectionRef = collection(db, userId);
 	const listDocumentRef = doc(listCollectionRef, listId);
+	const itemsCollectionRef = collection(listDocumentRef, 'items');
+	console.log(itemsCollectionRef);
 	await deleteDoc(listDocumentRef);
 
 	// Update users doc that include a list reference

src/components/ListButtons.jsx

@@ -13,15 +13,15 @@ const ListButtons = (props) => {
 		<div className="grid sm:grid-cols-3 grid-cols-2 gap-4 py-6 text-base sm:text-lg font-poppins">
 			<button
 				className={`sm:col-span-2  px-4 py-2 gap-6 shadow-lg ${buttonVariants[props.colorAdd]}`}
-				onClick={() => navigate('/manage-list')}
+				onClick={() => navigate('/manage-list/add')}
 			>
 				<i className="fa-solid fa-plus"></i>
 
 				<span>Add item</span>
 			</button>
 			<button
 				className={`sm:col-span-1  gap-6 shadow-lg ${buttonVariants[props.colorShare]}`}
-				onClick={() => navigate('/manage-list')}
+				onClick={() => navigate('/manage-list/share')}
 			>
 				<i className="fa-solid fa-share-nodes"></i>
 

src/views/ManageList.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { addItem } from '../api/firebase';
 import { shareList } from '../api/firebase';
 import ErrorMessage from '../components/ErrorMessage';
@@ -8,13 +8,31 @@ import {
 	inputHasOnlyNUmbers,
 	stringsHaveSameValue,
 } from '../utils/inputValidation';
+import { useParams } from 'react-router-dom';
+
+const Params = {
+	Add: 'add',
+	Share: 'share',
+};
 
 export function ManageList({ data, listPath, userId, userEmail }) {
 	const [addItemErrMessage, setAddItemErrMessage] = useState('');
 	const [shareListErrMessage, setShareListErrMessage] = useState('');
 	const [addItemMessage, setAddItemMessage] = useState('');
 	const [shareListMessage, setShareListMessage] = useState('');
 
+	const addItemInput = useRef(null);
+	const shareListInput = useRef(null);
+	const { param } = useParams();
+
+	useEffect(() => {
+		if (param === Params.Add) {
+			addItemInput.current.focus();
+		} else if (param === Params.Share) {
+			shareListInput.current.focus();
+		}
+	}, []);
+
 	let displayName;
 	for (let i = 0; i < listPath.length; i++) {
 		if (listPath[i] === '/') {
@@ -136,6 +154,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							type="text"
 							placeholder="Type a new item name"
 							name="item"
+							ref={addItemInput}
 							className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple mb-5"
 							onChange={() => {
 								setAddItemErrMessage('');
@@ -149,7 +168,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 								aria-label="When do you need this item?"
 								className="col-span-3 sm:col-span-2 bg-lightGrey text-base sm:text-lg border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 							>
-								<option value="none" selected disabled hidden>
+								<option value="none" disabled hidden>
 									Choose item's likely need date
 								</option>
 
@@ -189,6 +208,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							type="email"
 							name="email"
 							id="email"
+							ref={shareListInput}
 							placeholder="Share this list with another user"
 							className="col-span-3 sm:col-span-2 bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 							onChange={() => {