Trigger Side Effects using Zag.js computed and watch Properties
When the pin input values are full we will want to do something with those values such as sending an HTTP request.
To do this we'll implement a callback in context that will get invoked when all the values are computed. We'll do this by creating a computed property that returns true when all values in context are full. From there we will watch that computed property to invoke our callback.
Instructor: [0:00] Another useful feature we can add to this component is to know when the value is completed. If I type one, two, three, four. At that point, we want to know that all the input fields are complete and we can maybe send the value to the server or post the values to a form, for example.
[0:20] Let's see how we can add this. If we take a look at the context, we see that we have the value here which could be a string array.
[0:29] Now, one thing that would be helpful is to have another view of this value that somehow tells us when all of those values in that array are filled which means they are not actually empty strings. Fortunately, JS allows us to create computed properties of the context.
[0:46] Here I'm going to add a new key called computed and in the context, I'll define a read-only field called is completed and make that a Boolean. This field lets us know when the values and all the values in that array is filled. Here, to write the implementation of that, it's going to give us access to is completed and we can write the expression here that basically checks if the context.value, every field in there actually has a value which means every field is not empty.
[1:25] This is the computed property that allows us to know when all values are filled. Just as we said in the previous lesson, we can use the watch to actually listen to when context properties change. In this case, we can listen to when the value is completed. We want to now instantly create some uncomplete handler.
[1:45] We're just going to put here invoke uncomplete and we'll switch back again to the machine type, the context type here and define a new type called uncomplete. This is going to be a callback that returns us the value of all the fields and just returns the void. Literally, we can invoke this callback within the watch.
[2:10] Now that that is defined, let's create a dummy implementation of that in the context. We have uncomplete here. For now we do a console.log of the value. Then, finally, we'll write the implementation of invoke uncomplete.
[2:26] I'll scroll all the way down to the actions and write the implementation for invoke uncomplete. What this does is to check if...we're going to do a quick check to see if the value is completed. If it's not completed, we just do an L to return.
[2:42] Because we actually invoke the uncomplete function passing in context.value. Because we are working within, most of these values are wrapped within boxes. We need to convert that back into an array. We switch this and say array.from context.value.
[3:03] This way when all values within the context are field, when the user actually puts something in every single field, it switches to 1 and that invokes this callback. Let's test this out to see how it works. I'm going to open a console. Let's switch to inspect, console.
[3:22] Then we type in here one, two, three, four. There you go, we see that the log gets fired and it has an array here of one, two, three and four. I'm going to reload again, copy some values, some rough text and then use the paste approach as well.
[3:40] If I paste all values into the field, again, you see that the completion callback is called with ENTE as we copied. So that is awesome. Now, we can use this value and send this value through a post request or to some server for the pin code that has just been entered.