Sessions. Sessions is what brings us together today. So yeah, we're talking about sessions, because we want to be able to persist values across multiple pages. And we've kind of talked about this before with the URL attribute, which why is that commented out? I don't remember commenting the whole thing out, but we'll get rid of history and there we go. So the URL attribute was very useful because it allowed us to persist a value across multiple pages, but it was part of the query string. And most of the time, we don't want that behavior. We want to be able to persist a value, but we want to hide it from the user. And of course, that's where the session comes in. And Livewire makes it very easy to use the session in our components. We just apply the session attributes to whatever property we want to persist, and that's it. I mean, we are done.

makes it very easy to use the session in our components. We just apply the session attributes to whatever property we want to persist, and that's it. I mean, we are done. So we are storing the showOnlyPublished property in the session. That means when the user clicks on showPublished and then refreshes the page, well, it is still going to show only the published articles. And as long as that session value doesn't change, that is exactly what they are going to see. But of course, if they click on showAll, yes, all of the articles are displayed in the page. But if they refresh the page, it still loads all of the articles. Now, Livewire will generate a dynamic key for the session value. But if you want to provide your own, just pass the key parameter and we can call this published. Now, of course, this is just for the session. Inside of our component in view, we still

you want to provide your own, just pass the key parameter and we can call this published. Now, of course, this is just for the session. Inside of our component in view, we still use the showOnlyPublished property. And that's it. It's very easy to use. Just apply the session attribute to whatever property that you want to persist, and you're done. There's nothing else that you have to do. Now, of course, do be aware, this is using the session. So don't go crazy and store everything in it because that is going to affect your application's performance. So follow all of the rules and guidelines that you would normally follow. It's just that now we are doing that very easily inside of our component. Well, let's use the rest of this episode to change the UI because whenever we click on showPublished or showAll, you know, it's not really clear as to which set of articles

Well, let's use the rest of this episode to change the UI because whenever we click on show published or show all, you know, it's not really clear as to which set of articles are currently loaded. And we can indicate that by just changing the classes applied to these buttons. And first, I want to address these two methods. So originally, I have these two methods to show all of the articles and then show only the published. I think now is a good time to go ahead and just consolidate them into a single method. So we'll have a method called togglePublished. We'll have a parameter, which we can call showOnlyPublished. We will use that value to set our showOnlyPublished property. And then we will reset the page and that's going to be it. Of course, inside of the view, we need to make that change. So whenever we show all, we are going to pass false. And whenever we show published, we

the page and that's going to be it. Of course, inside of the view, we need to make that change. So whenever we show all, we are going to pass false. And whenever we show published, we are going to pass true. And so now let's address our classes. Let's use the class directive because I think that's going to be the easiest or maybe not the easiest, but it's definitely going to be clearer, at least in my opinion. So we will have our class directive. There are some classes we always want to apply, such as the text color, the padding, the background color is going to change. So let's take that out. And this is the button for showing all. So let's do this. We'll say that the default background is going to be gray. And for this button, we want it to be gray when show only published is true. Otherwise, we'll use the blue background when that property is false or not true. And then we can essentially just

button, we want it to be gray when showOnlyPublished is true. Otherwise, we'll use the blue background when that property is false or not true. And then we can essentially just take this class directive. We can copy it and paste it in for our other button. But now we need to change this. We can either change the colors, which I guess that would be consistent. So when it's true, it's blue. When it's false, it's gray. That follows the same pattern as true is first and then false a second. But of course, it really doesn't matter. It's going to work regardless. So we can see that all of the articles are being displayed. So that is what is currently being shown. But if we showPublished, now we indicate to the user which set of articles is used. And that's it. So not only did we improve the user experience, but we used the session to do that. All we needed to do was apply

to the user which set of articles is used. And that's it. So not only did we improve the user experience, but we used the session to do that. All we needed to do was apply the session attribute to a property inside of our components. And that's it.