Show error messages for adding empty or duplicate items

src/App.jsx

@@ -56,7 +56,7 @@ export function App() {
 					/>
 					<Route
 						path="/manage-list"
-						element={<ManageList listPath={listPath} user={user} />}
+						element={<ManageList listPath={listPath} user={user} data={data} />}
 					/>
 				</Route>
 			</Routes>

src/components/ListItem.jsx

@@ -13,7 +13,7 @@ export function ListItem({ name, listPath, id, isChecked, datePurchased }) {
 
 	useEffect(() => {
 		const today = new Date().getTime();
-		const datePurchasedInMillis = datePurchased.toMillis();
+		const datePurchasedInMillis = datePurchased?.toMillis();
 
 		if (isChecked && today - datePurchasedInMillis >= ONE_DAY_IN_MILLISECONDS) {
 			updateItem(listPath, id, !isChecked);

src/components/ManageListForms/AddItemForm.jsx

@@ -1,19 +1,32 @@
 import { useState } from 'react';
 import { addItem } from '../../api/firebase';
+import toast from 'react-hot-toast';
 
-export default function AddItemForm({ listPath }) {
+export default function AddItemForm({ listPath, data }) {
 	const [formData, setFormData] = useState({
 		itemName: '',
 		daysUntilNextPurchase: '',
 	});
 
 	const handleSubmit = async (event) => {
+		event.preventDefault();
+
+		const formattedItemName = formData.itemName
+			.toLowerCase()
+			.replace(/[^a-z]/g, '');
+
+		const match = data.find((item) => item.name === formattedItemName);
+
 		try {
-			event.preventDefault();
-			await addItem(listPath, formData);
-			alert(`${formData.itemName} was added to the list successfully`);
+			if (!match) {
+				await addItem(listPath, { ...formData, itemName: formattedItemName });
+				toast.success(`${formattedItemName} was added to your list`);
+			} else {
+				toast.error(`${formattedItemName} is already on your list`);
+				return;
+			}
 		} catch (error) {
-			alert(`There was a problem adding ${formData.itemName} to the list`);
+			toast.error(`Failed to add ${formattedItemName}`);
 		}
 	};
 

src/views/ManageList.jsx

@@ -1,10 +1,10 @@
 import AddItemForm from '../components/ManageListForms/AddItemForm';
 import ShareListForm from '../components/ManageListForms/ShareListForm';
 
-export function ManageList({ listPath, user }) {
+export function ManageList({ listPath, user, data }) {
 	return (
 		<div>
-			<AddItemForm listPath={listPath} />
+			<AddItemForm listPath={listPath} data={data} />
 			<ShareListForm listPath={listPath} user={user} />
 		</div>
 	);