Add addItem function import #19

jeremiahfallin · 2023-04-11T02:27:16Z

Description

This code changes the AddItem view and the firebase.js api so that the user can add items to their shopping list. We followed acceptance criteria and wireframe and used a text input with a label for the name of the item and a group of radio buttons inside a fieldset so the user can select how often they would like to be reminded to buy the item they are adding. The firebase api is now using the addDoc function from the firebase/firestore library. We chose to use React's useState feature for storing the user's item name and timeframe between purchase so that we could easily send those as variables to the firebase function. The message showing that the item was successfully added appears temporarily as to not disrupt the UI if the user wants to add another item on the same visit to this page.

Related Issue

4. As a user, I want to add a new item to my shopping list so I can start recording purchases #4

Acceptance Criteria

UI-related tasks:

The Add Item view displays a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again. There should be 3 choices for this:
- “Soon”, corresponding to 7 days
- “Kind of soon”, corresponding to 14 days
- “Not soon”, corresponding to 30 days
The input that accepts the name of the item has a semantic label element associated with it
The user can submit this form with both the mouse and the Enter key
When the user submits the form, they see a message indicating that the item either was or was not saved to the database.

Data-related tasks:

The console.log in the addItem function in src/api/firebase.js is replaced with a function that adds the new document to the Firestore database. That function will be imported from the firebase/firestore module.
The user’s soon/not soon/kind of soon choice is used to calculate nextPurchasedDate

Type of Changes

	Type
✓	✨ New feature

Updates

Before

After

Testing Steps / QA Criteria

git pull
git checkout tf-jf-add-item
npm start
View the add-item page at https://localhost:3000/add-item and confirm items get added on the https://localhost:3000/list page.

github-actions · 2023-04-11T02:28:12Z

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

https://tcl-55-smart-shopping-list--pr19-tf-jf-add-item-sdt6nmdt.web.app

_{(expires Sun, 23 Apr 2023 00:19:56 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 607d14028385ebfcc7c9ec69a7bb14d95ed54078}

jeremiahfallin · 2023-04-11T19:41:10Z

Forgot to make sure the user enters an item name! Added it in the latest push.

katherineyuneman

Just noted a couple of small fixes that need to be changed before we merge but other than those, this looks awesome. This was a hefty user story!

I love that you all used a useEffect with setTimeout for the messages that was a great idea.

Using type=submit and onSubmit is making the using the Enter button work perfectly and the items are being added to the passed down listId when you check firebase. So all here is working as it should!

Just a heads up that I think my cache and localStorage still had my testing of a new listID from our user story so you'll actually see that list in firebase now.

src/views/AddItem.jsx

katherineyuneman

LGTM! Thanks all!

mentalcaries · 2023-04-14T11:05:53Z

src/api/firebase.js

@@ -64,6 +62,7 @@ export async function addItem(listId, { itemName, daysUntilNextPurchase }) {
 name: itemName,
 totalPurchases: 0,
 });
+ return data;


Data in this case is a promise. How can you tell whether it was fulfilled or rejected?

mentalcaries · 2023-04-14T11:10:22Z

src/views/AddItem.jsx

+ setItemName('');
+ setTimeframe('Soon');
+ } else {
+ setMessage('Error adding item');


Were you all able to trigger this error message? I've tried a bunch of bad inputs, and I couldn't get the error.
result here is also a promise, so the null check doesn't reall work if the promise was rejected by Firebase

src/views/AddItem.jsx

src/api/firebase.js

Yaosaur

Love the use effect and timeout to clear the message! I left two comments, one optional, another one I think should be implemented. But overall, great job!

Yaosaur · 2023-04-15T03:43:37Z

src/views/AddItem.jsx

+ Soon: 7,
+ 'Kind of Soon': 14,
+ 'Not Soon': 30,


This threw me off for a second. Is it possible to have them be consistent, maybe change 'Not Soon' to notSoon, kindOfSoon etc. And then update where this is being used in the form? I understand the default for one word keys is a string with no quotes (ex Soon). I tried adding quotes, but my linting is changing it back to this form as well.

This is a good idea @Yaosaur. Alternatively, what about swapping the keys and values?

I refactored it out completely. It seemed like a good idea when we were writing our code but wasn't needed at all. 😅

Yaosaur · 2023-04-15T03:46:00Z

src/views/AddItem.jsx

+ <label htmlFor="timeframe" style={{ gridColumn: 'span 2' }}>
+ How soon will you buy this again?
+ </label>


Can we replace with legend element for accessibility as per the wireframe requirement? See here: https://www.w3.org/WAI/tutorials/forms/grouping/#associating-related-controls-with-wai-aria

Done, great suggestion!

…y conversion object

lyleschemmerling · 2023-04-15T22:32:04Z

Currently after you submit the form the radio buttons remain unchecked even though you set the timeframe after the result is returned. You can submit a new item in this state anyway, which appears as though you added an item with no buy again date even though you have

Recording.2023-04-15.161116.mp4

This is being caused by line 34 of AddItem.jsx and I don't think that you need it.

src/views/AddItem.jsx

Add addItem function import

ec8f878

ticiadev added 2 commits April 10, 2023 20:15

Add UI form elements

70f3628

Add backend functionality to add item to Firebase

7ef8d7f

jeremiahfallin marked this pull request as ready for review April 11, 2023 03:59

jeremiahfallin requested review from katherineyuneman and Yaosaur April 11, 2023 04:00

jeremiahfallin added 2 commits April 10, 2023 22:11

Remove TODO from firebase

186c735

ensure user enters item name

63e3396

katherineyuneman requested changes Apr 13, 2023

View reviewed changes

src/views/AddItem.jsx Show resolved Hide resolved

src/views/AddItem.jsx Outdated Show resolved Hide resolved

jeremiahfallin added 2 commits April 13, 2023 12:38

fix typo in timeframe initial state

94d0353

add id to item name input

a8ae94c

jeremiahfallin requested a review from katherineyuneman April 13, 2023 19:48

katherineyuneman approved these changes Apr 14, 2023

View reviewed changes

mentalcaries reviewed Apr 14, 2023

View reviewed changes

src/views/AddItem.jsx Outdated Show resolved Hide resolved

mentalcaries reviewed Apr 14, 2023

View reviewed changes

src/api/firebase.js Outdated Show resolved Hide resolved

ticiadev added 2 commits April 14, 2023 13:55

Refactor form onSubmit into a separate function

eeb5e90

Add catch handler to addDoc

ccd7c2e

Yaosaur reviewed Apr 15, 2023

View reviewed changes

jeremiahfallin added 2 commits April 15, 2023 10:23

add error handling on addItem

9316bb0

change label to legend for accessibility and refactor our unneccessar…

c24d5ee

…y conversion object

jeremiahfallin requested review from lyleschemmerling and 5hraddha April 15, 2023 19:33

remove unnecessary catch

fb49a38

mentalcaries reviewed Apr 15, 2023

View reviewed changes

src/views/AddItem.jsx Outdated Show resolved Hide resolved

fix difference in types for timeframe

5810e7b

mentalcaries merged commit 8d78606 into main Apr 16, 2023
2 checks passed

mentalcaries deleted the tf-jf-add-item branch April 16, 2023 13:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add addItem function import #19

Add addItem function import #19

jeremiahfallin commented Apr 11, 2023 •

edited

github-actions bot commented Apr 11, 2023 •

edited

jeremiahfallin commented Apr 11, 2023

katherineyuneman left a comment •

edited

katherineyuneman left a comment

mentalcaries Apr 14, 2023

mentalcaries Apr 14, 2023

Yaosaur left a comment

Yaosaur Apr 15, 2023

mentalcaries Apr 15, 2023 •

edited

jeremiahfallin Apr 15, 2023

Yaosaur Apr 15, 2023

jeremiahfallin Apr 15, 2023

lyleschemmerling commented Apr 15, 2023

Add addItem function import #19

Add addItem function import #19

Conversation

jeremiahfallin commented Apr 11, 2023 • edited

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Apr 11, 2023 • edited

jeremiahfallin commented Apr 11, 2023

katherineyuneman left a comment • edited

Choose a reason for hiding this comment

katherineyuneman left a comment

Choose a reason for hiding this comment

mentalcaries Apr 14, 2023

Choose a reason for hiding this comment

mentalcaries Apr 14, 2023

Choose a reason for hiding this comment

Yaosaur left a comment

Choose a reason for hiding this comment

Yaosaur Apr 15, 2023

Choose a reason for hiding this comment

mentalcaries Apr 15, 2023 • edited

Choose a reason for hiding this comment

jeremiahfallin Apr 15, 2023

Choose a reason for hiding this comment

Yaosaur Apr 15, 2023

Choose a reason for hiding this comment

jeremiahfallin Apr 15, 2023

Choose a reason for hiding this comment

lyleschemmerling commented Apr 15, 2023

jeremiahfallin commented Apr 11, 2023 •

edited

github-actions bot commented Apr 11, 2023 •

edited

katherineyuneman left a comment •

edited

mentalcaries Apr 15, 2023 •

edited