fix bug on delete list

[ocsiddisco]

Description

When deleteing a list, the modal did not close and stayed in loading state.

Type of Changes

Bug fix

Updates

Before

After

Testing Steps / QA Criteria

Note: I am encountering issue with the new firebase config and can't loggin to the app. You may encounter the same issue and may not be able to test it right away.
(I worked on the bug, with the previous config)

• pull ce-bugDelete
• delete a list

[github-actions]

Visit the preview URL for this PR (updated for commit 51abfa0):

https://tcl-71-smart-shopping-list--pr79-ce-bugdelete-rq81u9tw.web.app

_{(expires Wed, 29 May 2024 15:07:57 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4}

[borjaMarti]

Ahhh I didn't know this bug was present. It has to do with how the loading state is implemented: the intent is that after confirming deletion, the loading spinner is shown. Once the list is deleted, the modal should disappear (and initially it does), but because the close state isn't modified, it reappears later when opening another modal.

No idea why that is. With your fix, we lose the loading state and we can still see and interact with the deleted list until the Firestore is updated and it triggers a re-render, but I think it's a better solution for now unless we find a way to fix the loading state not triggering a modal close.

Anyways, thank you for the fix!!

[ocsiddisco]

Ahhh I didn't know this bug was present. It has to do with how the loading state is implemented: the intent is that after confirming deletion, the loading spinner is shown. Once the list is deleted, the modal should disappear (and initially it does), but because the close state isn't modified, it reappears later when opening another modal.

No idea why that is. With your fix, we lose the loading state and we can still see and interact with the deleted list until the Firestore is updated and it triggers a re-render, but I think it's a better solution for now unless we find a way to fix the loading state not triggering a modal close.

Anyways, thank you for the fix!!

Thank for the review! I did not notice we could still click on the button list, I could not let it this way 😅 I pushed a new commit tonight, with deleteList as an async function. Let me know if you notice anything with this update. @borjaMarti

[borjaMarti]

Thank for the review! I did not notice we could still click on the button list, I could not let it this way 😅 I pushed a new commit tonight, with deleteList as an async function. Let me know if you notice anything with this update. @borjaMarti

Hey @ocsiddisco! Unfortunately, the problem still persisted...

After much tinkering, I think I've found a solution: passing setOpen and setSubmitted to the deleteList function. This way, when we first execute handleDelete, the loading state is rendered, and the firebase.js deleteList function is asynchronously called (meaning state updates are handled at different times). After the info is updated on the database, setOpen and setSubmitted are called, closing the dialog.

I'm going to commit it to this branch so you can check it out. If it's no good, we can revert the changes.

[ocsiddisco]

After discussing with Borja, I am pushing another commit that keeps the set state within the DeleteList component.