Week 6 Assignment

Overview

In this assignment, we will combine the components we built in Weeks 4 and 5 to create a functional "Shopping List" application.

You will learn how to Lift State Up to a parent component so that sibling components (the form and the list) can communicate. You will also implement the sorting functionality within the list.

Part 1: Initial Setup

• Link to the Week 6 Page
• Edit the project file /app/page.js and add a link to week-6.
• Create the Folder and Files
• Copy Files from past weeks as necesary
• Your naming conventions might be different (kebab-case filenames will work though PascalCase is preffered)
  • Copy items.json, Item.js, and ItemList.js from your Week 4 folder.
  • Create Page:
  • Create a new page.js file inside /app/week-6.
  • Copy NewItem.js from your Week 5 folder to your Week 6 folder.

Part 2: Refactoring Components

• We need to modify our existing components to handle data flowing between them.
• Update Item Component
  • No changes needed. It should still accept name, quantity, and category as props.
• Update NewItem Component
• We need to modify the form so that instead of just alerting the user, it sends the new item data up to the parent component.
  • Props: Update the NewItem component function definition to accept props (or destructure { onAddItem }).
  • Handle Submit: Inside your handleSubmit function:
  • Generate a random id for the new item (you can use Math.random().toString(36).substring(2, 9) or the web API crypto.randomUUID()).
  • Create the item object with id, name, quantity, and category.
  • Call the Prop: Instead of alert(), call the function passed as a prop: onAddItem(item).
  • Keep the state reset logic (clearing the form after submission).
• Update ItemList Component
• We need to remove the hardcoded data from this component so it can accept the list from the parent.
  • Props: Update the ItemList component to accept the items prop.
  • Remove Data Import: Remove the import line for items.json. The data will now come from the props.
  • State for Sorting:
    • Import useState from React.
  • Initialize a state variable sortBy (default to "name").
  • Sorting Logic:
    • Create a sorted version of the items prop based on the sortBy state.
    • Note: Do not mutate the original prop. Use [...items].sort(...).
    • Sort by name or category depending on the state variable.
  • Sort Buttons:
    • Render two buttons to toggle the sortBy state between "name" and "category".
    • Style the active button to look different (e.g., darker background).
  • Render:
    • Map over the sorted items variable (not the prop directly) to render your Item components.

Part 3: Building the App in Page

Now we will wire everything together in the Page component. This component will hold the "Master State" of the list.

• Imports
  • In /app/week-6/page.js:
    • Import Item (if needed), ItemList, and NewItem.
    • Import itemsData from ./items.json
    • Import useState from React.
• Initialize State
  • Initialize a state variable named items with the data imported from items.json.
• Create Event Handler
  • Create a function called handleAddItem that takes newItem as an argument.
  • This function should update the items state by adding the newItem to the existing array. (Remember to spread the previous state: setItems([...items, newItem])).
• Render
  • Return a main element containing:
    • An h1 header "Shopping List".
    • The NewItem component.
    • Pass your handleAddItem function to the onAddItem prop.
    • The ItemList component.
    • Pass your items state variable to the items prop.

Part 4: Optional Extra Challenge

• Update the sorting in ItemList to support a "Group by Category" feature.
  • Add a third button "Group by Category".
  • If selected, the render method should group items by category headers, sorting both the categories and the items within them alphabetically.

Example Output:

**Bakery**

    bread 🍞

**Dairy**

    eggs, dozen 🥚
    milk, 4 L 🥛

Part 5: Assignment Submission

• Submit the links to your github repo and deployed site