In this post, I will go through how I added delete functionality to my WeightTracker app. I will also show how to implement ‘undo’ action on Snackbar with help from Redux Library.  Let’s get to it!

Note: I am using Redux library for application’s state management. If you are not familiar with Redux concept, I highly recommend reading my post about it before going forward.

Delete action

Logic

At first, I implemented the logic behind removing an entry. It is quite straight forward.
I added two actions:

Then in the middleware function I implemented performing request to Firebase:

The only thing RemoveEntryAction does is telling middleware to remove an entry from the database. When it’s done listener gets called and invokes OnRemovedAction which will change our local state.
Next step is to change the reducer method:

When OnRemovedAction is invoked, all I do is remove an entry from the local list and pass a new list to the new state. As you can see, I also pass removed entry and flag confirming that entry has been removed. I will explain it in the next chapter so don’t worry about that now.

At this point, we have implemented whole logic behind removing an entry from the list using Redux and Firebase. Now let’s move to UI.

User interface

In my app, users can delete entry only by going to full-screen edit dialog and clicking DELETE. When I created that dialog (described here) I designed it to return a WeightEntry. However, since I introduced DELETE action simple model cannot contain this information. That’s why my dialog is now returning Redux Action.

Now let’s get into the code. The only change I needed to do in my dialog class was adding DELETE action into AppBar:

What I do is I check if there is WeightEntry to edit, if so I create action containing FlatButton which will return proper redux action. If there no entry to edit (meaning also no entry to delete) I display empty Container instead of Button.

When it comes to invoking result action coming from dialog, I implemented it in following way:

Where removeEntryCallback parameter is (action) => store.dispatch(action);.

Now we have fully working delete functionality using Firebase and Redux. Next step is to allow the user to undo his action in case of a mistake.

Undo action

Logic

To perform undo action, it is required to save removed entry. To do that I added new field in redux state:

I am saving it when weight entry gets deleted (showed 4 listings above).

Then I have to introduce undo action, there is nothing surprising in that:

It’s that simple! I just get the value from state and push it to Firebase. When a child is added, it will call the same listener as in normal addition.

User interface

Now let’s add Snackbar on which user can click the UNDO button. Since every build method is invoked when the state gets changed, I had to store information if snackbar should be displayed. I did it by simply adding a flag to state class:

I set this flag to true when an entry is getting removed.
Then, in actual Widget displaying Snackbar I added the following code:

How it works:

1. When Entry is removed, hasEntryBeenRemovedflag is set up to true and setState function gets invoked.
2. In build function (if the flag is set to true) I create a Scaffold which has action with UndoRemoval which was described earlier.
3. AcceptEntryRemovalAction gets invoked. What it does is change hasEntryBeenRemoved flag to false, so that we won’t show snackbar on every build.

If the user clicks UNDO button, the app adds last removed entry.

What’s worth mentioning is that in order to get Scaffold inside build function (before it’s actually built) I used Future’s delayed method with duration equal to 0.

And that’s it! 

If you are interested in full code, I encourage you to check out my repository. 

Cheers! ?