All right, let's finally use this data that we've been creating and shaping up up to now and use it to display on the actual UI from the app. So we've seen that we have all the data in the shape that we need to be able to display the nice list of cards of puppies. So let's go and remove all this placeholder stuff and focus on the real deal. In the welcome.tsx template, I will remove the pret tag.

In the welcome that TSX template, I will remove the pret tag. I will also remove Theano list demo. And so we're back to the original state of the app where we have a loading spinner. And then when the data is fetched, it's rendered with the Suspense boundary. And the only reason we need that loading spinner is because in this app the data is fetched from the client. So we try to not block the whole page rendering by rendering

because in this app the data is fetched from the client. So we try to not block the whole page rendering by rendering what we can and wrapping the data fetching in a Suspense boundary. And so we have that loading spinner while it's fetching it from the API and then we can display it when it's back. But now with Inertia, we are going to have all the data ready on the server. So when we render the page, it's immediately here. Okay, so we are going to drastically simplify this.

So when we render the page, it's immediately here. Okay, so we are going to drastically simplify this. I am going to remove the error boundary and the suspense with the loading spinner fallback. And we are just going to keep the main tag here. So all of this goes away and all of that goes away. So we have a header, which is just the logo and then the main part of the app. So the page should still work, but now we won't render the page immediately.

So the page should still work, but now we won't render the page immediately and have a loading spinner. The entire page is going to wait until the data's here. So if I refresh the page, you can see we have a blank page until the data arrives. And well that's because we still fetching the data from an external API on the client. So now we are going to replace this data, which is from an external other API.

So now we are going to replace this data, which is from an external other API to use our actual in-house data that we've created up to this point. So check this out. We have all this complexity where we were using the getPuppies, which is where we fetching the data from the API and we get that using the use function. And then we put this in states.

and we get that using the use function. And then we put this in states. So I don't even think that we are going to use states anymore for the puppies. And the reason I'm saying this is we now have a really strong bind between our front end and our backend through Inertia. And so we don't really need to try to have some state on the front end that represents what the backend should be.

to have some state on the front end that represents what the backend should be. And then every time there is some action, we should kinda update the state accordingly. We can directly fetch the real estate from the backend, much more easier than with an API. So I think that we are going to get rid of the whole puppies and set puppies state. Uh, so things should be drastically simpler. Really, the only problem

Uh, so things should be drastically simpler. Really, the only problem with removing this state is we are going to break the entire app because it's relying on these puppies and set puppies. So eh, I might keep it for now and slowly transition out of it. But what we wanna do for sure is get rid of these used puppy promise. And so also remove that.

of these used puppy promise. And so also remove that and instead, well, we will receive the puppies from the inertia response here. Remember? So let me remove the unnecessary imports. So what we want to do here is pass the puppies to the main component from the page component, like so. So here we will receive the puppies, which is an array of puppy, and we have a naming collision. So, eh, you know what? Let's pass it as pups here.

of puppy, and we have a naming collision. So, eh, you know what? Let's pass it as pups here. So we receive pups. And so what we wanna do, like I said, we're going to get rid of this, but let's keep it for now. So the puppies that are passed through the application are going to be set as a default value to the pups. And I need to update this here as well. Alright, so quick recap just

And I need to update this here as well. Alright, so quick recap just to make sure you're not getting confused. We have removed the error boundary and the suspense boundary from the application because now the puppies are coming from the server in the inertia response. And so we receive these puppies in our Page component and then we pass them to the main component here where we receive them.

and then we pass them to the main component here where we receive them and set them to stage temporarily here. So I feel like our app should work again. And what I'm expecting this time is the page to render instantly because the data comes from the server and we don't have to fetch it from the client. So when the Inertia response comes, the data is here with it and it's available immediately. All right, moment of truth, I'm going

and it's available immediately. All right, moment of truth, I'm going to hard refresh the page. And as you can see, no loading spinner. The data is here instantly. And this is the actual data from our API. Remember we had liked the puppy one, three and six and let's verify that. In fact, this is the actual data by adding one more puppy, number four to the puppies that user one likes.

In fact, this is the actual data by adding one more puppy, number four to the puppies that user one likes. And if I refresh, we now have four puppies. So it is working and Yoko has been added to the list. So we've simplified our application code here. We don't have the suspense boundary anymore. We are not fetching the data from the client, which means that I can go in the queries file and I can get rid of this, getPuppies function because we are not using that anymore.

and I can get rid of this getPuppies function because we are not using that anymore. Now if you look at this UI, you might be tricked to believe that everything is working. Uh, it looks like it's all fine and working, but really what's happening is it's only working as a read-only application. The update, the create, the likeToggle is all happening still on the different API. So perhaps it's going to work if I try to like Ross,

the like toggle is all happening still on the different API. So perhaps it's going to work if I try to like Ross, it's might actually work. But the trick is if I go here, you can see, uh, Russ, if I refresh the page, what do you think is going to happen? Have a little think about it. The reason it's been added to the short list is because we set the puppies to states, but we have technically done this dislike toggle to the other API that's not part of this Laravel Inertia app.

but we have technically done this dislike toggle to the other API that's not part of this Laravel Inertia app. So when I refresh the page, we are going to get the data from our in-house data where we haven't liked the Ross pu. So what I'm expecting is Ross here is not going to be part of the liked puppies for the User one Simon, when we refresh the page. So let's give it a try. Take a look at Ross here. I'm going to refresh the page and Ross is gone.

So let's give it a try. Take a look at Ross here. I'm going to refresh the page and Ross is gone. And even further, if I try to like Ross now I think it's gonna go a loading spinner and go back to Unliked because Ross is technically liked on the API, but we don't know that. So if I try to like it, it should be back to unliked. And if I try one more time, it should go back to like, so that's behaves like a bug,

And if I try one more time, it should go back to like, so that's behaves like a bug, but it actually works exactly like it's meant to. It's just talking to a different API, which is super confusing. So let's fix that next. And so what I'd love to stay in UI land for a bit longer here, I think we should really instead go and beef up the User story. So we are gonna allow users to create accounts a bit easier.

and beef up the User story. So we are gonna allow users to create accounts a bit easier by having in the header a login, logout, signup sort of buttons. And maybe we'll see a series of users with different liked puppies. So we have some data to play with and that's going to allow us to treat this feature a little bit more realistically so we can decide who should see.

to treat this feature a little bit more realistically so we can decide who should see. Even if you lucked out, maybe you should not even see the liked puppies. You should definitely not see the short list here. If you don't have a User account, it makes no sense. So this User accounts consideration is gonna help us make the app feel a little bit more realistic, and then we can really dive into CRUD operations, which are tied to the User.

bit more realistic, and then we can really dive into CRUD operations, which are tied to the User. I will see you in the next video where we start this process.