Alright, in the last video, we figured out the request part, so that when we click something, we send a request to the server with all the data that the server needs to do stuff. Now let's figure out the response part, when we handle that data, do stuff with it, and send the right stuff back. So let's do that. We got our snapshot out of the front end, we're listening for a click, and then we're sending this fetch request to our Livewire endpoint with the snapshot and the method that we want to call. So let's go into our routes file, and let's build it out. Here's our Livewire endpoint, I'm going to get rid of everything in here, and we're going

So let's go into our routes file, and let's build it out. Here's our Livewire endpoint, I'm going to get rid of everything in here, and we're going to start from scratch, and just map out what we need to do. So if you think about it, like the goal here is to call a method on a component, right? But to do that, we need the component. So first, we need to get a component, I'm just going to leave my typing errors, get a component from a snapshot, okay, and call the method on the component, then get the or whatever, turn the component back into a snapshot and get the HTML. Then send that stuff to the front end. That's what we need to do.

Then send that stuff to the front end. That's what we need to do. Those are the four steps or the three side, I don't know, whatever. That's what we need to do. So the first thing we're going to do is get a component from the snapshot, take that class data and the data and turn it back into an actual PHP class. So let's write out what we want our ideal API. To me, it's component equals and then use our Livewire class that we've been working on to make a method called fromSnapshot, where we can just pass in the snapshot data. And then this method will know what to do, it'll new up the class, it'll set the right

on to make a method called from snapshot, where we can just pass in the snapshot data. And then this method will know what to do, it'll new up the class, it'll set the right properties on it. And then it'll give us this component. And then let's just start with that. Let's implement that. And then we'll come back here and we'll keep going to these different bits here. So let's open up our Livewire class. Whoops, let's do that in a separate pane here. Okay.

Whoops, let's do that in a separate pane here. Okay. And so we have initialRender. And now let's add a new method right after initialRender. And that's going to be fromSnapshot, right, okay. Pull the snapshot in. Okay. And then yeah, so what we're doing here, we're going to get a class out of the snapshot. So we'll say class equals snapshot.class. And then we'll also get the data out of the snapshot, the data.

So we'll say class equals Snapshot class. And then we'll also get the data out of the snapshot, the data. Okay. So now taking that we want to turn the snapshot into the class, we're going to do what we've done earlier, which is new Class to get the component or the php instance. Now we have that component. We're almost close to just being able to returning it, but we need to actually set these data properties on the component itself. So this could be anything. This could be count equals 6, and we need to loop through these and set each property.

So this could be anything. This could be $count equals six, and we need to loop through these and set each property that's contained in here on this component. And that's fairly simple. We could do it in a foreach loop right here. But to kind of keep consistent, we have this getProperties. Let's create another function and let's call it setProperties, where we pass in the component and then we pass in a list of properties. And then inside of here, we can loop through all of the properties, their keys and their values.

And then inside of here, we can loop through all of the properties, their keys and their values. And then we can take the component and set each key to each value. All right, so let's do that. Okay, componentKey equals componentValue. This sets the properties, we can just call this here, we'll say setProperties, pass in the component and pass in the data. Okay, and that's that our basic little fromSnapshot function, we pass in the snapshot, we do everything we need to do. And then we return out the component.

we do everything we need to do. And then we return out the component. So this should be working. And let's just dd this to make sure that we're on the right track. We'll check this in the front end. Okay, so we hit this plus, we look at what we got back. And there it is, we have app counter with a count of zero, because that's the data that we sent to the server is that the count should be zero. All right, the next step is to call a method on the component. So let's do that.

All right, the next step is to call a method on the component. So let's do that. Let's say if request, call method, because we don't, we might not always want to call a method, there's other types of requests. So maybe I'm anticipating that if we have a call method request, which is going to be the method. So let's just set that as a variable, then we can make another method. So we could just call it directly in the controller. But I'm calling this a controller. But I'm trying to keep everything Livewire related inside of this Livewire class.

But I'm calling this a controller. But I'm trying to keep everything Livewire related inside of this Livewire class. So let's create a new method on the Livewire class called callMethod, where we pass in the method. And then this callMethod method does the method calling. Did I say method enough? All right, let's add it down here, function, callMethod, pass it in. And then we take Oh, we actually need the component as well. So we'll need to pass in the component and the method. And then this is like world's easiest method ever.

So we'll need to pass in the component and the method. And then this is like world's easiest method ever. You just get the method and call it. And there it is. Okay. So let's change this so that we're actually passing in the component instance. And there we go. We've called the method. Okay, so two steps done, we turned the snapshot into a component, we called a method on the component.

Okay, so two steps done, we turned the snapshot into a component, we called a method on the component. And now let's just dd that and make sure that that part worked. All right, now we hit this plus, bam, and check it out. Now count is equal to 1, we successfully called that method. Okay, now it's time to turn it all back into not just a snapshot, but also the HTML so that we can send both of these things to the server. So let's do that we want to end up with an HTML and a snapshot variable that we're going to return to the server. So I'll do that here.

to return to the server. So I'll do that here. Say HTML. And then we don't have this variable yet we're going to need that HTML and snapshot. Those are the two bits of data that the front end needs to do its thing so that it can change the HTML on the page and store the most recent snapshot to pass back next time. Alright, those are the two things we need. And like we've been doing before, let's add a method to get those things. So what are we going to call this method, there's a few different things we could do, but I'm going to stick with this we have this from snapshot here.

So what are we going to call this method, there's a few different things we could do, but I'm going to stick with this we have this from snapshot here. Let's do the opposite. Let's say to snapshot, or we can pass in any component, and it will return the snapshot. But rather than just returning the snapshot, I want to also return the HTML along with the snapshot. And let's do it like this HTMLSnapshot equals to snapshot. Alright, now if this syntax confuses you, I'm choosing to do this in a specific way. So this is a tuple. This is when basically think of a tuple as it's just an array with two things in it.

And then you would say HTML equals stuff first, and then snapshot equals stuff. Number one, so these would be the two items in the array. But php makes this much nicer with this better syntax where you can just automatically kind of express that you're expecting this to return an array. And you want to get out the first item and the second item and store them in the HTML and snapshot variables. And I don't know the exact word for this. It's probably something like array destructuring assignment or something fancy in php. But it's a tactic that I use a lot if data is traveling around together. If you want a method to return two things, then put them inside of an array and return.

But it's a tactic that I use a lot if data is traveling around together. If you want a method to return two things, then put them inside of an array and return them both and then get them back out of the array. And I think it looks really nice. So let's implement this to snapshot function in our Livewire class. So we'll do it after fromSnapshot, we have fromSnapshot. And then let's do toSnapshot. We pull in our component, add our space, okay, so now we have toSnapshot. And we got to take this component and turn it into a snapshot. So the thing is, we've already did a lot of this work.

And we got to take this component and turn it into a snapshot. So the thing is, we've already did a lot of this work. We did it up here in initialRender, where we took a component, and we turned it into Yep, HTML and a snapshot. So let's actually yank this out and put it inside of toSnapshot. And this should all just work. And then we can do that return where we return the HTML and the snapshot. Okay, and then we can use this toSnapshot also in our initialRender methods, we can say HTML and snapshot, I wish it would auto complete so I don't have to type snapshot so many times because I'm horrible at it.

say HTML and snapshot, I wish it would auto complete so I don't have to type snapshot so many times because I'm horrible at it. This to snapshot component. Okay, so we can reuse that logic. So that when we initially render the page, we need the HTML and the snapshot. And when we subsequently render the page, we also need the same exact thing. So we can reuse the logic right there. Okay, now one little tiny nitpick, I'm calling this getProperties method twice, which is just redundant. So let's inline assign a variable, we're going to call this properties.

just redundant. So let's inline assign a variable, we're going to call this properties. Okay. And now here, instead of calling this again, we can just call properties right there. Alright, so now we have our two snapshot functions. Everything is looking good. We've done all the things that we need to do inside of our route here. And let's look at this on the front end and see if we got the proper data back. So I hit this plus, okay, we got a 200. That's a good sign.

So I hit this plus, okay, we got a 200. That's a good sign. And the data coming back. There it is the HTML and the snapshot. Look at the snapshot, we have dataCount equals one, we have the right class. And then the HTML if I hover over it, you should see it right here. Let's see. Come on, browser. Come on. Is it gonna work?

Come on. Is it gonna work? No, maybe it won't work, whatever. You can see, oh, and then it works and I move my mouse. That's hilarious. You can see that span is now equal to 1. So this is the newly rendered HTML, we have a proper response, everything we need. Now the next step is to take this HTML and actually convert or morph the HTML on the page into the new HTML. And then we've completed the first Livewire cycle, a full Livewire cycle.

page into the new HTML. And then we've completed the first Livewire cycle, a full Livewire cycle.