the-collab-lab / auth-prep-2 Goto Github PK

Summary

Being able to sign in is a foundational part of our app. Not only will it allow us to connect users to the shopping lists they have access to, it will prevent users from being cluttered with others' data and keep their own data from being messed with. This provides a layer of personalization and security to the app.

Auth is already set up in Firebase but there's no way for users to sign in on the actual site. We already have a useAuth hook, we just need to set it up so that we have a solid foundation for the rest of our issues.

Acceptance Criteria

• The useAuth hook as well as the SignInButton and SignOutButton components are imported into Layout.jsx.
• The SignInButton is displayed on every page if the user is not signed in.
• The SignOutButton is displayed on every page if the user is signed in.

Notes

• After adding this feature all collabies should sign in so that they're authenticated.
• A test shopping list should be created and everyone should be invited to it for collaboration.
• Until issue 3 is completed we can't create shopping lists with the app so we have to do this manually in firebase. This happens in 2 parts:

1. The collection itself:
   a. Create a collection using an authenticated user's UID as the collection name.
   b. Add a document with a list name.
   c. Add a collection using the name items.
2. Giving access to users:
   a. Inside the collection users there should be documents with every authenticated user's email.
   b. Inside each of these documents there is a field titled sharedLists.
   c. Inside this field add the shopping list that was just created with the format: /{user UID}/{shopping list name}

• After these steps are followed everyone should have access to the list! We won't see this in action until after our first week's tasks!

Summary

A shopping list is a set of items associated with the owner's unique id and the name of the shopping list. Users need to be able to create new shopping lists. To do this, the Home view should present them with a form that allows them to enter the name of their list. Additionally, we need to do a few things to create that list:

1. Save the token to localStorage
2. Save the list to our database using the createList function in firebase.js
3. Show the user the list view

Acceptance criteria

UI-related tasks:

• The Home view displays a form that allows users to enter the name of a shopping list and then create a list with that name.
• 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 list either was or was not created and saved to the database.

Data-related tasks:

• Clicking the button uses the createList function in src/api/firebase.js to create a new shopping list for the user.
• The shopping list path is stored in local storage.
• Once the list has been created and saved, the user is redirected to the List view.

Notes

• The createList function takes three arguments: the current user's id, the current user's email, and the name of the shopping list.
• The setListPath function takes one argument: the new list token.

Summary

Users need to be able to add items to their shopping lists. To do this, the AddItem view should present them with a form that allows them to enter two things:

1. The name of the item, and
2. An estimate of when they think they’ll need to buy the item again.

The README file for the shopping list API will be helpful as you work on this feature.

Acceptance criteria

UI-related tasks:

• The ManageList 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

Notes

• When this feature is implemented correctly, new items will automatically show up in the list view because streamListItem gets new data from Firestore every time there’s a change.
• You will know your <label> is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on <label> for more info.
• Users will be able to submit the form with the Enter key if you listen for the right JavaScript event on the right element! If you're adding an onKeyDown listener anywhere, you might be overcomplicating things.
• The add item form has the potential to be a lot of scope. The wireframe for the "add item" page has several notes related to accessibility and UX.

Summary

We want to allow users to invite others to existing shopping lists so they can manage them with friends or family. This would take the following steps:

1. User enters an existing user's email into a form
2. The shareList function in src/api/firebase.js is called with the appropriate inputs

Acceptance criteria

•  The ManageList view shows a form that allows the user to enter an email to invite an existing user to a list, in addition to the form that allows them to add items to that list.
•  The input that accepts the email has a semantic label element associated with it
•  The user can submit this form with both the mouse and the Enter key
•  If the other user exists, the user is alerted that the list was shared
•  If the other user does not exist, the user is shown an error message that explains the problem

Notes

• You will know your <label> is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on <label> for more info.
• Users will be able to submit the form with the Enter key if you listen for the right JavaScript event on the right element! If you're adding an onKeyDown listener anywhere, you might be overcomplicating things.

Summary

Users need to be able to navigate between the pages of our application in order to access all of its features. There is a navigation bar in the Layout.jsx component, but it's not quite feature-complete: the links in the nav element don't actually allow the user to navigate from page to page.

Acceptance criteria

• The nav element is added to the Layout component
• Links to the "Home", "List", and "Add item" pages of the app are In the nav element
• The links all function as expected using the NavLink component from react-router-dom

Notes

• The official docs for the NavLink component will come in very handy!
• While a standard anchor element (<a>) could allow a user to navigate from page to page, the NavLink component adds additional behavior that is essential to our app functioning correctly!

Summary

The most important feature of our app is the ability to look at what's on our lists, so the user knows what they need to buy. For this to work, we'll have to be able to choose a our shopping lists. The List and Home components are the best place in our code to do that. In fact, this feature is already partially implemented. Refer to the acceptance criteria in this issue, and the existing code, to understand the work that remains.

The List component is rendered on the /list page. Because the navigation links are currently broken, you'll have to type that path into your browser's address bar.

Acceptance criteria

• The useShoppingLists hook is used in App.jsx to get the shopping lists a user has access to from the database
• The lists are passed into the Home component as a prop named data
• The setListPath function is passed into the Home component so we can update the current list
• The useShoppingListData hook is used in App.jsx to get the items in the current list from the Firestore database
• The list is passed into the List component as a prop named data
• In Home.jsx, the SingleList component is used to render the name of each shopping list a user is subscribed to
• In List.jsx, the ListItem component is used to render the name of each item

Notes

• ⚠️ Your only goal is to make sure that the names of the items render as expected. You might be tempted to modify ListItem.jsx or SingleList.jsx to show more information – you will do that later. If you want a peek at the future, this wireframe is what your list could look like closer to the end of the project.
• The data you need is already being passed into the List and Home components. What steps do you need to take in order to render it?