Issue #4: Add to shopping list

[zeeatwork]

Description

This PR refactors 2 components: List.js and AddItem.js. The AddItem.js component now allows a user to add items to their personal shopping list. Upon form submission, data is added to our Firestore data structure (to be grouped by user-token at a later date). List.js now shows a list of grocery items and their purchase frequency. The list will only exhibit a single user's items.

During 4/14/21 group study session, we updated the configuration file to reflect updated import statement, and reduced the 'steps' into our shopping list so that each user will have a dedicated db.collection, then a unique token-id'd doc for a shopping list. We also fixed a bug related to our dropdown list's use onBlur vs. onChange. We added a preventDefault call to the same functional component (AddItem.js).

Related Issue

This pull request is related to issue #5

Acceptance Criteria

• [✓ ] User is presented with a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again (Soon, Kind of Soon, Not Soon)
• [ ✓ ] When the user submits the form, the item is saved to the database, associated with the user’s token
• [ ✓ ] Along with the item name, an integer corresponding to the estimated number of days until next purchase is saved: 7 for “Soon”, 14 for “Kind of Soon”, and 30 for “Not Soon”
• [ ✓ ] The last purchased date should be set to null initially (i.e. you can create an item without purchasing it)
• [ ✓ ] Item names should be displayed as a simple, unordered list on the list view after they’re added

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

These screenshots show our Firestore Data structure. It's currently a collection called 'list' with a document of users (user_1 is a stand-in for future unique key users). Each user has a subcollection of a shopping list, which contains documents as shopping list items. (will insert visual aid here)

After

After consulting with the team, we've reconfigured our data for a more "shallow" query route. Now, the inital DB Collection is the user's unique token, then a document with a auto-generated id. The document features all shopping list values.

Testing Steps / QA Criteria

To test functionality:

1. Run the app in your local environment using NPM start.
2. Select 'Add Item' from the homepage.
3. Enter Item and Frequency to order. Submit form
4. Item should now be viewable by tapping the list button, which displays all items on the user's shopping list.
5. Changes are also viewable in Firebase. We've noticed occasional lag between list updates and submissions.

[github-actions[bot]]

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

https://tcl-23-shopping-list--pr18-za-jc-add-to-shoppin-tukvbk9a.web.app

_{(expires Sun, 25 Apr 2021 18:16:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[jssckbl]

Hi! I was able to start the branch up. I am able to switch between Add Item and List views, enter an item, select purchase frequency, and click the Submit button to add item to the Firestore!

I have not been able to get the item I add to the Firestore to show up in the List view. It is showing up in the Firestore. (I added goldfish and coffee beans.) I waited about an hour, and still nothing came through. I also did an npm install for the heck of it but it did not help.

I've looked around at the code and done some digging in documents, but have not been able to find something where I can offer a helpful solution to try yet. The last thing I started to investigate that may or may not be a dead end has to do with the code in AddItem.js. In the db.collection portion, do we need to consider including a .update?

I am looking at this article about Firebase Cloud Firestore

Example: // Create an initial document to update.

var frankDocRef = db.collection("users").doc("frank"); frankDocRef.set({ name: "Frank", favorites: { food: "Pizza", color: "Blue", subject: "recess" }, age: 12 });

// To update age and favorite color: db.collection("users").doc("frank").update({ "age": 13, "favorites.color": "Red" });

I will look more into it later this evening as well.

[jamesncox]

@jssckbl GREAT CATCH!!!

I believe the issue with not seeing the correct items returned is because we had not updated the following function in List.js:

const [value, loading, error] = useCollection(
    db.collection('list').doc('user_2').collection('shopping_items'),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    },
  );

But I just updated it to:

const [value, loading, error] = useCollection(
    db.collection('generated_token'),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    },
  );

Specifically db.collection('generated_token') which matches the format in AddItem.js:

const createListItem = (e) => {
    e.preventDefault();
    db.collection('generated_token') <---- MATCHING THIS
      .add({
        item_name: itemName,
        purchase_frequency: parseInt(purchaseFrequency),
        last_purchased: lastPurchased,
      })
      .then((documentReference) => {
        console.log('document reference ID', documentReference.id);
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

Now if you re-pull, it should work (hopefully!)

[jamesncox]

@jssckbl

There's your coffee beans and goldfish!