#10 list-page: delete multiple list-items 💥

[philmetscher]

Value Proposition

As a user I would like to have the possibility to delete multiple entries at once, so i don't have to click on edit for each entry

Description

Acceptance Criteria

• [ ] show checkbox for each list-item

• [ ] display overlay, if user checked one checkbox

• [ ] show a modal-box, if someone clicks on the delete button

  Tasks

• [x] create feature feat/delete-multiple-listitems

• [x] add a state to check if any checkbox is checked

• [x] add a checkbox to each listItem with an Icon component (checkbox) as mask

  • [x] add Icon component (checkbox-filled) as mask for checkbox:checked state
  • [x] add a function which updates the list-item checked state, if any checkbox is checked

• [x] create an blurry overlay Modal-Box component, which is hidden (conditional rendered) by default (for the delete functionality)

  • [x] add warning text

• [x] if the list-item checked state...

  • [x] ...is true: render two NavLink components(unselect all & delete all) inside the NavList

  • [x] add a function for the NavLink component(unselect all) to unselect all checkboxes

  • [x] add a function for the NavLink component(delete all) to delete all checked list-items and update the Database (in that case localStorage)

  • [x] ...is false: render the default NavLink component (new entry) inside the NavList

[Mark-Krensel]

• Suggestion: use conditional rendering instead of display: hidden with this: create an blurry overlay Modal-Box component, which is hidden by default (for the delete functionality)
• also I don't think there are official NavLink components in next js

But the user story seems like a good one :)

[philmetscher]

@Mark-Krensel i do use conditional rendering :) I'll rewrite this for better explanation. The NavLink components are created by me in some user-stories before :)