7. Alert the user to avoid duplicate items on the list #53

prophen · 2020-01-07T06:34:52Z

Closes issue #29

…ow to work with database and check for duplicates. added some code with some help from friends

src/pages/AddItem.js

It mostly works but we need a way to make sure there is the duplicate is checked before sending the item to the database. I'm not super strong here but I think a callback function or promise can do it. I saw some things about useEffect also but I couldn't figure it out. I have been looking at this for too long.

prophen · 2020-01-12T22:13:37Z

Our PR for story #53 is ready to review @ajiles91 @MonicaDJohnson

ajiles91

Ok, I pulled the branch and ran it locally and everything behaved as expected. Nice work!

prophen · 2020-01-12T23:14:16Z

We found a bug so we're not actually ready for review @MonicaDJohnson @ajiles91. As it is currently, the code saves the item name as the document id. That makes it so that globally across everyone's lists we aren't able to have duplicate items.

ex: You put an apple on your list and now I can't.

In the checkForDuplicates function we take the item name and check to see if it's already on the shopping list. If it's a match it sets the duplicat state to true, the returns true. Instead of using state to determine if the item can be added we use the function return value. So duplicate items don't get added while waiting for the state to populate.

…st() at the end of addItem() so that if a user rapidly enters duplicates the current list gets checked.

prophen · 2020-01-16T23:09:29Z

@ajiles91 @MonicaDJohnson we're ready for review 🤞🏾

src/pages/List.js

segdeha

NICE WORK!!! So great! I only have one small change I've requested to improve the UX. Otherwise, this is good to merge!!! 🙌

src/lib/normalizeName.js

src/pages/AddItem.js

stevelikesmusic

Lots of great work! Using Context to share state across routes is a great idea.

Nothing additionally from me that would be a blocker. Mostly ideas and considerations regarding code structure and component APIs. @segdeha makes a great point for the UX about keeping the user input when an error is shown. Definitely something that can be ironed out before your call 👍

stevelikesmusic · 2020-01-18T16:32:52Z

src/pages/AddItem.js

@@ -88,6 +108,12 @@ const AddItem = ({ firestore }) => {
          </label>
        </div>
      </form>
+
+      {error ? (


This is good for hiding/showing ItemError.

A more 'react' way of doing this would be to conditionally render the component:

{error && <ItemError />}

Which you can think of as:

if (error) { return <ItemError /> } else { return null; }

This way, you don't need to worry about CSS hiding/showing an element. react knows when to render the component at all or not.

Thanks Steve. I knew there was an easier, React way to do this 😃. Addressed in this commit ba77d58

stevelikesmusic · 2020-01-18T16:35:58Z

src/pages/ItemError.js

+
+function ItemError(props) {
+  return (
+    <div className={'flash ' + props.className}>


I like using an element like <aside> for error messages. Whenever possible, I try to find a semantic HTML element vs div.

Even better is to check if there's an ARIA role attribute that might fit for your component. In this case, I might reach for alert.

Considerations like this will make your apps accessible to more users—especially those using screen readers. While you can go overboard—screen readers announcing way too much to users—I think this case warrants giving a little bit more.

It's out of scope right now to dive into accessibility best practices. But wanted to at least call this out as something to keep in mind as continue building your skills.

One other thought might be to say what the item is (ex. "Oh no! Falafel is already on your list.")

stevelikesmusic · 2020-01-18T16:41:03Z

src/pages/AddItem.js

+    if (shoppingList.length === 0) {
+      fetchList(token);
+    }
+    if (error) {


Why the timeout?

Desperation 😃. When we were finally able to prevent duplicates from being entered, the error message just stayed there. Maybe if we implement the suggested changes that won't be an issue.

stevelikesmusic · 2020-01-18T16:51:50Z

src/pages/AddItem.js

+        setError(false);
+      }, 2000);
+    }
+  }, [duplicate, error, fetchList, setError, shoppingList, token]);


We can probably drop duplicate from the dependencies array.

stevelikesmusic · 2020-01-18T16:54:52Z

src/pages/AddItem.js

-  const addItem = name => {
-    firestore.collection('items').add({ name, token, nextExpectedPurchase });
+  const addItem = () => {
+    if (!checkForDuplicates(name)) {


It's common to call functions like this hasDuplicate(name).

The reason I prefer naming in this way is that I don't have to think about what the function is returning. isSomething, or hasSomething implies that it's a binary value (true or false).

stevelikesmusic · 2020-01-18T19:26:35Z

src/listContext.js

+        setShoppingList(tempArray);
+      })
+      .catch(function(error) {
+        console.log('Error getting documents: ', error);


I like that you're dropping an error message if we fail getting the list! It's out of scope for this PR to directly show a message to the user, so console.log is fine here (maybe use console.error to print to the console in red).

One thing that could change is the messaging. Error getting documents isn't very helpful to users. Maybe something like Error getting your shopping list?

stevelikesmusic · 2020-01-18T19:26:37Z

src/listContext.js

+
+  // fetch the latest shopping list from the database and save to state
+  const fetchList = token => {
+    var db = firebase.firestore();


I generally never use var anymore. Is the reason between choosing var vs let? Why not const?

I copied from the firebase docs and forgot to change it

stevelikesmusic · 2020-01-18T19:26:40Z

src/listContext.js

+import firebase from 'firebase/app';
+import normalizeName from './lib/normalizeName';
+
+const ListContext = React.createContext();


A convenient way to expose your Context is via a hook. Then you can pass additional arguments in:

export const useShoppingList = useContext(ListContext);

Then importing the Context becomes as simple as a single import.

function SomeComponent(props) { const { list, fetchList } = useShoppingList(); }

I didn't quite understand how to do this, so I left it as is. I'll definitely read up on this soon.

Sounds good @prophen! If you still have questions after digging in, I'm more than happy to pair up

stevelikesmusic · 2020-01-18T19:26:44Z

src/AppRouter.js

@@ -11,7 +10,6 @@ export default function AppRouter() {
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/add-item" component={AddItem} />
-        <Route path="/new-list" component={NewList} />


Was the intent here to auto-create a new list token if we don't have one?

It was leftover from when an earlier story when we tried starting a new list in a new component. The new list component was never used and we forgot to remove it.

stevelikesmusic · 2020-01-18T19:30:18Z

src/lib/normalizeName.js

@@ -0,0 +1,13 @@
+//normalized function
+const normalizeName = name => {


What would you think about a regex here with String.prototype.replace?

How might you normalize the name without using a loop?

Made the change to regex here.

…rm ItemError.js

I implemented most of the changes Steve suggested. I removed the setTimeout and now the function checks for duplicates as you type. Does this break UX? I tried entering apple then apple pie. The app will warn that apple is on the list but if you keep typing the warning goes away.

prophen · 2020-01-19T22:35:19Z

I tried to implement the suggestions @segdeha and @stevelikesmusic made in addition to the work that @mikeramz86 did earlier. I think I changed enough that it could use another mentor review.

prophen · 2020-01-19T22:37:14Z

src/pages/AddItem.js

@@ -1,45 +1,57 @@
-import React, { useState, useEffect } from 'react';
-import { withFirestore } from 'react-firestore';


The firebase stuff is happening in listContext.js now

segdeha

LGTM! Nice touch having it alert the user as they're typing!

mikeramz86

Everything good to go!

mikeramz86 · 2020-01-19T23:11:42Z

src/listContext.js

+
+  return (
+    <ListContext.Provider
+      value={{


@mikeramz86 review this message a little more

Nikema Prophet and others added 7 commits January 6, 2020 22:31

Create the feature branch

5fa9714

added AddItem.css with flash style

2f3f3b2

example of error

e9bb776

Remove NewList.js, start comparing a list to user input

04c2519

added normalized function. still not switching states for error

33d6d90

Remove package.lock.json file

eb4b63f

managed to get the error message working however still figuring out h…

245ec9d

…ow to work with database and check for duplicates. added some code with some help from friends

mikeramz86 reviewed Jan 11, 2020

View reviewed changes

src/pages/AddItem.js Outdated Show resolved Hide resolved

mikeramz86 reviewed Jan 11, 2020

View reviewed changes

src/pages/AddItem.js Outdated Show resolved Hide resolved

mikeramz86 reviewed Jan 11, 2020

View reviewed changes

src/pages/AddItem.js Outdated Show resolved Hide resolved

Nikema Prophet and others added 7 commits January 12, 2020 04:09

Added Context, Checking for duplicates

f5959f6

Checking for duplicates and alerting is working

f82f691

Checking for duplicates working. Next only add unique items

28267b4

Moved the check for duplicates function to inside of addItem function

e8024ab

hopefully fixed adding to Database and duplicate error works

6784c73

everything should be working Story 7- ready for review)

43d50a2

prophen marked this pull request as ready for review January 12, 2020 22:12

prophen requested review from ajiles91 and MonicaDJohnson January 12, 2020 22:12

ajiles91 approved these changes Jan 12, 2020

View reviewed changes

mikeramz86 requested review from stevelikesmusic and larsbrekken January 12, 2020 23:12

Nikema Prophet added 5 commits January 16, 2020 11:48

Changed a console.log() message

73dbc3b

Fetch the list again after adding the item. I added a call to fetchLi…

07e2eac

…st() at the end of addItem() so that if a user rapidly enters duplicates the current list gets checked.

Create a state for error checking

ad1991d

Branch merge attempt

55b0d89

Nikema Prophet added 2 commits January 16, 2020 15:32

Remove an if statement in listCoontext.js, add comments

8eda02b

Change shopping list item key

f9a79af

prophen commented Jan 16, 2020

View reviewed changes

src/pages/List.js Show resolved Hide resolved

MonicaDJohnson approved these changes Jan 17, 2020

View reviewed changes

Clean up console.log statements

7cb575a

prophen requested review from stacietaylorcima, segdeha and ajiles91 January 17, 2020 03:05

ajiles91 approved these changes Jan 17, 2020

View reviewed changes

segdeha requested changes Jan 18, 2020

View reviewed changes

src/lib/normalizeName.js Outdated Show resolved Hide resolved

src/pages/AddItem.js Outdated Show resolved Hide resolved

stevelikesmusic reviewed Jan 19, 2020

View reviewed changes

mikeramz86 and others added 6 commits January 18, 2020 21:56

resolved user input error change to stay, resolved <aside> comment fo…

8172e91

…rm ItemError.js

Refactor: Change normalizeName function to use regex

9986713

Refactor: Use conditional rendering to show the error message

ba77d58

Remove a console.log statement

efc35b3

Clean up dependency array

7ab7d73

prophen requested a review from segdeha January 19, 2020 22:33

prophen commented Jan 19, 2020

View reviewed changes

Nikema Prophet added 2 commits January 19, 2020 14:41

Remove useEffect from listContext.js

c729134

Add small screen styles for error message

3494029

segdeha approved these changes Jan 19, 2020

View reviewed changes

mikeramz86 reviewed Jan 19, 2020

View reviewed changes

src/listContext.js

return (

<ListContext.Provider

value={{

Copy link

Contributor

mikeramz86 Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mikeramz86 review this message a little more

mikeramz86 merged commit b657dda into master Jan 19, 2020

prophen deleted the mr-np-check-for-duplicates branch January 19, 2020 23:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

7. Alert the user to avoid duplicate items on the list #53

7. Alert the user to avoid duplicate items on the list #53

prophen commented Jan 7, 2020

prophen commented Jan 12, 2020

ajiles91 left a comment

prophen commented Jan 12, 2020

prophen commented Jan 16, 2020

segdeha left a comment

stevelikesmusic left a comment

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020

stevelikesmusic Jan 18, 2020

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020

stevelikesmusic Jan 18, 2020

stevelikesmusic Jan 18, 2020

stevelikesmusic Jan 18, 2020

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020 •

edited

Loading

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020 •

edited

Loading

stevelikesmusic Jan 21, 2020

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020

stevelikesmusic Jan 18, 2020

prophen Jan 19, 2020

prophen commented Jan 19, 2020

prophen Jan 19, 2020

segdeha left a comment

mikeramz86 left a comment

mikeramz86 Jan 19, 2020

		@@ -0,0 +1,13 @@
		//normalized function
		const normalizeName = name => {

		@@ -1,45 +1,57 @@
		import React, { useState, useEffect } from 'react';
		import { withFirestore } from 'react-firestore';

7. Alert the user to avoid duplicate items on the list #53

7. Alert the user to avoid duplicate items on the list #53

Conversation

prophen commented Jan 7, 2020

prophen commented Jan 12, 2020

ajiles91 left a comment

Choose a reason for hiding this comment

prophen commented Jan 12, 2020

prophen commented Jan 16, 2020

segdeha left a comment

Choose a reason for hiding this comment

stevelikesmusic 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

prophen Jan 19, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prophen Jan 19, 2020 • edited Loading

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

prophen commented Jan 19, 2020

Choose a reason for hiding this comment

segdeha left a comment

Choose a reason for hiding this comment

mikeramz86 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prophen Jan 19, 2020 •

edited

Loading

prophen Jan 19, 2020 •

edited

Loading