 Hey there! So you had to wait so long for a video today. Today is Sunday as of this recording and it was kind of a long day. My son, Rock, as sweet as he is, he wanted to make some backpacks because he has a real heart for homeless people when he sees them. So we've been constructing these backpacks all day with a bunch of stuff that might be be useful to someone who's experiencing the cold with that house. So we were doing that a lot today and so that's why it is night. It's super dark in this room but I did want to get you a video and yeah so today I'm gonna do something a little bit different. This is kind of just like a maintenance tweak in the course of the regular videos introducing one concept each day. This didn't really fit but I thought since we have a day that's just video I thought I could do it. It's really just like a refactor that I like and I would definitely do in my own code base. So here we go. So first things first, it's day 16 now. I have forked this, you can get that at that code sandbox and then the work that we're going to be doing today is in our Pokemon JS file. Now what I want is we refactor to this where we were taking the ID and we're putting it into the resource. Now that's fine. This is a perfectly fine place for this. I'm sorry, we're not putting in the resource. We're just every time we call this function with render we are sending this to it. And it's fine but it's not ideal. Ideally I'd like to have it in the resource. And that's what we're going to do today. We're going to put this in the resource. So when we fetch the API, when we store it in cache it's going to get stored with all those data on it. Basically going to normalize it for how we need the app to know about it. And yeah, so I'm going to go through that refactor and it's a fairly simple but it does kind of require a couple steps and some syntax that you may not be used to. So first of all, let's see, okay, the app's working, just because I added that dot there. So what we're going to do is once this fetch resolves and we call .json on the response, I want to do another step. So I'm going to chain another then onto it. Now this should work for a while. So I'm just going to kind of go step by step. Now anytime we give it a then we're basically going to give it a function. So there's going to be it's going to take some arguments or no arguments. And then it's going to respond with some block body, right? And typically you're going to have to return something. So in this case, we would take the result. I'll do this long case. We take the result of the previous block. And we would take that and do some type of transformation on it. In this case, we're just doing return result. Now, because of this arrow function, we can actually avoid this return, we just have to remove the block. So we can take that out. Now we are taking the result from the previous block, and we are returning that. So as you can see, the apps all still works, which means that this is not introducing a breakage. This is the same thing that we had before, not returning anything. So what we can do now we know that the shape of this return is an object, right? So we'd like to be able to spread out if we wanted to make some transformations, we can just spread out the results of that on a new object. There is a caveat if we want to take advantage of that implicit return, we're going to have to wrap this in an additional set of parens. Now, the reason that is because it sees this here, and it thinks that it is a block, and then it's expecting the return. So you can kind of see the problem that we get into. However, if we wrap in these parens, then it will, it all works just like magic. So just remember, if you're trying to automatically return an object, like an object literal, just wrap in the parens, it will work. You can also instead do, what is it, put it in another block and say return like that. So then this outside one is the block, and then this is the, if I can get it, this is the object that you're returning. However, you don't need to. So I tend to just do it like this. So there we go. That works. Now, what we want to do is we want to, we want to return a result, right? But inside here, we can see that there is a, there's a property called results. And that's the actual array filled with the data. That's the one that we're mapping on. So we need to return a new results. So let's see, how should we do this? I'm going to reformat this just a little bit. So what we're going to do is we're going to take that and we're going to do another thing. So for the results property, so we're saying spread out everything. But we're also going to, we're going to make some adjustments to results. So for the results property, let's first do results.results. Okay, that should work again. Cool. Perfect. Now, I'm going to change this to res. So the rest of it is not so confusing with the kind of the results plural. Okay, cool. So results works just fine. Now, what we want to do here is we want to add a map onto it. Now map, we're going to take a Pokemon and return a Pokemon Pokemon with some type of transformation. Now again, if we just take it and return it, that's fine. Everything's going to work. This is basically neutral. We've done nothing. However, we'd like to do something we'd like to add an ID. So we're going to do that same thing again. We're going to return a new object literal, we're going to wrap it in that extra print to spread it out. Okay, you see where this is going? That works again. Great. Let's open this up again. And what we want to do is we want to add our ID. Now this is kind of looking similar here. So I'll just copy and paste this and put that here. I can delete it from here now. Okay. So now we're adding the ID when we're caching this, which is great because now I can take it out of here. Now just to show that the ID is what we're using to change the Pokemon, so I can click these and it will change. So that's great. So that works, that refactor has worked. Okay. Now we were spreading out, we were creating a new object and spreading that out. So we can actually take out this and just call render item on Pokemon. That all still works. Yep. Double check. And as a last step, which is really nice, we are mapping, right? But we are taking, we're giving it a new function that takes a Pokemon and then returns render item of Pokemon. Now we can use what is called a point free syntax because render item, let's see if I can find it. We got to go back into our index. Render item looks like this. We take a Pokemon as an argument and we do a transformation to it. We return the Pokemon list item. Okay. Now that looks familiar, right? We take a Pokemon and call our function render, sorry, call our function render item, which also takes a Pokemon and then does a thing kind of seeing we're just adding, inserting a function that we don't really need. So we can do, we can use, it's called point free function syntax I think or something like that. I'm here to basically delete that, delete that. And we know that render item already takes a Pokemon as an argument to do its work. So we can just say like, hey, I don't need to stand in the middle and take the Pokemon and then send it to the function. When you call this function, which you will do inevitably to render on this map, do it with this function, which takes Pokemon, renders a list item. Or returns a list item element. So anyway, all of this still works as you can see. So that's it. We were able to kind of remove a lot from here. And also, the big benefit is that if we were to have other lists or other things that mapped on Pokemon and they needed an ID, well, they'd have to redo that work of getting recreating that ID on their own. Whereas in this case, we are doing that work at the resource level. So now everyone who uses this collection resource is able to have the same data. And that consistency is super important. Yeah. So that is, that's about it. I don't think I would have normally showed you this in this course, but you know, for those of you who are following along via video, I hope it's helpful to you useful to you and maybe working through some other code. But yeah, that's all I got for you. I'll see you tomorrow with a new email.