Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 30 commits into from Jan 19, 2020
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
5fa9714
Create the feature branch
Jan 7, 2020
2f3f3b2
added AddItem.css with flash style
mikeramz86 Jan 9, 2020
e9bb776
example of error
mikeramz86 Jan 9, 2020
04c2519
Remove NewList.js, start comparing a list to user input
Jan 9, 2020
33d6d90
added normalized function. still not switching states for error
mikeramz86 Jan 9, 2020
eb4b63f
Remove package.lock.json file
Jan 9, 2020
245ec9d
managed to get the error message working however still figuring out h…
mikeramz86 Jan 11, 2020
f5959f6
Added Context, Checking for duplicates
Jan 12, 2020
f82f691
Checking for duplicates and alerting is working
Jan 12, 2020
28267b4
Checking for duplicates working. Next only add unique items
Jan 12, 2020
c37d2b4
Almost there
Jan 12, 2020
e8024ab
Moved the check for duplicates function to inside of addItem function
Jan 12, 2020
6784c73
hopefully fixed adding to Database and duplicate error works
mikeramz86 Jan 12, 2020
43d50a2
everything should be working Story 7- ready for review)
mikeramz86 Jan 12, 2020
a68ce89
Moved checking for duplicates to listContext.js
Jan 16, 2020
73dbc3b
Changed a console.log() message
Jan 16, 2020
07e2eac
Fetch the list again after adding the item. I added a call to fetchLi…
Jan 16, 2020
ad1991d
Create a state for error checking
Jan 16, 2020
55b0d89
Branch merge attempt
Jan 16, 2020
8eda02b
Remove an if statement in listCoontext.js, add comments
Jan 16, 2020
f9a79af
Change shopping list item key
Jan 16, 2020
7cb575a
Clean up console.log statements
Jan 17, 2020
8172e91
resolved user input error change to stay, resolved <aside> comment fo…
mikeramz86 Jan 19, 2020
9986713
Refactor: Change normalizeName function to use regex
Jan 19, 2020
ba77d58
Refactor: Use conditional rendering to show the error message
Jan 19, 2020
8f71f92
Move addItem function to listContext.js
Jan 19, 2020
efc35b3
Remove a console.log statement
Jan 19, 2020
7ab7d73
Clean up dependency array
Jan 19, 2020
c729134
Remove useEffect from listContext.js
Jan 19, 2020
3494029
Add small screen styles for error message
Jan 19, 2020
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

added normalized function. still not switching states for error

  • Loading branch information
mikeramz86 committed Jan 9, 2020
commit 33d6d90b3e869e4c54eae7342e8c67bb19c96617
@@ -19,3 +19,18 @@
border-radius: 2px;
background-color: rgb(240, 128, 128, 0.1);
}

.error-hidden {
display: none;
}

.error-visible {
font-size: 1.6rem;
margin-top: 1.25rem;
margin-left: 1.2rem;
margin-right: 1.2rem;
padding: 1rem;
border-left: 1rem solid rgb(178, 20, 14);
border-radius: 2px;
background-color: rgb(240, 128, 128, 0.1);
}
@@ -12,9 +12,9 @@ const Flash = ({ message }) => <div className="flash">{message}</div>;
const AddItem = ({ firestore }) => {
const [name, setName] = useState('');

const [nextExpectedPurchase, setNextExpectedPurchase] = useState(0);
const [error, setError] = useState(false);

const dismissError = () => {};
const [nextExpectedPurchase, setNextExpectedPurchase] = useState(0);

const initialToken = () => window.localStorage.getItem('token') || getToken();
const [token] = useState(initialToken);
@@ -42,30 +42,47 @@ const AddItem = ({ firestore }) => {
'Chicken nuggets',
];

const checkForMatches = inputString => shoppingList.includes(inputString);
const normalizedName = name => {
name = name.toLowerCase().trim();
let normalizedName = '';
let symbol = `.,;:!?"`;
for (let i = 0; i < name.length; i++) {
if (!symbol.includes(name[i])) {
normalizedName += name.slice(i, i + 1);
}
}
return normalizedName;
};

const checkForMatches = inputString => {
shoppingList.includes(inputString);
};

const normalizedShoppingList = shoppingList.map(item => normalizedName(item));

const normalizedString = normalizedName(shoppingList[2]);

// console.log('this is normalized string', normalizedString)

// console.log('this is normalized shop list', (normalizedShoppingList))

// Handle the click of the Add Item button on the form
const handleSubmit = event => {
event.preventDefault();
console.log('Is there a match? ', checkForMatches(name));

addItem(name, token);
setError(checkForMatches(name));
console.log('this is Error', error);
// addItem(name, token);
setName('');
This conversation was marked as resolved by mikeramz86

This comment has been minimized.

Copy link
@segdeha

segdeha Jan 18, 2020

Contributor

I think it would be a slightly better user experience for the value the user input to remain in the case where you show the error. It could be they made a typo or want to enter the same thing but a different size.

I'd like to see this one addressed if you have time before tomorrow. Thanks!

};

/*
TODO:
When the user adds an item
check the list for duplicates
Normalize capitalization
Remove punctuation
use array.includes() to check if the item is in the list
If the item is in the list
Warn the user
Else
Add to database
let className = 'error-hidden';

*/
useEffect(() => {
if (error) {
className = 'error-visible';
}
}, [error]);

return (
<>
@@ -120,7 +137,7 @@ const AddItem = ({ firestore }) => {
</div>
</form>

<div className="flash">
<div className={className}>
<button onClick={''}></button>
</div>
</>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.