#3 Entry Filter Function

[Melonexx]

Value proposition

As a User I want to be able to filter my income and expense so that I have an overview of my expenses or incomes depending on which filter button i clicked

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.
• [ ] If the user has selected the "Income" button or "Expense," it will be visually highlighted, making it immediately clear which filter has been chosen at a glance.

Tasks

• [ ] Create a new component called FilterButtons in the components folder. This component will render two
• [ ] buttons: one for income and one for expenses.
• [ ] Implement logic to filter the entries when the user clicks the income filter button.
• [ ] Implement logic to filter the entries when the user clicks the expense filter button.
• [ ] 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 FilterButtons in the components folder:

function FilterButtons() {
  const [filter, setFilter] = useState('');

  function handleFilter(filter) {
    setFilter(filter);
  }

  return (
    <div>
      <button onClick={() => handleFilter('income')}>Income</button>
      <button onClick={() => handleFilter('expense')}>Expense</button>
    </div>
  );
}

[jessicareinh]

Bei den Wireframes wird nicht ganz klar, wie die App beim Filtern aussehen soll. Ihr habt die Bilder in den Acceptance Criterias erwähnt, aber leider nicht dargestellt...

[ahohnsen]

Maybe you can add in the Acceptance Criteria, that the selected filter is visually highlighted (e.g. has another color). At least it looks a bit like that in your wireframes :)