Add checks to new item input (#30)

* Added item name validation before adding to database * Small refactor of handleItemSubmit * Update src/views/ManageList.jsx Moved if clause Co-authored-by: Raynaldo Sutisna <[email protected]> --------- Co-authored-by: andiedoescode <[email protected]> Co-authored-by: Andrea Pang <[email protected]> Co-authored-by: Raynaldo Sutisna <[email protected]>
the-collab-lab · Mar 10, 2024 · 7bf44b2 · 7bf44b2
1 parent 166fd84
commit 7bf44b2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -61,7 +61,9 @@ export function App() {
 					/>
 					<Route
 						path="/manage-list"
-						element={<ManageList listPath={listPath} userId={userId} />}
+						element={
+							<ManageList listPath={listPath} userId={userId} data={data} />
+						}
 					/>
 				</Route>
 			</Routes>

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { addItem } from '../api';
 import { shareList } from '../api/firebase.js';
 
-export function ManageList({ listPath, userId }) {
+export function ManageList({ listPath, userId, data }) {
 	const initialItemFormState = {
 		itemName: '',
 		daysUntilNextPurchase: 0,
@@ -17,9 +17,33 @@ export function ManageList({ listPath, userId }) {
 		setShareEmail(target.value);
 	};
 
+	const currentList = data.map((item) => {
+		return item.name
+			.toLowerCase()
+			.replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~/\s]/g, '');
+	});
+
 	const handleItemSubmit = async (event) => {
 		newItem.daysUntilNextPurchase = Number(newItem.daysUntilNextPurchase);
 		event.preventDefault();
+
+		if (!newItem.itemName) {
+			alert('Please enter an item name');
+			return;
+		}
+
+		//edge case: what if someone decides to put only puncutation as item name
+		const itemName = newItem.itemName
+			.toLowerCase()
+			.replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~/\s]/g, '');
+		console.log('itemName:', itemName);
+
+		if (currentList.includes(itemName)) {
+			alert('This item already exists in the list.');
+			return;
+		}
+
+		//Compare new item name to current list in database
 		try {
 			await addItem(listPath, newItem);
 			alert('Item successfully added!');