51 | add confirm delete modals

Why not just using a confirm modal since we're using Mantine?

If not (because that could be too limited), why even not using a confirmDeleteModal using the context Modals which helps (a lot, actually) simplifying the callbacks.

You don't need to add a state variable to save which item you clicked and then if you have one selected you open a modal, then you have to remember about removing the saved item locally after deleting it... you just need to add a dynamic callback to the button

PseudoCode:

const clickHandler = (item) => () => {
  modals.openContextModal({
          modal: 'deleteConfirmModal',
          someTitle: 'here you can customize the modal',
          innerProps: {
            onConfirm: () => console.log("item deleted");
            onCancel: () => console.log("item not deleted");
          },
        })
};

const clickHandlerWithConfirmModal = (item) => () => {
  modals.openConfirmModal({
    title: 'Please confirm your action',
    children: (
      <Text size="sm">
        Some message here maybe
      </Text>
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel' },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => console.log('Confirmed'),
  })
};

{items.map(item => {
  <Button onClick={clickHandler(item)} >delete custom</Button>
    <Button onClick={clickHandlerWithConfirmModal(item)} >delete confirm</Button>
  })
}

intesys / ytestbook

51 | add confirm delete modals #54