4.3 Finalizing the Creator Component

In the previous lesson, we got quite a bit done as far as creating new currencies. Well in this lesson, we're going to finish that process. We wrote the server-side code, we also wrote the UI, so there's just a few other things that we need to do. The first is setting up the event handler for that save-currency event that occurs. So let's go to our views, let's open up our currency's view. And we want to add that v-on to our currency creator and that was save-currency? I don't remember, let's look at our component and find out. And let's see, the save-currency event is what is emitted, so we will listen for that. And we will call this saveNew, the reason being because we're going to have another editor for editing and we will have a different method for saving in edit. So we will have a saveNew and this is going to accept the currency information. So then all we need to do is use our API and let's call this method createCurrency. We will pass in that currency information and then we will do something with the response. In fact, what we could do is just go ahead and refresh our list here, although let's change the name of this. Let's call it refreshCurrencies, that's a lot more descriptive as to what it is doing. So we will do that and, okay, I think that that looks good. Let's go to our API and let's add that createCurrency method. We have our currency being passed to it and, wow, I really messed this up for the getCurrencies, and that just comes to not having everything in place so that we can actually see if this is going to work. So In this case, [LAUGH] I'm glad we caught it now. So we're going to kinda do the same thing in that we are going to, first of all, build our URL for our currencies, but we aren't going to make a get request. Instead, we're going to make a post request, so let's pass in post and the currency information, and then we will rely upon the data coming back. So I think we should be ready to go. Let's go to the browser, let's do a hard refresh, and let's try this out. So let's do four and let's see, from our list we're going to go to the block explorer, and then we are going to go the API. And there is an endpoint for just getting the balance, but I don't want to do that because eventually we might want to work with other information. So, if we use the get address endpoint, then that gives us a lot more information. So we don't want the actual address here, we just want everything before the address. So I'm going to copy that and paste that into API URL, and we are going to save. And, of course, it didn't work the first time. And let's see here, there's a network error. Why is there a network error? So let's look at our network tab, let's make that request again, let's see what happens. Evidently, something goes horribly wrong, let's look at the response, there's nothing in the response, so let's look at our command line. And router use requires middleware function that is where? Inside of API, okay, so evidently I did something wrong in the API file, so let's go to routes. Actually, API is probably fine, let's go to currencies. And yeah, we did not do module.exports and router. Okay, so with that done, [LAUGH] famous last words, let's clear out all of the errors, let's try to save this and well, we don't get any errors, that's a good thing. We do see something in the background, so that actually worked. But we need to hide the modal, well, that make sense, whenever we save the currency, we want to hide the modal. So where do we want to do that then? I guess not here, but let's do this, we have a method for showing it, let's add a method for hiding it as well. So we will hide and we will essentially do the same thing inside of the show method, except that we will just hide it. So let's do that and then after, we actually save that data in this callback, we will once again retrieve our modal and we will call hide. So, let's test this again, let's do a hard refresh here, and let's test with another currency. So, let's look for stipend, that's another good little project. We will do the same thing, we'll go to API, we'll go down to get address, and then we will get the URL without the address there. And so then, we will try to add that, although we lost our currency. Let's check the database, let's see if we have any currencies saved. We do, okay, so something is wrong as far as displaying them, but we'll tackle that here in a minute. So we'll have our ticker, we'll have our name, and then the API URL, we will save that bad boy, and then that shows up. You know why? Because we aren't getting the currencies whenever the component is created. So let's add the created hook, and then we will call this refreshCurrencies and there we go. Yeah, so that's kind of important there. Let's refresh, whenever we move our mouse over those, we can see that our controls light up. Our ticker isn't showing up though, and I wonder why that is. Let's make sure that we are actually saving that, we are. So, for some reason we aren't seeing the ticker in our UI. So, let's look at our code and let's see what we have as far as that table is concerned. So, we [LAUGH] have tickler, yeah, we don't have a tickler. Now we have our ticker, and our name, and our URL. We could add some CSS to make this look a little better, but I think this is going to be fine. So in the next lesson, we will implement the ability to edit our currencies, which has a lot of similarities to creating, so it shouldn't take that long.