Managing the Blog

Flashing Ourselves/Providing Visual Feedback - Part Two

Summary

Coming soon.

Transcript

Alright, so before we create the toast component, we need a way to extract all of the flash messages in our view. So just as we did with the app context, with this extract app, we can create another one called extract flash messages. And this one is not going to be app context, it's going to be flash context, not flash key, but flash key, flash message, also return a flash message, and return an empty flash message if we couldn't convert it. Should we call this? Yeah, let's just call it flash context, that's probably fine. Then in our views, we can now create a toast message dot temple, and we are going to be creating a package views. There we go. And the component is going to be toast base. It's going to take a T type string, which is the toast type, flash, which is going to be the context.flash. Nope. Context. Flash message. And there we go. Now, this is going to be a div with a bg base 300, rounded, border. And we want the border to be white with a little bit of like half opacity, flex, flex call, and let's make it a width 72. And I didn't succeed in using emit for this, let me just, so what we have bg base, we have rounded, we have border white, and we want border white slash 50, and flex and flex call with width 72. Now, the toast is going to be having like a header that has a success color or info color or basically whatever color depending on the type it is. And then it's going to say the time since it was posted and then a little X to close it with the actual message. So nothing really new for that part is going to go into this. So let me just quickly copy paste this here. And I can see I have added this carbon. Let me just see if we can get it in and then we will add it to our go.mod file. Carbon is basically a way that's really easy to work with timestamps. So they have a lot of, basically not only timestamp, but timing go in general. They're very nice to make these like this for humans. So it was instead of saying like the specific time, it will say like three seconds ago, five minutes ago, whatever. It is very nice to work with. And we need to go out and say go mod tidy should now hopefully be included. There we go. Then these toast should not live on forever. They should show for a certain amount of time and then they should disappear. And for that, we are going to be implementing Alpine JS. So copy paste this and all of these methods is basically Alpine JS. So we have a show. So this is just an object with an attribute show set to true. And we show if show is true, then we have some transitions here. So we'll ease in and out. Finally, a timeout. So this will show for eight seconds and then it would also remove itself. Or if you click the X button, then it will also close itself. So this is our toast base. Now we just need to create all of the different versions. So template toast message takes in the flash context toast message. And in here, oh, I misspelled this, did I? Toast. Toast message, right, is flash message. Flash message. I'm going to say switch flash type. And if it's a context dot flash success, then we would return toast base with BG success and a flash. So we're going to repeat this for the other type, flash info, BG info, flash warning, BG warning, and then lastly, error, BG error. All right. Now in our dashboard base here, we can at the bottom here create a div where we will simply loop over the flash messages that gets put into the context. And we're going to be using app so loot, bottom five, and right five so that it gets put down in the bottom right corner. And in here we're going to say for flash in range contexts, extract flash message, pass the context, then say toast, toast message, and then flash. All right, we need to import context. Go.Extract.Don't we have extract flash messages?There we go.Nope.Okay.Ah.Yes, we are going to be having multiple, right, no, and now we simply just need to add some help on it and start adding the flashes and we can start to get some visual feedback whenever we do an operation in our dashboard.

Early Access

$95 $65 USD

Get access

Invoices and receipts available for easy company reimbursement