-
All right, now if you recall back to when we first started this module inside of our organizations controller for our settings page,
-
within the index method for this controller, we are specifying all of the pages prop data as asynchronous methods within here. If you recall way back to the beginning of the series,
-
whenever we were discussing inertia's features, you might recall that by providing our page props as async methods, this allows us to partially reload our data from our client.
-
And in this lesson, we're gonna apply that to our page. Now, in terms of posting up data and redirecting back to this page, like we're doing with all of our operational actions, that's not going to apply here.
-
We need to refresh all of the data in that case, because in that case, inertia is going to behave like a standard monolithic application. But if we wanna add something
-
like a refresh functionality to this, we can partially load specific props that we specify from our client. So inside of our organization users table,
-
if we add in a refresh button, and we just want to refresh the user prop, we can do that. Same here with our invitations.
-
So let's go ahead and dive into our organization user card. And within our card header, let's wrap the contents of that header in a div.
-
Give it a class, flex, justify, between, and then another div inside of there and plop the card title and description inside of that div. Add one additional div,
-
and this is where our refresh button will reside. We can give this button a variance of ghost and a size of small. And we also want to cascade the click event to child.
-
Inside of the button, we'll add in a link component from inertia. So we'll end that link out there. And inside of our link, we can add in a refresh icon.
-
We can go ahead and use the counterclockwise one. Give it a class, width three, h3, margin right two, and then add in the text refresh. Now, since all that we wanna do on this click
-
is redirect back to the exact same page that we're on, we can go ahead and omit the href from the link, and it will automatically use the current page as that href.
-
So let's go ahead and tack on the preserve scroll so that our users don't jump up to the top of the page whenever they click this button. And let's go ahead and stop there, give this a save, jump back into our browser and see what this looks like.
-
So we can see our refresh button right here. If we go ahead and hover over it in the bottom left-hand corner, you can see it's pointing to the current page that we're on as we expected. Let's give it a click, and you'll see very, very quickly
-
that it refreshed our page. If we go ahead and right-click, and we can see this a little bit better if we inspect and dive into the console, you see all of our hot module reloads going on there.
-
Let's go back to our refresh button, give it one more click. All right, cool. There's our GET request going out, refreshing our page data. If we dive into that GET request, take a look at the response, we can see all of the prop data
-
that's being included with this refresh, which includes our user, our errors, exceptions, messages, all coming from our shared data from within our inertia configuration.
-
And then we also have our organization and organizations coming from our organization middleware. Lastly, that leaves us with our users, invites, and roles coming from this specific page props
-
inside of our controller. So when we click our refresh button here, it's pulling all of this data back down, but let's say that we only want this to include just our refreshed organization members
-
for this specific table, since the refresh button is specific to this card. In that case, what we can do is jump back into our text editor here and add the only prop onto our link.
-
Within here, we provide an array with the prop keys that we only want to reload whenever we click this button. So for us, that's gonna be the data that we're looping over inside of this specific card,
-
which is our users. So if we go back up into the only prop, tack our users into there, give that a save, let's jump back into our browser now. You see our hot module reload took place.
-
So we can go ahead and click refresh one more time. We see our new GET request go out. Let's take a look at the response for this now. And you'll see here, it's only including our users array.
-
Every other prop that's not users is being omitted, including what's coming from our shared data and middleware. So awesome, that's behaving a little bit more like we would expect a refresh to do
-
specific to our organization members. If we add that to our organization members, it only makes sense to also add that to our pending organization invitation. So let's go ahead and do that as well.
-
We can give this whole button here a copy, dive into our organization. Let's see, what do we call this? Invite, user invites card right down there. Okay, let's wrap the card header contents
-
inside of a div class flex justify between, and that div out, go ahead and add one more div into there and then move our card title and description up into that div.
-
And then add ourselves one more div there for our button and plop our button inside of there. Now for this button, we don't wanna refresh our users, but instead we wanna refresh our invites.
-
So we'll swap users here with invites and everything else can remain the same. And we also need to import our refresh component there from Lucidview next.
-
So let's go ahead and do that, give that a save, jump back into our browser, see our hot module reload go on and we see our refresh button now right up here. If we give that a click, jump down into that request and its response.
-
And we see that just our invites is loading in whenever we refresh this data. If there's more than one prop that you need to refresh with any one action here, we can also do that as well.
-
So let's say that we need to pull in a fresh roles array. Whenever we refresh our invitations, we can add that into our only array. And now whenever we click refresh,
-
let's dive down into that new request and its response. And you'll see that we now get back both our invites as well as our role information.
