#5 Add "Show All" Button

[Melonexx]

Value proposition

As a User I want to see all transactions as well as the total amount of incomes - expenses so that i have again an overview of all incomes and expenses at once

Description

Acceptance criteria

• [ ] On the homepage, there is a list of current income and expenses.
• [ ] There are two filter buttons: one for income and one for expenses.
• [ ] When the user clicks the income filter button, only income entries are displayed.
• [ ] When the user clicks the expense filter button, only expense entries are displayed.
• [ ] The user can only apply one filter at a time.
• [ ] There is a “Show Complete List” button that displays all transactions when clicked.

Tasks

• [ ] Create a new component called CompleteListButton in the components folder. This component will render a button that displays all transactions when clicked.
• [ ] Create a new component called AmountContainer in the components folder. This component will render the total amount of incomes and expenses.
• [ ] Implement logic to display all transactions when the user clicks the “Show Complete List” button.
• [ ] Implement logic to calculate the total amount of income and expenses.
• [ ] Implement logic to ensure that the user can only apply one filter at a time.

Here’s an example of how to create a new component called CompleteListButton in the components folder:

function CompleteListButton() {
  const [showAll, setShowAll] = useState(false);

//...

  return (
    <div>
      <button onClick={() => handleFilter('income')}>Income</button>
      <button onClick={() => handleFilter('expense')}>Expense</button>
      <p>Total amount: {totalAmount}</p>
    </div>
  );
}

[Miriam-Voelkl]

looks great to me 🐝

[ahohnsen]

Same here: the title is soooooooo long! Remember: it should be short and precise :)