Now one thing we should focus on is providing a bit more feedback to the user. And here's what I mean. Have a look at the profile page. If I click on follow, well yes, the button text will update, but again, it's just not immediately clear. Uh, generally I'd wanna see some kind of confirmation in the form of a flash message. So let's implement that. Now, let's start within our ProfileController and write down in the follow method.

Now, let's start within our ProfileController and write down in the follow method. Yeah, let's say after you follow a User, I'm gonna redirect back and I'm going to include a one-time flash message. We'll give it a key of success and we'll say you are now following. And how about profileHandle? Okay? And then when we unfollow a person, we can say, you have now unfollowed that handle.

And then when we unfollow a person, we can say, you have now unfollowed that handle. All right, good enough, maybe not, not so exuberant. In that case, we'll use just a period. Okay, so this will work, but think about it. We're working with Inertia here. So how exactly do we pass a value in the session to the front end? Well, if it should be available globally, why don't we reach for the handle inertia requests, middleware

Well, if it should be available globally, why don't we reach for the handleInertiaRequests, middleware handleInertiaRequests. And if I scroll down, currently we just have one for auth. So let's do another one for flash. Okay? So we have success at the moment and yeah, what I can do is reach into this session and I can do that via the request object. And then I'm going to get, uh, whatever is in the session for success.

And then I'm going to get, uh, whatever is in the session for success. And what we can do is if there's nothing in there, then we can default to false. Okay? So now we have a success key that will be shared and sent to the front end. Lemme show you back to the browser. Let's hit unfollow. And now if I open up view dev tools, take a look, we'll go to our show page. Here are the shared attributes.

we'll go to our show page. Here are the shared attributes and for flash, sure enough, you have now unfollowed this person. Okay, great. So now we just need a component that looks for that value and renders it on the screen. Let's go into layout.blade.php. And yeah, we could put this right at the bottom. Why don't we call it flashMessaging or messages? All right, let's create that. Now I'm gonna add a new component within

Why don't we call it flash messaging or messages? All right, let's create that. Now I'm gonna add a new FlashMessage within the components directory. Yeah, just flash messages is fine for me. Next, I'll come back and let's make sure we import that. Okay? So yeah, at the very least we would have something like this, a flash message and yet generally what you wanna do with these things. Um, and actually some people aren't fans of flash messaging. I will tell you that right now they think it's not

Um, and actually some people aren't fans of flash messaging. I will tell you that right now they think it's not great for accessibility. Nonetheless, it's quite common. So I'm gonna show you anyways, we could fix this to the, I don't know, the bottom, mostly the bottom, mostly the right uh, portion of the screen. Maybe we can give it that pixel. Yellow color, possibly text wide, I dunno, make it rounded. Maybe a little padding on the top and bottom and the left.

Yellow color, possibly text wide, I dunno, make it rounded. Maybe a little padding on the top and bottom and the left and right, you know, something along those lines. Okay, so now if I come back to the browser, this should just display no matter what, right? Come back and yeah, you can see it in the bottom right. Cool. So now I want this to read any existing flash message. Let's do this within our script. Let's define our flashMessage as a view ref. And then we can bind to

Let's define our flash message as a view ref. And then we can bind to that, like so. And then what we should do is perhaps watch and check if we have an updated value here from the server. So I can use a watcher for this. I can say watch, and we're gonna say, all right, use the inertia page. I want the props. We have it in a flash key ride. We called it success.

I want the props. We have it in a flash key ride. We called it success. And when that changes, uh, why don't we update this value here. So let's call a function like flash or something just to clean this up. All right, we'll have our flash function. This will accept a message. The first thing I'm gonna do is assign that message to the flashMessage.

The first thing I'm gonna do is assign that message to the flash message. So yeah, if nothing else, I think this would work. Let's come back. I will hit flash. That creates a new flash message. The owner picks up on that, it assigns it here. Of course that changes. So view will re-render this text and sure enough, you are now following this person. If I click unfollow, that will create a new, um, value in the session and that will update on the fly.

If I click unfollow, that will create a new, um, value in the session and that will update on the fly. Okay, so now at this point, it's just a matter of how we want to present it, how we want to hide it, right? Uh, and also when we should and should not display it. So for example, if I just hit refresh here Yeah, it's still displaying even though we don't actually have a message. Alright, let's fix that. Perhaps we could initialize $flashMessage to false.

Alright, let's fix that. Perhaps we could initialize flashMessage to false and yeah, can we just get away with saying, look, if we have a flashMessage at all, then render it. Otherwise don't. Now if I were to come back, yeah, I'm not gonna see anything at all unless we actually physically have a flashMessage. Great. Okay, so now I just want to maybe hide it after a handful of seconds. Easy enough. Let's do this.

after a handful of seconds. Easy enough. Let's do this. After we assign the flash message, we could do a setTimeout. And perhaps at this point, maybe after a few seconds, we could set the flash message back to null or false. Maybe do it after four seconds. Yeah, I mean, that would be one option. Uh, another option would be to separate it.

Yeah, I mean, that would be one option. Uh, another option would be to separate it. Uh, we have a flash message, but then we also have a boolean like show. And we can, we can, uh, toggle that show value to determine whether or not we display it. That would work as well. Nonetheless, let's give this a shot, unfollow 1, 2, 3, 4, and it disappears. Uh, that would be an option as well.

1, 2, 3, 4, and it disappears. Uh, that would be an option as well. Yeah, so if you wanna do the boolean approach, you would just do something like this. What show would be a ref like this? And then you could say, well, if we have a flashMessage and we should show it, then uh, well show it next. Um, after four seconds or so, showValue would be false. Yeah, or just we're just separating that ounce.

or so, show value would be false. Yeah, or just we're just separating that ounce. Uh, and that'd be fine too. So now, yeah, if you want is we could create a transition. We could maybe slide it in when it when it appears, and then slide it out when we're done. And I'll show you an example of this. Let's wrap this whole thing within a transition tag. Yeah, maybe something like this. Uh, we're just applying tailwind utility classes, uh, at,

Yeah, maybe something like this. Uh, we're just applying tailwind utility classes, uh, at, at certain points in the lifecycle. Very quickly when we are entering, we're gonna transition over the course of 300 seconds and we're going to, uh, start with opacity of 0. And we are pushing it to the right off the screen. But once it arrives, we set the opacity to 100. And then once it leaves, we start at 100, and then we go to 0.

And then once it leaves, we start at a hundred, and then we go to zero. And then again, we, we transition it back outta the screen. All right, just one way to do it. So I'll, I'll reformat come back, let's give it another run and we don't see anything. Oh, right. If we're gonna add that show Boolean, we would also need to set show to true as well when we call flash. Anyways, let's try it again. Unfollow, and now it slides in.

as well when we call flash. Anyways, let's try it again. Unfollow, and now it slides in. After a couple seconds, it quickly slides back out and yeah, that's the way it's done. It's really quite easy.