From 5fc3dd0cd18e78707c94313ee707ea6658312100 Mon Sep 17 00:00:00 2001
From: vivitt <viviviyanez@gmail.com>
Date: Fri, 5 Apr 2024 15:08:36 +0200
Subject: [PATCH] Set focus on ManageList buttons

- Add an optional parameter in the managelist route to use it to
programatically set focus on the inputs when users navigate to it
using the buttons in the List view.

- Remove selected property in the Select input first's option to
avoid console warning
---
 src/App.jsx                    |  2 +-
 src/api/firebase.js            |  8 +++++++-
 src/components/ListButtons.jsx |  4 ++--
 src/views/ManageList.jsx       | 24 ++++++++++++++++++++++--
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index bdfe690..e212802 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -79,7 +79,7 @@ export function App() {
 						}
 					/>
 					<Route
-						path="/manage-list"
+						path="/manage-list?/:param"
 						element={
 							<ManageList
 								data={data}
diff --git a/src/api/firebase.js b/src/api/firebase.js
index 916a7db..4bc5dd4 100644
--- a/src/api/firebase.js
+++ b/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
diff --git a/src/components/ListButtons.jsx b/src/components/ListButtons.jsx
index b4c6981..6ff5d4a 100644
--- a/src/components/ListButtons.jsx
+++ b/src/components/ListButtons.jsx
@@ -13,7 +13,7 @@ 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>
 
@@ -21,7 +21,7 @@ const ListButtons = (props) => {
 			</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>
 
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 3e6f43f..73e7873 100644
--- a/src/views/ManageList.jsx
+++ b/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,6 +8,12 @@ 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('');
@@ -15,6 +21,18 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 	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={() => {