Implement Toast Notification

package.json

@@ -11,7 +11,8 @@
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.26.0"
+		"react-router-dom": "^6.26.0",
+		"react-toastify": "^10.0.5"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",

src/App.jsx

@@ -5,6 +5,7 @@ import { Home, Layout, List, ManageList } from './views';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
+import { ToastContainer } from 'react-toastify';
 
 export function App() {
 	/**
@@ -42,6 +43,16 @@ export function App() {
 
 	return (
 		<Router>
+			<ToastContainer
+				position="top-right"
+				autoClose={4000}
+				hideProgressBar={false}
+				newestOnTop={false}
+				closeOnClick
+				draggable
+				pauseOnHover
+				theme="dark"
+			/>
 			<Routes>
 				<Route path="/" element={<Layout />}>
 					<Route

src/components/AddItems.jsx

@@ -3,6 +3,8 @@ import { useStateWithStorage, normalizeItemName } from '../utils';
 import { addItem } from '../api';
 import TextInputElement from './TextInputElement';
 import RadioInputElement from './RadioInputElement';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const daysUntilPurchaseOptions = {
 	Soon: 7,
@@ -24,7 +26,7 @@ export function AddItems({ items }) {
 
 			try {
 				if (itemName.trim() === '') {
-					alert('Please add an item name.');
+					toast.error('Please add an item name.');
 					return;
 				}
 				// normalize the name by removing all punctuation and spaces to check if the normalized item is already in the list
@@ -35,19 +37,21 @@ export function AddItems({ items }) {
 						normalizeItemName(item.name),
 					);
 					if (currentItems.includes(normalizedItemName)) {
-						alert('This item already exists in the list');
+						toast.error('This item already exists in the list');
 						return;
 					}
 				}
 				await addItem(listPath, {
 					itemName,
 					daysUntilNextPurchase,
 				});
-				alert(
+				toast.success(
 					`${itemName} was added to the list! The next purchase date is set to ${daysUntilNextPurchase} days from now.`,
 				);
 			} catch (error) {
-				alert(`Item was not added to the database, Error: ${error.message}`);
+				toast.error(
+					`Item was not added to the database, Error: ${error.message}`,
+				);
 			} finally {
 				event.target.reset();
 			}

src/components/ListItem.jsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 import { calculateDateNextPurchased, ONE_DAY_IN_MILLISECONDS } from '../utils';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const currentDate = new Date();
 
@@ -39,7 +41,7 @@ export function ListItem({ item, listPath }) {
 
 				await updateItem(listPath, id, { ...updatedItem });
 			} catch (error) {
-				alert(`Item was not marked as purchased`, error.message);
+				toast.error(`Item was not marked as purchased`, error.message);
 			}
 		}
 	};
@@ -49,7 +51,7 @@ export function ListItem({ item, listPath }) {
 			try {
 				await deleteItem(listPath, id);
 			} catch (error) {
-				alert('Item was not deleted');
+				toast.error('Item was not deleted');
 			}
 		}
 		return;

src/components/ShareList.jsx

@@ -1,6 +1,8 @@
 import { shareList, useAuth } from '../api';
 import { useStateWithStorage } from '../utils';
 import TextInputElement from './TextInputElement';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export function ShareList() {
 	const [listPath] = useStateWithStorage('tcl-shopping-list-path', null);
@@ -13,11 +15,11 @@ export function ShareList() {
 		const listShared = await shareList(listPath, userId, emailData);
 
 		if (listShared === '!owner') {
-			alert('You cannot share the list you do not own.');
+			toast.error('You cannot share the list you do not own.');
 		} else if (listShared === 'shared') {
-			alert('List was shared with recipient.');
+			toast.success('List was shared with recipient.');
 		} else {
-			alert(
+			toast.error(
 				"The list was not shared because the recipient's email address does not exist in the system.",
 			);
 		}
@@ -29,7 +31,7 @@ export function ShareList() {
 		const emailData = event.target['email-input'].value;
 
 		if (userEmail === emailData) {
-			alert('You cannot share the list with yourself.');
+			toast.error('You cannot share the list with yourself.');
 		} else {
 			shareCurrentList(emailData);
 		}

src/hooks/useEnsureListPath.js

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 /*
  * This custom hook ensures that a user has a list path in localStorage.
@@ -13,7 +15,7 @@ export function useEnsureListPath() {
 	useEffect(() => {
 		const listPath = localStorage.getItem('tcl-shopping-list-path');
 		if (!listPath) {
-			alert(
+			toast.error(
 				'It seems like you landed here without first creating a list or selecting an existing one. Please select or create a new list first. Redirecting to Home.',
 			);
 			navigate('/');

src/views/Home.jsx

@@ -3,6 +3,8 @@ import { SingleList } from '../components';
 import { useNavigate } from 'react-router-dom';
 import { createList } from '../api';
 import TextInputElement from '../components/TextInputElement';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const navigate = useNavigate();
@@ -16,17 +18,20 @@ export function Home({ data, setListPath, userId, userEmail }) {
 
 		try {
 			if (currentLists.includes(listName.toLowerCase())) {
-				alert('The list already exists. Please enter a different name.');
+				toast.error(
+					'The list already exists. Please enter a different name.',
+					{},
+				);
 				return;
 			}
 
 			const listPath = await createList(userId, userEmail, listName);
 			setListPath(listPath);
-			alert('List added');
+			toast.success('List added');
 			navigate('/list');
 		} catch (err) {
 			console.error(err);
-			alert('List not created');
+			toast.error('List not created');
 		} finally {
 			event.target.reset();
 		}