From 293f9bf932d568146feccbdaf535f9f7bbb878b7 Mon Sep 17 00:00:00 2001
From: Huda Mabkhoot <hudamabkhoot@gmail.com>
Date: Sat, 12 Oct 2024 18:04:36 +0300
Subject: [PATCH] fin al chnages and fixing the issue of listName being null

---
 src/App.jsx                                   |  2 +-
 src/components/ListItem.jsx                   | 68 +++++++++----------
 .../ManageListForms/EditItemForm.jsx          | 41 +++++------
 src/components/ui/dialog.jsx                  |  2 +-
 4 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 3853b0c..982d3d7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,7 +21,7 @@ export function App() {
 		null,
 	);
 
-	const listName = listPath.split('/').pop();
+	const listName = listPath ? listPath.split('/').pop() : null;
 
 	/**
 	 * This custom hook holds info about the current signed in user.
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index daf3ec1..cddd20e 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -94,7 +94,7 @@ export function ListItem({
 				>
 					<label
 						htmlFor={`${id}`}
-						className="capitalize text-sm hover:font-bold sm:text-lg"
+						className="capitalize text-sm sm:text-base md:text-lg hover:font-bold text-gray-800 dark:text-gray-300"
 					>
 						{name}
 					</label>
@@ -105,7 +105,7 @@ export function ListItem({
 					</div>
 				)}
 			</div>
-			<div className="flex items-center gap-1 sm:gap-2">
+			<div className="flex items-center gap-3">
 				<div
 					className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
 				>
@@ -113,68 +113,68 @@ export function ListItem({
 						{indicator}
 					</p>
 				</div>
-				<div className="flex items-center p-2">
+				<div className="flex gap-3 px-1">
+					<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
+						<DialogTrigger asChild>
+							<Button className="bg-transparent hover:bg-transparent p-0">
+								<Pencil className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Edit {name}</DialogTitle>
+								<DialogDescription className="text-md md:text-lg">
+									Modify the details of the item you&apos;d like to edit.
+								</DialogDescription>
+							</DialogHeader>
+							<EditItemForm
+								listPath={listPath}
+								name={name}
+								id={id}
+								quantity={quantity}
+								dateNextPurchased={dateNextPurchased}
+								handleOpenModal={handleOpenModal}
+							/>
+							<DialogFooter className="sm:justify-start"></DialogFooter>
+						</DialogContent>
+					</Dialog>
 					<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
 						<AlertDialogTrigger asChild>
 							<Button
-								className="bg-transparent hover:bg-transparent"
+								className="bg-transparent hover:bg-transparent p-0"
 								type="button"
 								id={id}
 								onClick={() => setIsAlertOpen(true)}
 							>
-								<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 sm:w-6 sm:h-6 md:w-7 md:h-7" />
+								<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
 							</Button>
 						</AlertDialogTrigger>
 						<AlertDialogContent className="p-6 sm:p-10">
 							<AlertDialogHeader>
-								<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
+								<AlertDialogTitle className="text-sm text-slate-800 dark:text-slate-400 sm:text-lg">
 									Are you absolutely sure?
 								</AlertDialogTitle>
-								<AlertDialogDescription className="text-black">
+								<AlertDialogDescription className="text-slate-700">
 									This action cannot be undone. Do you really want to delete{' '}
 									{name}?
 								</AlertDialogDescription>
 							</AlertDialogHeader>
 							<AlertDialogFooter>
 								<AlertDialogCancel
-									className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
+									className="bg-white text-slate-700 hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
 									onClick={() => setIsAlertOpen(false)}
 								>
 									Cancel
 								</AlertDialogCancel>
 								<AlertDialogAction
-									className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
+									className="bg-primary-pink text-white hover:bg-opacity-75 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
 									onClick={handleDelete}
 								>
-									<Trash2 className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
+									Delete
 								</AlertDialogAction>
 							</AlertDialogFooter>
 						</AlertDialogContent>
 					</AlertDialog>
-					<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
-						<DialogTrigger asChild>
-							<Button className="bg-transparen hover:bg-transparen p-0">
-								<Pencil className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
-							</Button>
-						</DialogTrigger>
-						<DialogContent>
-							<DialogHeader>
-								<DialogTitle>Edit {name}</DialogTitle>
-								<DialogDescription>
-									Modify the details of the item you&apos;d like to edit.
-								</DialogDescription>
-							</DialogHeader>
-							<EditItemForm
-								listPath={listPath}
-								name={name}
-								id={id}
-								quantity={quantity}
-								dateNextPurchased={dateNextPurchased}
-								handleOpenModal={handleOpenModal}
-							/>
-							<DialogFooter className="sm:justify-start"></DialogFooter>
-						</DialogContent>
-					</Dialog>
 				</div>
 			</div>
 		</li>
diff --git a/src/components/ManageListForms/EditItemForm.jsx b/src/components/ManageListForms/EditItemForm.jsx
index 462c2d9..c51fe3e 100644
--- a/src/components/ManageListForms/EditItemForm.jsx
+++ b/src/components/ManageListForms/EditItemForm.jsx
@@ -26,7 +26,7 @@ export default function EditItemForm({
 			itemQuantity: quantity,
 			daysUntilNextPurchase: dateNextPurchased,
 		});
-	}, [name]);
+	}, []);
 
 	const handleSubmit = async (event) => {
 		event.preventDefault();
@@ -45,31 +45,32 @@ export default function EditItemForm({
 			resetItemName();
 			return;
 		}
-
+		// check if any of the values have been edited
 		const hasChanged =
 			formattedItemName !== name ||
 			formQuantity !== quantity ||
 			newDateNextPurchased !== dateNextPurchased;
+
+		// if no changes were made exit early
 		if (!hasChanged) {
 			toast.error('No changes were made.');
 			handleOpenModal();
 			return;
 		}
 
-		try {
-			let updatedData = {
-				itemName: formattedItemName,
-				itemQuantity: formQuantity,
-			};
+		let updatedData = {
+			itemName: formattedItemName,
+			itemQuantity: formQuantity,
+		};
+		// check if dateNextPurchased have been edited to use getFutureDate if not use the same date
+		if (newDateNextPurchased !== dateNextPurchased) {
+			const futureDate = parseInt(newDateNextPurchased);
+			updatedData.dateNextPurchased = getFutureDate(futureDate);
+		} else {
+			updatedData.dateNextPurchased = dateNextPurchased;
+		}
 
-			if (newDateNextPurchased !== dateNextPurchased) {
-				const futureDate = parseInt(newDateNextPurchased);
-				const formattedFutureDate = getFutureDate(futureDate);
-				updatedData.dateNextPurchased = formattedFutureDate;
-			} else {
-				updatedData.dateNextPurchased = dateNextPurchased;
-			}
-			console.log();
+		try {
 			handleOpenModal();
 			await editItem(listPath, id, updatedData);
 			toast.success(`${formattedItemName} has been updated!`);
@@ -118,18 +119,18 @@ export default function EditItemForm({
 					className="flex my-2 items-center justify-center gap-4"
 					id="daysUntilNextPurchase"
 				>
-					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
 						<RadioGroupItem
 							value="7"
 							id="soon"
 							name="timeFrame"
-							className="border  border-soon text-soon"
+							className="border border-soon text-soon"
 						/>
 						<label htmlFor="soon" className="font-semibold text-sm">
 							Soon
 						</label>
 					</div>
-					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
 						<RadioGroupItem
 							value="14"
 							id="kind-of-soon"
@@ -140,7 +141,7 @@ export default function EditItemForm({
 							Kind of soon
 						</label>
 					</div>
-					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
 						<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
 						<label htmlFor="not of soon" className="font-semibold text-sm">
 							Not soon
@@ -170,7 +171,7 @@ export default function EditItemForm({
 					type="submit"
 					className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
 				>
-					Edit Item
+					Apply Changes
 				</Button>
 			</div>
 		</form>
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index 8154999..386a3a0 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -16,7 +16,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-xl',
+			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 			className,
 		)}
 		{...props}