The most important feature of our app is the ability to look at their shopping lists to see what's on them, 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 (the active shopping list) and Home (where the user will be able to switch shopping lists) 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
[x] The useShoppingLists hook is used in App.jsx to get the shopping lists a user has access to from the database
[x] The lists are passed into the Home component as a prop named data
[x] The setListPath function is passed into the Home component so we can update the current list
[x] The useShoppingListData hook is used in App.jsx to get the items in the current list from the Firestore database
[x] The list is passed into the List component as a prop named data
[x] In Home.jsx, the SingleList component is used to render the name of each shopping list a user is subscribed to
[x] 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.
The variables you need are already being passed into the List and Home components. What steps do you need to take in order to render them?
Additionally, until issues 4 and 5 you should only be able to see the shopping list that was manually added in issue 1.
Summary
The most important feature of our app is the ability to look at their shopping lists to see what's on them, 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(the active shopping list) andHome(where the user will be able to switch shopping lists) 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
Listcomponent is rendered on the/listpage. Because the navigation links are currently broken, you'll have to type that path into your browser's address bar.Acceptance criteria
useShoppingListshook is used inApp.jsxto get the shopping lists a user has access to from the databaseHomecomponent as a prop nameddatasetListPathfunction is passed into theHomecomponent so we can update the current listuseShoppingListDatahook is used inApp.jsxto get the items in the current list from the Firestore databaseListcomponent as a prop nameddataHome.jsx, theSingleListcomponent is used to render the name of each shopping list a user is subscribed toList.jsx, theListItemcomponent is used to render the name of each itemNotes
ListItem.jsxorSingleList.jsxto show more information – you will do that later.ListandHomecomponents. What steps do you need to take in order to render them?