Firebase Functions Tutorial #16 - Error Notification

Key Takeaways

a rather than gang so in the last video we saw that we could vote these things but only once and if we try to do it again then we get an error now I'd like to show that error in some kind of notification at the top instead of just logging it to the console so let's first of all go to the index.html and add in a little bit of HTML for this notification it's just gonna be a div with a class of notification all right so let's just put some test content inside there save it and just make sure it shows up over here yeah we can see it all right there so now we need to style this thing so I'm going to close a couple of these things and go to the CSS Styles dot CSS and then down at the bottom I'm going to do a comment to say notification and then in fact I'm just gonna paste these Styles in from my github repo because there's no point in you watching me write these out but we have a width of 200 pixels for this padding of 20 pixels to give the text some room the position is fixed and that's so we can say from the left go 50% so halfway across so it's going to show in the middle but then the margin left is minus 120 pixels and that's to offset it to put it back in the centre because if it starts at 50% from the left then it's going to go more to the right if that makes sense we need to offset it by half of the width of the whole thing and the width of the whole thing is 200 plus 20 pixels so 220 half of that is 110 actually so let's change that and then we're going to offset it by that amount from the top it's going to be zero so sitting right at the top the border radius in the bottom right and also at the bottom left that's going to be five pixels and the background is kind of like a red color text aligned to the center the color of the text is white this thing right here I'm going to cut for now because we want to see it and then the transition is all and it's not 0.4 seconds that's all when it comes up and down which we'll see in a second it's done smoothly rather than just straight away with a click of a finger so now what I'm gonna do is save that and just preview this over here to make sure it looks okay and we need to shift preview I think but there's no styles so let's make sure we've spelt this correct notification no we didn't save that and now this should work okay so that is what the notification is going to look like now to control it going up and down what I'm going to do is if I just undo what I did right here give this a margin top of - and 100% meaning it's gonna go entirely off the page altogether so if I save this now then refresh then we shouldn't see it by people no the thing is when we want to show a notification we're going to give this a class of active and when that happens we override the margin top to be zero so if I just give this a class of active all right here save it and refresh then we should see it on the screen again so all we need to do in the JavaScript is toggle this on and off when we have a notification to show and we need to update the text content right here so I'm going to get rid of that text and also this thing right here because the styles we know a fine now all we need to do now is go into the app KS and I'm going to create a function that we can use whenever we want to show a notification so comments and notification and the first thing I'm going to do is grab a reference to this div over here the notification div so we can update it so I'm going to store it in a constant and call it notification and set it equal to documents query selector and it's the notification class okay so we have that now I'm going to create a function and this function is called show notification set it equal to an arrow function this is going to take in a message parameter that's the thing that we actually want to show in the notification and first of all well grab the notification this constant right here the reference to it and we want to change the text content of that to match what the messages that we send into this function next what we want to do is add the class of active to the notification so we can see it so let's say notification and then class list and we want to add a class and that is going to be the active class right there okay so well let me just save that and now try and invoke this function when we get an error so I've copied that and I'm going to go to requests and then over here where we just logged this to the console instead I'm gonna invoke show it notification and pass through the error message instead so that should invoke that function right here add the class of active to it and update the message inside it so we should see it on the screen if I save it refresh over here we shouldn't see it by default to begin with but if I try to vote something again and we can't do that now we see this notification right here and that's pretty good the only thing is it doesn't go away it's like an unwelcome guest so we want to hide that after a few seconds so let's go over here and update this function so that maybe after four seconds it hides it again now to do that we can use a set timeout so set timeout and the function we want to fire first of all is going to hide this notification so notification dot class list we want to remove something so dot remove and we want to remove the active class and we also want to set the text back to an empty string so notification dot text content and set that equal to an empty string okay and we want to run this after 4,000 milliseconds which is four seconds so save that let's refresh this again and let's try it once more we see the notification but after four seconds it should scarper and it does awesome so let's try it again yeah we get the same notification so this now is all working and this notification system could be reused for different errors in a future for example if you have some other functionality and you wanted to show a different error all you'd have do is invoke this function right here and pass in whatever message you want to show