5.4 Getting Our Address List (and Some Cleanup)
Now that we can add addresses, we need to display them in our portfolio. We'll focus on that and clean up our portfolio view in this lesson.
1.Introduction2 lessons, 12:18
2.Getting Started2 lessons, 20:32
3.Users and Authentication5 lessons, 54:30
4.Managing Currencies5 lessons, 46:15
5.Managing Our Portfolio5 lessons, 50:13
6.Security1 lesson, 10:49
7.Conclusion1 lesson, 00:38
5.4 Getting Our Address List (and Some Cleanup)
In the previous lesson, we got the address creation working. There are some things, though, that I need to clean up. First of all, [LAUGH] is this. We need to fix this so that it is using the correct CSS. And then I want to do a few file clean ups, because there are some files that we are no longer going to need. So let's go to our source in the client. Let's go to components and then the address creator. Let's look at what we have. So here's our select and form-group that should be form-control. So that should fix that. Let's close that. Now you know originally we were going to edit our portfolio but really we don't need to. Being able to add and delete is going to be enough there. So let's go ahead and delete this CurrencyEditor that we have directly inside of components. Not the one inside of admin, but the one inside of components. So let's delete that. That also means that we need to update our Portfoliovue. Because we did reference the CurrencyEditor there. So we'll just remove those mentions, and everything should be good to go. So let's go back to the browser, let's refresh what we have here, and let's click OK. So everything looks good. So now we want to display our list of our addresses here. So let's go to the server side and let's go to our portfolio routes because we want to a new route for a get request. So let's do that, now, we already have our user. So we don't have to hit the database or do anything like that. And really all we need to do is get the portfolio. So we can say, user.portfolio and that gives us our portfolio. But here is the thing, we need to hit the remote services in order to get the balances. So we could try to do that from the client. But unfortunately, the remote service doesn't incorporate cores. So we can't do it from the client, but we can do it from our Node application. So that means that we're going to need to make some Ajax requests here. So one thing that we did not do is install Axios for the server. Now we don't have to. We can use the native capabilities of Node but Axios just makes it so much easier. So let's write this code first. And then we will turn around and install Axios to make it work. So we are going to create a function called Ajax and what we're going to do is essentially this. We're going to use our portfolio. We're going to call forEach and then forEach(record) inside of our array, we are then going to call ajax and then pass in that record. So that's the first thing. So let's go ahead and write this ajax function. So the first thing we need is a URL, and thankfully, we have everything that we need. So first we want to get the currency's url. So we used record.currency.apiURL and then we just tack on to the end of that the address. So there we go, that's our URL. So that all we have to do then is return axios.get pass in the URL, and then we can do something with that response. And I kinda like this. If we return just a simple object where we have the address, which would be the record's address, and the ticker, which would be from the currency.ticker. Then the name which would be from the currency.name and record. Let's change that before I forget to do that. And then we can get the balance, and the balance will come from our response, we'll read the data and get that balance property. So this gives us a nice, simple object that we can use. But we could also incorporate the id here because these records will have an id. So we could just include the id so that we can refer to that at any given time. And there we go. So now our issue is that we are dealing with asynchronous processes. And if we have multiple currencies, or multiple addresses that we need to query on, we don't want to do anything until we have all of our data. So what this means is that we are going to have to keep track of all of these promises that are going on. And then once the promises are done, then we will return the resulting data. So let's create a variable called promises, which is just going to be an array. And for each record in our portfolio we are going to add our promises array our call to our ajax function. Because that's going to return a promise. And that is going to allow us to then say Promise_all, so that we can wait for all of the promises to finish and then we will do something with the resulting data. Now, we can't use an arrow function here because we want to access the arguments and arrow functions do not have arguments. So we will use a normal anonymous function, which kind of feels weird to write these days. And all we will do then is send to the client arguments, that should contain all of our information. So well, let's just see if this works. But first we do need to install Axios, and we do need to import that as well. So let's do that before we actually try to make this work. This is of course going to cause our application to fail. But that's okay because we are going to immediately stop it. So that we can npm install axios, and we want to save that. So now with that in place, we just have to wait for this to install. We will run our application again and hopefully we will see a list of our addresses inside of our portfolio. So let's go to the browser. Let's refresh the page here and we see nothing. All right so let's look at our console. We get an error 500 so something is going wrong. Let's see what we have here. Promise is not defined. So that is where, right there. It's always one little keystroke. I tell you, how many times this course have I botched to something with just one simple little keystroke. So let's refresh, let's see what happens again, nothing. So what do we have now? Typeerror cannot read property name of undefined. Okay, we need to update our profile. So let's go to our vues and we want to update our portfolio because we did have a different schema didn't we? Yes, in this case, we want just the name, the address, the balance, and the ticker. So there we go. Let's add another address. Actually we need to manage our currencies. Let's add a currency, let's add stipend back, and then we will get the URL which was up here. And then we'll go back to our Portfolio. We will add a Stipend address. And we have one right here. So let's just go ahead and use that. And what do we have? Nothing, there is no balance. Which, is that really true? You should see five, well, this was a while ago, let's look and see if it's updated. That says we should see a balance here. Well, that's interesting. We know it works because, well, there it is. That's what we should have seen. So I'm wondering if there's some kind of throttling going on because that just seems very erratic. But it, well, it works. And I'm not going to complain about that. Now, we aren't gonna be able to edit, so let's do a little bit more clean up here. So inside our Portfoliovue, let's get rid of the edit link, because that is no necessary anymore, so that's all we have is delete. Now deleting our, well, we're not a currency anymore, we are working with a record. So when it comes to deleting that record, we will have the record. Let's change the name of the method too, so that it more accurately reflects the stuff that we are doing here. So let's find that deleteCurrency let's change it to deleteRecord. We'll have the record and then are you sure you want to delete? Let's use the address here and then we will have the currency name here, so we'll have record and then just name. And if that's the case, then we want to use our API. We will deletePortfolioRecord. We will pass in, let's do the whole record, although I think all we will need is the id. But we will pass in the whole record. And we will do the same thing here. So we will find the record and then we will splice it out. So as far as the UI is concerned, that should be fine. We of course don't have that method on our client API. So let's go ahead and write that, right click, I guess we should've called that deleteAddress. That would fit with our other theme. So we will make that quick little change. And in fact, what we'll do is just dub this out so that in the next lesson, we can implement that. But let's go back, let's change that to deleteAddress and there we go. So in the next lesson, we will implement the deletion of our Portfolio addresses. And then all we need to talk about is security.