All right, real quick between you and I, I don't feel great about the little hack we did where we changed the response in the API to make it work for our front end. And so I think we should revisit that. Do you know how to change the likeToggle endpoint response to return the entire collection of Puppys just so that our front end could benefit from it? Actually, I'm going to roll that back to what it was and it was returning just the newly created Puppy,

Actually, I'm going to roll that back to what it was and it was returning just the newly created puppy, which makes more sense in an API where you create a puppy and then you want its data to display the newly created puppy. Alright, so without adapt, this is going to break our ui. Uh, the operation will still work, but I don't think that it's going to reflect properly. So let's like Leah and see what happens. And like I expected, things are broken.

So let's like Leah and see what happens. And like I expected things are broken. Remember how we use setPuppies to set the entire collection of puppies in the main component to what the API response gave us? Well now we've set the entire puppies collection to a single puppy. I'm in the like toggle component here and this is what I mean. We were receiving the new puppies, all of them from the API.

and this is what I mean. We were receiving the new puppies, all of them from the API and then setting puppies to that. But now we just receive a new puppy and actually let's call it updatedPuppy because remember this was a PATCH method on an existing entry. So we need to change our setPuppy call and luckily it's not too complicated. So I'll first receive the existing puppies

and luckily it's not too complicated. So I'll first receive the existing puppies or let's call them prePups. And then remember prevPups is an array. We are going to map over it return prevPups that map. And for each existing puppy, we are going to compare the id of the existing puppy to the id of the updated puppy. So existingPuppy.id. And I'll accept copilot suggestion.

So existing puppy.id. And I'll accept copilot suggestion and we'll talk it through. So we compare the ID between the existing puppy and the updated puppy. If it is the same, that means that this is our updated puppy. So we return the updated puppy, otherwise we return the existing puppy. Let me rephrase that in case that confuses you.

otherwise we return the existing puppy. Let me rephrase that in case that confuses you. So we take all the puppies, we look at them one by one and if they match the updated puppy, we take that updated puppy and replace it in this array and we keep the others as is. So let's go try this out. I am going to like frisk it here and what I'm hoping for is that the heart becomes pink and frist shows up up here.

and what I'm hoping for is that the heart becomes pink and frist shows up up here. Ready? Let's go. Hey, let's try to untangle it. Nice. Seems to work. Let's do Lia. Yep, that works. But now if I try to delete Lia from up here, it is going to break our application once again because once again, we setting the entire puppy's array to one single puppy and that's not right. So let's go fix that. I'll go in the ShortList component.

So let's go fix that. I'll go in the ShortList component and we'll find the place where we delete the puppy. So once again, here we do the same. We expected all the puppies and then we set the puppies to that. So let's change this to updatedPuppy and then do the same logic we've done. So prePups and then we are going to return pre of puppies, do map,

So pre pups and then we are going to return pre of popups, do map, take the existing puppy and then compare it with the updated puppy and return whoever makes sense. Essentially finding the updated puppy in the existing puppies and replacing it in the puppies array. And with that, I feel like I can delete Chase and it's going to go away from here and Yoko as well. And everything works like it did once again.

and it's going to go away from here and Yoko as well. And everything works like it did once again. But this time we didn't hack into the API and change the response to please our needs.