3.5 Handling Events

Our application can display messages and that is a huge thing. So now, we just need to focus on handling the click event so that we can grab the text from the input and adding that to our messages, so modifying our state. So let's just jump right in. The first thing that comes to mind is we need a function for getting the text of our textbox. So let's just call this getText. We don't need any parameters for this function. And we will use getElem. We will get to the elements with, I believe it's called message-text, and then we will get the value, and that will give us that value so that then we just need to handle the click event. And we could do it like this. Let's call this on, and let's curry this because that would be very powerful, especially when working with events. We need the eventsType, we need the element that we were working with and then the callback function. And so we will just say element getElementByID, I mean, I've written tons of functions just like this to make it a little bit easier to set up event listeners. So we have our eventType, we have a function. There we go and it is curried, so we could do something like this. Let's go back to our code and let's create a buttonClick. This is is of course going to be a function, but this will give us the ability to go ahead and set up an event listener for the click event for our button. And that was message-button, I think, let's look at the markup and let's make sure. Yes, message-button. So that then, all we need to do is supply the callback function and then we're pretty much good to go there. And we could pass this here. In fact, I guess we could go ahead and do that. So let's say buttonClick, we're going to pass that in. And let's call this dispatch for lack of a better word, I guess. If something else happens then or something else makes sense, then we'll go with that route. So let's go ahead and set this up so that we will have our event listener. So we of course want to get to the new text. So we will call that getTest function. Although, we should probably pass that as well to our app, but we'll be lazy and leave that alone. And then this is where the magic is gonna happen. We are going to create eight newState, but we want to take our existing state and we want to spread that out and then we are going to add in our newText right there. So that now that we have newState, we can call app, again, we can pass in our newState. Pass in the output, pass in dispatch, and there we go. That should work. Let's find out. Well, immediately, we get something wrong, getElementById is not a function. Let's go here, and it's probably an issue with the autocomplete. I've not seen it, I guess I should have paid more attention to where this was, helpers line eight. So let's take a look here. And no, that was just me typing the very wrong thing. So eventListener, there we go. All right, so let's type in a message. Let's click on Add Message, and boom, there we go. So the first thing I see is that we should probably clear out this message here, but let's add another message. Let's add message. And it worked. But yeah, what we're doing here is appending. What we need to do is clear out our output element so that we can add in the new. So let's add another helper here. Let's call this clear, and we don't need to curry this because we only have one argument here. So let's do this, we'll set inner HTML to an empty string and then we will return element. So now, we need to use clear when ever we append to the output. So we can compose this. Let's use our compose. We will first of all have append first because we want to clear first, and remember we have to do this in reverse order. So we are going to clear, but now, if we want this to be consistent, we have called every single function and we kinda need to clear or call clear like that. So, yeah, I guess we need to curry this. So we will curry the clear function so that will be consistent. And then, we will append, and this is of course going to go to output. So there we go. We do need to remove output there because, well, we're doing it. Now, with compose. All right, so with that done, let's go back. Let's enter something. Let's enter something else. Okay, so that is working now, that is behaving. So now, we want to clear out the textbox. So let's write another function instead of getText, we will setText. And we might just want to say clear text. But I guess we should do setText because that is more correct. Then we will set a value to value. That should work. So that's inside of our click event handler which is now called dispatch. We will get the text, we will set the newState. We will then setText to be an empty string. Right, so let's go back and we type in a message, that cleared out, that's great. But now we have something else. And I already know what the problem is because I thought that this would be an issue. Whenever we click on their button, we are calling app. So we are essentially kick starting our application again, which is setting up the click eventListener again. Because at this point in time, we are adding that callback function that is completing the whole process of setting up the eventListener. So we are setting up multiple eventListeners for the same element over and over and over again. They are interacting with one another and they're giving us this wonderful experience. So here's what we can do. Let's go to our helpers. And we, of course, still want to set the eventListener but let's return a function here. And this is going to give us a very easy way of removing the eventListener that was set for this call to on. So we just need to pass in our eventsType, we need to pass in the function that was provided. And so now, we can do this, let's go back to our app. We can say that this is going to be called stop, so that whenever we click on the button, the first thing we will do is call stop. That's going to remove the eventListener for the button, then we will get the text, we will set the newState, we will set the text, we will call app once again, which is going to set up the eventListener once again, then whenever we click the button, we stop or remove that eventListener, so on and so forth. It's a little bit tedious but it's gonna work now. So if we type in different messages, we can now finally see the messages and everything is working okay