Issue # 10 Prevent user from adding duplicate or empty item to the list #34

eternalmaha · 2024-09-13T01:35:46Z

Description

Users shouldn't be able to add an empty item to their list, or add the same item twice. If they try to do this, we need to show them an error message that explains the problem. This way, we’ll prevent some clutter in their lists.

Related Issue

closes #10

Acceptance Criteria

Show an error message if the user tries to submit an empty item
Show an error message if the user tries to submit a new item that is identical to an existing name. For instance, if the list contains apples and the user adds apples.
Show an error message if the user tries to submit a new item that matches an existing name with punctuation and casing normalized. For instance, if the list contains apples and the user adds aPples or apples, or a pples.
The user’s original input is saved in the database

Type of Changes

enhancement

Updates

Issue.10.mov

Testing Steps / QA Criteria

Visit the preview URL for this PR
Navigate to ManageList view and add a new Item to the list.
Try to add an empty item, which should show an error message.
Try to add an item that is identical to an item that already exists in the list. This should show an error indicating that the item already exists in the list.
Try to add an item that is similar to an existing item with different casing and punctuation (e.g., if the list already contains Apples, try adding apples or aPples or a pples). This should show an error indicating that the item already exists in the list.

…added a toast error to notify user of empty item name

…ed for emptiness or punctuaction marks

…ed and add only original names to shopping list

…bmit function to return early if validationError is detected

github-actions · 2024-09-13T01:36:46Z

Visit the preview URL for this PR (updated for commit f823aeb):

https://tcl-77-smart-shopping-list--pr34-ma-fz-duplicate-or-e-7fmtso5p.web.app

_{(expires Sun, 22 Sep 2024 19:33:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

RossaMania · 2024-09-14T17:02:09Z

PRAISE: I LOVE how this feature uses the power OF regular expressions or "regex"! I love continuing the use of toasts, rather than using text error messages around the input field. I love that the toast error message is short and clear.

NITPICK: I wish the text field would go empty or go blank after receiving the error toast. Now I get the error message, but still have to delete the offending text from the input, before putting in a new item. At the same time though, the input field not being empty DEFINITELY shows that the duplicate item was not added to the list.

RossaMania

Last PRAISE: I like that there are code comments that explain "the why" throughout this in addition to specific variable names! Great job!

RossaMania · 2024-09-14T17:18:35Z

src/utils/validateTrimmedString.ts

 	}

-	return trimmedInput;
+	// Return null if no errors are found (input is valid)
+	return null;


I like that the validateItemName func was added to the validateTrimmedString.tsx file as opposed to making a brand new file--all of the functions in this file have to do with validation! Nice!

Thank you! Yeah that was definetely a major talking point when we were thinking the logic out. We thought about whether adding the duplicate item validation was expanding the specific validation function too wide, but I think it was the right call indeed :)

alex-andria

Great job with this PR Falak and Maha! I know it wasn't easy at the start in understanding the logic for the duplicate item checking even with spaces, but you both pulled through and done very well in smashing the AC for this! I tested all the use cases for this that included punctuation, single space, characters and symbols, and it all looks good!

alex-andria · 2024-09-14T23:08:37Z

src/utils/validateTrimmedString.ts

+
+	//return error if the item already exists
+	if (isDuplicateItem(normalizedInputName)) {
+		return ` ${normalizedInputName} already exists in the list`;


Nice job specifying to the user the exact error when duplicate entries are submitted!

bbland1 · 2024-09-15T15:09:48Z

src/App.tsx

@@ -70,7 +70,7 @@ export function App() {
 						/>
 						<Route
 							path="/manage-list"
-							element={<ManageList listPath={listPath} />}
+							element={<ManageList listPath={listPath} data={data || []} />}
 						/>


suggestion: I don't think wee need to pass data || [] in the data prop, I beleive the data is initialized as an empty array when creating a list. So a list would either have a filled array or an empty array.

Ahhh do you mean we wouldn't need to pass the prop at all or not need to the OR operator to suggest it could be empty?

Sorry that was very unclear 😅 my bad I think you can have it just as data={data} instead of data={data || []}

Noted!! That makes sense

bbland1 · 2024-09-15T15:11:56Z

src/views/authenticated/ManageList.tsx

 	return (
 		<div>
 			<p>
 				Hello from the <code>/manage-list</code> page!
 			</p>
-			<AddItemForm listPath={listPath} />
+			<AddItemForm listPath={listPath} data={data || []} />


I believe this is the same comment on the App.tsx

bbland1 · 2024-09-15T15:14:07Z

src/utils/validateTrimmedString.ts


+// Validates the item name input for a shopping list
+export function validateItemName(


praise: amazing at extending functionality and bringing the new logic and the current logic together to make an awesome new piece of code!

bbland1 · 2024-09-15T15:15:11Z

src/utils/validateTrimmedString.ts

+	}
+
+	//Remove punctuation marks and normalize input
+	const punctuationRegex = /[^\p{L}]/gu;


praise: love the use of the regex, it is something I'm still such a novice to but I know it has a lot of good functionality and it is awesome to see it here!

It was really awesome to bring it back to life form the dusty attic! lol

alternate regex option: input.toLowerCase().replace(/[^a-z0-9]/g, '')

bbland1 · 2024-09-15T15:28:24Z

src/utils/validateTrimmedString.ts

 	}

-	return trimmedInput;
+	// Return null if no errors are found (input is valid)


question: is there a way without breaking everything to have this return trimmedInput again. I added an item to a test list that was ' hi' and it did trim it and i can't add 'hi' in any different form again I did notice in the DB it is adding the item with the white space to it instead of the trimmedInput like before?

Screen.Recording.2024-09-15.at.11.28.57.AM.mov

I tried to show that the toast and such does show the trimmed value but when checking the DB there is a single whitespace before the goodbye. Sorry if it is awkward to see 😅

Thats a great point. It was something we explored. I was trying to create a piece of logic with brute force, using if - else statements to return either the error if duplicate item, or return either the normalized input name. The issue was in the addItemForm, the logic is returning the object that is being returned in the validateItemName function. So it reading the normalizedinputname as an error object. Its something I definetely want to explore more. The check for the duplicate error in the addItemForm before the item is added can be refactored..

eternalmaha and others added 4 commits September 11, 2024 00:05

refactored validateTrimmedString to normalize punctuation errors and …

9a55469

…added a toast error to notify user of empty item name

refactored toast notifcations to correctly display item names validat…

7995534

…ed for emptiness or punctuaction marks

refactored validateItemString to check for duplicate item names enter…

b321236

…ed and add only original names to shopping list

Change validation function to return specific errors. Change handleSu…

eb21d28

…bmit function to return early if validationError is detected

Fix the handleSubmit function to return early if validation error caught

c92e31e

eternalmaha changed the title ~~Ma fz/duplicate or emptyitem~~ Issue # 10 Ma fz/duplicate or emptyitem Sep 13, 2024

zahrafalak changed the title ~~Issue # 10 Ma fz/duplicate or emptyitem~~ Issue # 10 Prevent user from adding duplicate or empty item to the list Sep 13, 2024

zahrafalak marked this pull request as ready for review September 13, 2024 05:44

zahrafalak requested review from bbland1, RossaMania and tannaurus September 13, 2024 05:44

zahrafalak assigned zahrafalak and eternalmaha Sep 13, 2024

zahrafalak requested review from adidalal and alex-andria September 13, 2024 05:44

eternalmaha added the enhancement New feature or request label Sep 13, 2024

zahrafalak and others added 3 commits September 13, 2024 00:25

Change some variable names to more descriptive ones

8ece059

updated toast notifications with descriptives for duplicate item names

a1deb44

change punctuation regex to also check for spaces in the duplicate input

ff10339

RossaMania approved these changes Sep 14, 2024

View reviewed changes

alex-andria approved these changes Sep 14, 2024

View reviewed changes

bbland1 reviewed Sep 15, 2024

View reviewed changes

bbland1 approved these changes Sep 15, 2024

View reviewed changes

adidalal approved these changes Sep 15, 2024

View reviewed changes

eternalmaha added 2 commits September 15, 2024 14:12

refactor normalizedInputName to accept digits

654a733

reverse refactor of normalizedInputName to allow digit

f823aeb

eternalmaha merged commit 855a7c2 into main Sep 15, 2024
2 checks passed

eternalmaha deleted the ma-fz/duplicate-or-emptyitem branch September 15, 2024 22:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue # 10 Prevent user from adding duplicate or empty item to the list #34

Issue # 10 Prevent user from adding duplicate or empty item to the list #34

eternalmaha commented Sep 13, 2024 •

edited by zahrafalak

Loading

github-actions bot commented Sep 13, 2024 •

edited

Loading

RossaMania commented Sep 14, 2024 •

edited

Loading

RossaMania left a comment

RossaMania Sep 14, 2024

eternalmaha Sep 15, 2024

alex-andria left a comment

alex-andria Sep 14, 2024

bbland1 Sep 15, 2024

eternalmaha Sep 15, 2024

bbland1 Sep 15, 2024

eternalmaha Sep 15, 2024

bbland1 Sep 15, 2024

bbland1 Sep 15, 2024

bbland1 Sep 15, 2024

eternalmaha Sep 15, 2024

adidalal Sep 15, 2024

bbland1 Sep 15, 2024

bbland1 Sep 15, 2024

eternalmaha Sep 15, 2024


		// Validates the item name input for a shopping list
		export function validateItemName(

Issue # 10 Prevent user from adding duplicate or empty item to the list #34

Issue # 10 Prevent user from adding duplicate or empty item to the list #34

Conversation

eternalmaha commented Sep 13, 2024 • edited by zahrafalak Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Testing Steps / QA Criteria

github-actions bot commented Sep 13, 2024 • edited Loading

RossaMania commented Sep 14, 2024 • edited Loading

RossaMania left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-andria left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eternalmaha commented Sep 13, 2024 •

edited by zahrafalak

Loading

github-actions bot commented Sep 13, 2024 •

edited

Loading

RossaMania commented Sep 14, 2024 •

edited

Loading