Firebase Functions Tutorial #15 - Upvoting Function (front-end)

Key Takeaways

okay they're my friends so in the last video we created this upvote cloud function right here it's a callable function and we want to now call that from the front end when a user clicks on one of these arrows right here so to do this we're gonna create a function which is registered inside this view instance right here because remember this view instance now controls this section of the UI if we go to our index file over here we can see that this has an ID of app and the view instance over here controls that's element so everything inside it is controlled by the view instance so we're going to create a method inside this view instance which can then be used from this bit of template so you'll see how that works in a second the first thing we need to do is create a methods property which is an object on the view instance and inside this we can register and create different methods of functions that we want to be able to use with inside this bit of template so let's create one and let's call it up volt request because that's what we're voting and we're going to take in an ID because we need to know which tutorial request we want to update and we need to know the ID of that tutorial request so that in the cloud function we can query the database for that record so all I'm going to do for now is log the ID to the console over here so we can see that in a second now we need to invoke this function when we click on one of these arrows on each of these individual list items so remember inside the template we cycle through all of the requests and we output an li tag for each individual request and we have an arrow for each individual request so we can attach a click event to this thing using view by using the view directive so I can say V and then on and it's going to be on a click and we set that equal to something so we're saying here okay well when someone clicks this arrow I won't used to do something and from here I can call this function which is up votes request not voted up volt request and to do that I just need to say up vult request like so and we want to passing the ID of the request well we get access to the individual request so we can say request dot's ID because remember we have the ID property attached to the request because we added it right here so now we're locking that ID to the console so let me see if this all works I'm going to open up the console and make this a bit bigger and refresh over here and now if I click on one of these we see the individual ID of that request document so now we have that and that's the thing we need to send to the cloud function because inside the cloud function we use the ID on the data right here and right here so we need to send that to the cloud function but first of all we need to actually call the cloud function so let's do that we get a reference to it first of all I'm going to call it up fo and set it equal to firebase dot functions invoke that and then we want an HTTP callable and this is called I think just up vote but let's have a look yep up vote so let's copy that and paste it all right here and now have a reference to that cloud function now we want to invoke it but we also want to pass through some data and on that data we want an ID property which is this thing right here now a bit of shorthand because this and this are the same name we can just say ID and JavaScript does the rest for us okay so now we've done that we can catch any errors that happen afterwards so I'm going to say dots catch and then inside the catch block we receive any error now remember inside this cloud function there was a couple of cases that we had an error the first one was if the user was not authenticated and the second one was if the user has already voted that particular request so we can receive that Arab right here and we can do something with the error message for now I tell you what we'll just log the error to the console so console dot log era dots message like so okay so I think this is pretty much done now when we click on the arrow its invoking this function we're getting a reference to the cloud function invoking that passing the ID through as well and catching the error if there's a problem so I'm gonna save this now and the first time I do this then it might take a little while because it's the first time we're invoking the function but thereafter it should start to speed up a little bit and I'm gonna upvote this bottom one node J s so click up votes Oh first of all we need to refresh so we can catch the the changes on the front end okay now let's try it so no js' up volt that it's gonna take a few seconds but we should get a response in a minute and we do it's gone to one cool now if I try to evolve that again then we get an error and it says you can only up vote something once cool so what if I try to vote this one here so that should go to two because I've not previously uploaded that one it was one because we changed it directly in the database before but that's the first time I've voted this one if I try again though then we get an error so I can now only vote things once which is nice that's what I wanted now there's one more thing I want to do and that is to order these in order of votes so the ones with the most votes or votes goes to the top now to do that we have to come down here where we get a reference to the requests collection and we use an extra method on this called order by and then we're going to order by the up votes property that's the property which stores the number of up votes and we're going to order them in descending order that means the highest at the top so de SC for descending so now if I save this and refresh we should see that they're ordered so that the two is at the top then the one then the zero awesome now if I add a new Qwest let's just say this is Python and submit the request we should see that new tutorial request on the page first of all in a second and we do but if I now vote this one laravel six then it should go to one and now laravel six moves above python because obviously the data in the database is changed we get a snapshot a new snapshot of the database and they're ordered by up volts so now everything with the highest volt is going to be above anything with a lower volt so there we go that's the voting system pretty much sorted now I'll tell you what I want to do first of all is sign out and I'm going to register with another person Mario at the net ninja code at UK and test one two three and the reason I'm doing this is to make sure that I can still vote with a different user on these things which I've already voted so can I do that yeah I can do this one I can do this one kinda it's not gonna be a yep it's worked but if I try these again then I still get an error awesome so this all works now now in the next video what I'd like to do is something with this error I'm going to show some kind of little notification at the top a bit like a toast so that if I try to do this numerous times it doesn't just paste an error here it actually shows me on the webpage that I can't do that so we'll do that in the next video