Okay, let's take a look at an option to refactor our code. So the refactor I want to do is to make our views lighter. So if you look at this component here for PopularGames, you'll see that we have this PopularGames Livewire component, and we are performing some logic here. So here to get the cover, here to add a percent sign, and here to get the systems. Now for an app of this size, this is perfectly fine if you want to keep it like this. But like I said, I want to refactor this to make our views lighter. So in general, for your views, you want to perform minimal amounts of logic in here and have that perform somewhere else if possible. So as for where that logic can go, you have several options as well.

have that perform somewhere else if possible. So as for where that logic can go, you have several options as well. You can put it in a model, but in our case, we're not using models because our information is coming from an API. You can make use of a library, and one that I like using is this spotty Laravel ViewModels package, which allows you to do just that. You have a class specific to just formatting your data, and that gets passed to the view. And I would totally use this, but I can't get it working with Livewire. So in our case, we're just going to do everything within the controller. So let me show you what I mean.

So in our case, we're just going to do everything within the controller. So let me show you what I mean. So let's start with this example here where we are formatting the cover image. So we want this logic to go somewhere else. So here is the class for the Livewire component. And what we want to do is format this because this is what gets passed to the view. So here's what I'm going to do. And if you don't want to use a method, you can extract this to a class. But like I said, I'll just do it in a helper method here. So I'm going to say PopularGamesUnformatted.

But like I said, I'll just do it in a helper method here. So I'm going to say popularGamesUnformatted. And I'll just assign this here. Okay. And obviously, this doesn't change anything. But what I want to do is call a method here to format the output for the view. So let me show you what I mean. So to see what we're doing, I'm just going to dump it. And I'm going to make a method called formatForView. And I'm going to pass in the popularGamesUnformatted.

And I'm going to make a method called FormatForView. And I'm going to pass in the PopularGamesUnformatted. Okay. So now this won't do anything, but we'll see the output here. And obviously, we have to make that method first. So let's do that. FormatForView. And we're going to pass in the games here. So let's pass in the games here. Oh, we did pass it in.

So let's pass in the games here. Oh, we did pass it in. And let me just return the games, but as a collection. So collect(games). So now this should output it when we refresh this. Okay. So there's a dump of the games. And you can see there are 12 of them. Okay. So my goal here is to be able to format these fields and make them available to the view.

Okay. So my goal here is to be able to format these fields and make them available to the view. So there's logic in the view. So this one, specifically this, we want this to happen in here. So let me show you what I mean. So let's map over these games. Say function game. And within here, let me just move this up. I want to return the game we're looping over. And I want to merge, use the merge method on the collection.

I want to return the game we're looping over. And I want to merge, use the merge method on the collection. And here is where we can specify the fields we want to merge with the game. So let me just put a fake one in here, say fooBar, just so you can see what I'm trying to do. So now there should be an extra field for each game. That's foo and bar. So let me refresh this and look at this, look at the first game and each other game. Now there's nine or nine items. And we have this new one called fooBar.

Now there's nine or nine items. And we have this new one called fooBar. And we can even overwrite these ones, which is what we're going to do. So what we want to do is overwrite the, actually, we're not going to overwrite it. We're just going to make our new one called coverImageUrl. And this is where the logic goes from the view. So let's go to our view, let's grab this. And now here, all we have to do is output the new field that we put. So gameCoverImageUrl. And in here, we can just paste that in.

So game cover image URL. And in here, we can just paste that in. We don't need these braces. Okay, let's import String. And if I did that correctly, this should still work. Sorry. Now we can call the formatForView method here that we just made right here. So this formatForView. And that is what's going to get passed through the view. And now you should see that.

And that is what's going to get passed through the view. And now you should see that. And it says it must be an array. So we just have to call toArray at the end of this Collection to convert it back to an array. Okay, let's try again. Cool. And if I just remove that, then we remove the dump now. So we can see what we're doing. Everything should look the same.

So we can see what we're doing. Everything should look the same. But now we've moved the logic to our formatForView method here. So let me put this dump back, because we're going to be working with other fields. And what else in the view can we replace here? So here we're doing just a bit of logic, we're rounding and we're adding the percent sign. So now we can just output the gameRating, and then we'll override that field in our method. Okay, so back to our method, let's say rating here. And here is where we'll do that logic.

Okay, so back to our method, let's say rating here. And here is where we'll do that logic. So actually, we can even incorporate this isSet. So we no longer have to do it in the view. And we can perform this logic in that method. So let me just reinvent this. And we can do it in here. So we have to do is set gameRating. So we'll use a ternary here. Then if it's set, then do that logic, which was rounding it and adding a percent sign.

So we'll use a ternary here. Then if it's set, then do that logic, which was rounding it and adding a percent sign. Okay. And if it's not set, then just pass null. So that should work. Let me get rid of this dump again, see if that works. Okay. And the rating still works. And the last thing I want to take care of is this platforms. So let's go to games.

And the last thing I want to take care of is this platforms. So let's go to games. And instead of all this logic, let's just output platforms here. So let me just copy this or cut it. Let's just say platforms here. GamePlatform. Sorry. And let's put that logic in here. So we are going to make a new key called platforms. And what we want to do is collect the game platforms.

So we are going to make a new key called platforms. And what we want to do is collect the game platforms. And let's just see what this gets us. So let's put this dump back. Actually, let me make it a die and dump for now. And let's take a look at platforms. So we have an array. Let's look at one that has more than one platform. So this one should have, that's only one as well. Let's take a look at this one.

So this one should have, that's only one as well. Let's take a look at this one. So this one has three. So each one of these is a platform. But all we're interested in is the abbreviation. So what we can do is make use of the pluck method. So let's pluck the abbreviation. And let's see what we get here. So I believe that was the third or fourth one. Say four.

So I believe that was the third or fourth one. Say four. No, it was the second one, sorry. So now we have just an array of the systems. And that's what we want. So now we can just call implode, which will put a character in between those. And the character we want is a comma with a space. And that should work. And we are outputting that in the view. So hopefully this still works.

So let's put that back. So for this. So this is a rating. So let's put the conditional back. So all we have to check is if the gameRating exists. So gameRating. And this goes at the end here. And that should do it. Okay. And that should only show if there is a rating.

Okay. And that should only show if there is a rating. Cool. So we can do the same thing for the other components here. It is outputting the same data, basically. So the refactor will be pretty much the same thing. So I won't make you watch me do that. But I will show you when I'm done editing it behind the scenes. Okay. So I refactored the other three components here.

Okay. So I refactored the other three components here. So let me just show you. So recentlyReviewed is basically the same thing as popularGames. You see that we are getting the coverImage, the rating, and the platforms the same way we did it for popularGames. And I forgot to make this private since it's just a helper method. And I've done that as well in here. So the other one is mostAnticipated and comingSoon, which are basically the same thing. So let's take a look at mostAnticipated.

So the other one is most anticipated and coming soon, which are basically the same thing. So let's take a look at most anticipated. We're just formatting the cover image URL, but now it's a cover small and the release date we're formatting it using Carbon. So yeah, that's basically it. Now our views are lighter and any logic that we need to perform goes in this helper method here. So we still have to do the same thing for the single game page. And we will continue this in the next video.