Create Budget Overview Page

[stephencweiss]

W,W,W

The budget overview will show:

• The user that they are on their page,
• The name of the budget they're currently working on
• The ability to add a new line item
• The ability to edit a specific line item
• The ability to delete a specific line item
• The ability to view the budget visually

DoD

A webpage that visually displays all of this information (no functionality)

Note

Because we're not including functionality, tests will need to hard code data in for the line items to see the edit/delete buttons.

[stephencweiss]

What's involved

• [x] Create an app.jsx
• [x] Create a budget.jsx
• [x] Create a budgetItem.jsx
• [x] Manage State with app.jsx to contain a particular user's specific budget (to start, this will be hardcoded -- will be replaced with dynamic once authorization is added)
• [x] Load a Specific User's budget on mount of the app
• [x] Pass budget to budget.jsx
• [x] Map over props (budget) in budget.jsx and pass each element to budgetItem.jsx
• [x] Manage state of the prop (budgetItem) in budgetItem.jsx
• [x] Create an Edit AJAX request to the server
• [x] Create a Delete AJAX request to the server

---

Sketch of single page for Budget Page

Sketch of React architecture for Budget Overview

[stephencweiss]

Ultimately a duplicate of #7, however with greater detail on some of the expected functionality.

This Issue has been broken down into smaller pieces and closed.