From c9ec674b6d76652086bbeb3fa1ad35c7d8f13f4d Mon Sep 17 00:00:00 2001
From: eonflower <eonflower.dev@gmail.com>
Date: Wed, 3 Apr 2024 18:12:59 -0700
Subject: [PATCH] updated confirm message, fixed ghost toast when sharing,
 added unshare toast

---
 src/components/AddList.jsx              |  2 +-
 src/components/ConfirmToast.jsx         | 41 +++++-----
 src/components/InviteForm.jsx           | 20 ++++-
 src/components/NavigationBarAddList.jsx |  2 +-
 src/components/SharedWithList.jsx       | 99 ++++++++++++++-----------
 src/components/SingleList.jsx           |  9 ++-
 6 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/src/components/AddList.jsx b/src/components/AddList.jsx
index 57c6f86..455fac9 100644
--- a/src/components/AddList.jsx
+++ b/src/components/AddList.jsx
@@ -40,7 +40,7 @@ export default function AddList({ setListPath }) {
 				setListPath(listPath);
 				setTimeout(() => {
 					navigate('/list');
-				}, 2000);
+				}, 3000);
 			} else {
 				addToast({
 					id: 'problemCreatingList',
diff --git a/src/components/ConfirmToast.jsx b/src/components/ConfirmToast.jsx
index 6a30ae2..8a45823 100644
--- a/src/components/ConfirmToast.jsx
+++ b/src/components/ConfirmToast.jsx
@@ -9,10 +9,10 @@ const ConfirmToast = ({
 	onCancel,
 }) => {
 	return (
-		<div className="fixed inset-0 flex items-center justify-center z-50">
+		<div className="fixed inset-0 flex items-center justify-center z-50 backdrop-brightness-50">
 			<div
 				id={id}
-				className={`w-full max-w-xs p-4 mb-3 text-gray-500 bg-white rounded-lg shadow-xl border border-gray-100`}
+				className={`w-full max-w-md  my-2 py-8 px-4 mb-3 text-gray-500 bg-white rounded-lg shadow-xl border border-gray-100`}
 				role="alert"
 			>
 				<div className="flex items-center">
@@ -23,29 +23,26 @@ const ConfirmToast = ({
 						<span className="sr-only">{iconName} icon</span>
 					</div>
 					<div className="ms-3 text-sm font-normal">
-						<span className="mb-1 text-sm font-semibold text-gray-900">
+						<span className="text-sm font-semibold text-gray-900">
 							{message}
 						</span>
-						<div className="mb-2 text-sm font-normal">
-							Are you sure? This action is forever-eva-eva.
+						<div className="my-2 text-sm font-normal">
+							This action is forever-eva-eva.
 						</div>
-						<div className="grid grid-cols-2 gap-2">
-							<div>
-								<button
-									onClick={onConfirm}
-									className={`inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300`}
-								>
-									Delete
-								</button>
-							</div>
-							<div>
-								<button
-									onClick={onCancel}
-									className={`inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200`}
-								>
-									Cancel
-								</button>
-							</div>
+						<div className="mt-[20px] flex w-full">
+							<button
+								type="button"
+								onClick={onCancel}
+								className="mr-[10px] w-full border-1 border-gray-200 rounded-md px-4 py-[12px]"
+							>
+								Cancel
+							</button>
+							<button
+								onClick={onConfirm}
+								className="rounded-md w-full px-4 py-[12px] text-white bg-red-700"
+							>
+								Delete
+							</button>
 						</div>
 					</div>
 				</div>
diff --git a/src/components/InviteForm.jsx b/src/components/InviteForm.jsx
index 1cea4f0..bcb30f9 100644
--- a/src/components/InviteForm.jsx
+++ b/src/components/InviteForm.jsx
@@ -44,13 +44,25 @@ const InviteForm = ({ lists, closeModal, setUsersSharedWith, sharedWith }) => {
 					iconName: 'check',
 					color: 'blue',
 				});
-				// alert(message);
-				setInput('');
+
+				setInput({
+					recipientName: '',
+					recipientEmail: '',
+				});
+				setSelectedLists({
+					listsToShare: [],
+				});
+
 				// Wait for the sharing operation to complete successfully
 				const updatedSharedWith = [...sharedWith, input];
 				setUsersSharedWith(updatedSharedWith);
-				closeModal();
-				window.location.reload();
+
+				// Close modal after 3 seconds
+				setTimeout(() => {
+					window.location.reload();
+					closeModal();
+				}, 3000);
+
 				return;
 			}
 		} catch (err) {
diff --git a/src/components/NavigationBarAddList.jsx b/src/components/NavigationBarAddList.jsx
index 7aaadd6..375ce1c 100644
--- a/src/components/NavigationBarAddList.jsx
+++ b/src/components/NavigationBarAddList.jsx
@@ -23,7 +23,7 @@ export default function AddList({ setListPath }) {
 				setListPath(listPath);
 				setTimeout(() => {
 					navigate('/list');
-				}, 2000);
+				}, 3000);
 			} else {
 				setMessage(`Your list, ${listName} was not created. Please try again.`);
 			}
diff --git a/src/components/SharedWithList.jsx b/src/components/SharedWithList.jsx
index 83b8922..9fe6710 100644
--- a/src/components/SharedWithList.jsx
+++ b/src/components/SharedWithList.jsx
@@ -1,6 +1,10 @@
 import { FaRegCircleUser } from 'react-icons/fa6';
 import { VscTrash } from 'react-icons/vsc';
 import { unshareList } from '../api';
+import { useToast } from '../utils';
+import Toast from './Toast';
+import ConfirmToast from './ConfirmToast';
+import capitalizeFirstLetterOfEachWord from '../utils/capitalize';
 
 const SharedWithList = ({
 	listPath,
@@ -8,58 +12,69 @@ const SharedWithList = ({
 	closeModal,
 	setUsersSharedWith,
 }) => {
+	const { toasts, addConfirmToast, cancelConfirmToast } = useToast();
+
 	const handleUnshare = async (email, name) => {
 		try {
-			if (
-				window.confirm(
-					`Are you sure you want to unshare this list with ${name}?`,
-				)
-			) {
-				await unshareList(listPath, email, name);
-
-				// Remove the unshared user from the sharedWith array
-				const updatedSharedWith = sharedWith.filter(
-					(shared) => shared.email !== email,
-				);
-				setUsersSharedWith(updatedSharedWith);
+			const confirmationId = 'unshareListConfirm';
+			addConfirmToast({
+				id: confirmationId,
+				message: `Are you sure you want to unshare your list with ${capitalizeFirstLetterOfEachWord(name)}?`,
+				iconName: 'warning',
+				color: 'orange',
+				onConfirm: async () => {
+					await unshareList(listPath, email, name);
+					// Remove the unshared user from the sharedWith array
+					const updatedSharedWith = sharedWith.filter(
+						(shared) => shared.email !== email,
+					);
+					setUsersSharedWith(updatedSharedWith);
 
-				if (updatedSharedWith.length < 1) {
-					closeModal();
-				}
-			} else {
-				return;
-			}
+					if (updatedSharedWith.length < 1) {
+						closeModal();
+					}
+				},
+				onCancel: () => {
+					cancelConfirmToast(confirmationId);
+				},
+			});
 		} catch (err) {
 			console.error('Error unsharing list', err);
 		}
 	};
 	return (
-		<div className="flex flex-col items-center">
-			<h2 className="text-lg font-bold mt-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
-				Shared with:
-			</h2>
-			<div className="flex items-center">
-				<div>
-					<ul>
-						{sharedWith?.map((shared, index) => (
-							<li
-								key={index}
-								className="flex items-center gap-28 justify-between px-2 mb-4 h-16 bg-gray-50 rounded-lg shadow-md"
-							>
-								<span className="flex items-center xsm:text-xs sm:text-md">
-									<FaRegCircleUser className="text-lg mr-2 text-gray-600" />
-									{`${shared.name} (${shared.email})`}
-								</span>
-								<VscTrash
-									onClick={() => handleUnshare(shared.email, shared.name)}
-									className="text-xl ml-2 text-gray-600 cursor-pointer hover:text-gray-800 transition-colors duration-100 ease-in-out"
-								/>
-							</li>
-						))}
-					</ul>
+		<>
+			{toasts.map((toast) => (
+				<ConfirmToast key={toast.id} {...toast} />
+			))}
+
+			<div className="flex flex-col items-center max-h-[350px] overflow-scroll">
+				<h2 className="text-lg font-bold mt-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
+					Shared with:
+				</h2>
+				<div className="flex items-center">
+					<div>
+						<ul>
+							{sharedWith?.map((shared, index) => (
+								<li
+									key={index}
+									className="flex items-center gap-28 justify-between px-2 mb-4 h-16 bg-gray-50 rounded-lg shadow-md"
+								>
+									<span className="flex items-center xsm:text-xs sm:text-md">
+										<FaRegCircleUser className="text-lg mr-2 text-gray-600" />
+										{`${shared.name} (${shared.email})`}
+									</span>
+									<VscTrash
+										onClick={() => handleUnshare(shared.email, shared.name)}
+										className="text-xl ml-2 text-gray-600 cursor-pointer hover:text-gray-800 transition-colors duration-100 ease-in-out"
+									/>
+								</li>
+							))}
+						</ul>
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	);
 };
 
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index 2077691..88f7f2f 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -6,6 +6,7 @@ import { VscTrash } from 'react-icons/vsc';
 import { useToast } from '../utils/hooks';
 import Toast from './Toast';
 import ConfirmToast from './ConfirmToast.jsx';
+import capitalizeFirstLetterOfEachWord from '../utils/capitalize.js';
 
 export function SingleList({ name, path, setListPath, setLoading }) {
 	const navigate = useNavigate();
@@ -24,7 +25,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 				const confirmationId = 'deleteSharedListConfirm';
 				addConfirmToast({
 					id: confirmationId,
-					message: `The ${name} list has been shared with you. By pressing delete, you loose access until it's shared with you again.`,
+					message: `The ${capitalizeFirstLetterOfEachWord(name)} list has been shared with you. By pressing delete, you lose access until it's shared with you again.`,
 					iconName: 'warning',
 					color: 'orange',
 					onConfirm: async () => {
@@ -38,7 +39,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 				const confirmationId = 'deleteListConfirm';
 				addConfirmToast({
 					id: confirmationId,
-					message: `By pressing delete, your ${name} list will be removed from your lists, and everyone's who has access to it.`,
+					message: `By pressing delete, your ${capitalizeFirstLetterOfEachWord(name)} list will be removed from your lists, and everyone who has access to it.`,
 					iconName: 'warning',
 					color: 'orange',
 					onConfirm: async () => {
@@ -53,7 +54,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 			console.error(err.message);
 			addToast({
 				id: 'toastItemDeleteErr',
-				message: `An error occurred while deleting your ${name} list: ${err.message}`,
+				message: `An error occurred while deleting your ${capitalizeFirstLetterOfEachWord(name)} list: ${err.message}`,
 				iconName: 'error',
 				color: 'red',
 			});
@@ -90,4 +91,4 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 			</li>
 		</>
 	);
-}
\ No newline at end of file
+}