Error Messages Modal

[00:00:00]
>> Maximiliano Firtman: We still want more thing to solve, and that is what happens if I'm using a wrong ID movie, an ID that doesn't exist, okay? I'm seeing this which is not really good, and probably I'm having a console error at some point, okay? It Go to read the properties of that movie.

[00:00:22]
So to solve the problem, we need a way to show a nice error message to the user. So to do that, in case you are following along with the material, we are an e5 error messages. So we need to go to index HTML actually somewhere here, for example, after the main, we are going to create a dialogue element and call it other model, other dialogue.

[00:00:49]
I'm not sure if you have ever used dialogue before. So this is not a web component that has no dash, no hyphen, so it's actually from the browser, okay? And inside here, for example, I will just say error and a message, like there was an error, something loading the page, like that.

[00:01:12]
And a button, let's say I'm sure if I will use a class and on click, we need to do something, we are now okay, okay? And okay, that's the HTML, we can add more things later. But now we need a way to use it, because if I save this and refresh.

[00:01:32]
>> Maximiliano Firtman: That dialogue is not really appear in anywhere, okay? Not even if I go to the homepage, it's not there, even if it's in the HTML, exactly the template, okay? It's waiting for you to use it later but it's not rendering it in the DOM. We're actually in the layout, the visual layout is in the DOM, but not in the visual layout.

[00:01:53]
So that's why we knew, for example, in Node.js, we can have a method that we can call from anywhere, it can be Show Error, that it may receive a message and do something with it. Also, if we don't receive a message, we can set the default message like there was an error, whatever.

[00:02:19]
Also, we can add a second argument, go to home, for example, if we found an error that we can't solve, we can send the user to the home, because we want to. And what to do with this? Well, I'm going to get the element by ID or query selector, it's just the same.

[00:02:38]
So I will take that alert model, that's the idea I use, I will say, show model. So and because I have a message, I will take query selector from that alert model add the paragraph inside it. So remember that in the HTML we have a paragraph inside this one, so I'm going to change the text of that paragraph.

[00:03:13]
So I will just say text content equals to the message that we receive here as an argument, okay? Makes sense? And then if you wanna go to home, we know how to go to home, up router, go forward slash.
>> Maximiliano Firtman: Okay? And we have Show Error, we should have a hide or a close, that will just close the model.

[00:03:47]
So instead of show Model, we also have a closeModel, that we can call from the OK button.
>> Maximiliano Firtman: Okay? This is a browser API as well. So you can see no libraries, no dependencies, so now I can go to my index, HTML, and I can fill this with app, close error, okay?

[00:04:20]
Pretty simple, it's not really a big deal. So that means that now if we are going to movie details page, we are trying to get a movie and we have an error, okay? So if the movie does not exist or if we have an error, here we have an alert.

[00:04:41]
Actually, we're not Seen that error, we should see why. But actually here we can try to show the error message, and also we can see the error message because it's global. We can actually see it from the console, so app, and we can remember app has the router, I need to refresh app, okay, there we are.

[00:05:02]
App dot and you can see that we have now, loops, right there, Show Error as an option. So app Show Error with no arguments, looks like this.
>> Maximiliano Firtman: Okay, nice, this one is not working, it's not closing, so we'll see why. We have a bug there, when I'm trying to close, close model is not a function, okay, we'll see why, because it's close, not close model, my bad.

[00:05:35]
So App.js is just close.
>> Maximiliano Firtman: Like that, okay? Let's try again, so if I force an error, I see that nice message I could change also the message, blah, blah, blah, okay? So it actually works, so now anywhere in my app, when I wanna show an error message, I have that model.

[00:06:07]
Of course, you can create different models with different colors, with CSS, showing you different stuff, there is no need to install a library or something. And everything is model, which means if you try to click something like here, it's not clickable, so it's not working, it's actually a model window.

[00:06:27]
>> Speaker 2: Are you defining the model window somewhere explicitly?
>> Maximiliano Firtman: No, this is part of the browser, so it's part of the HTML spec, the model and HTML spec.
>> Speaker 2: Because, yeah, you had a close model method, I think you were calling-
>> Maximiliano Firtman: This one, you say, or? No, I had a close model, but it was my bad, actually, it's called close, not close model.

[00:06:47]
>> Speaker 2: And then you have show model, okay, yeah, does that then turn in that?
>> Maximiliano Firtman: Exactly, that's, that's, that's, the trick is to get the element from the DOM and then call show model. And that show model is actually part of the API from the browser that will pop up the model, and then the design is actually CSS.

[00:07:07]
So if you go to style CSS and you search for alert.
>> Maximiliano Firtman: For model, here you have the CSS to make the background color like this with a border. And you can set the backdrop It is a pseudo element, it's double column. That's a pseudo element where I'm sending the blur effect that you see there over the backdrop, okay?

[00:07:40]
That's all.
>> Speaker 3: So does escape work too to close the model?
>> Maximiliano Firtman: Nope, so let's see, so the question is, if I use my keyboard and press escape, okay? Well, first I need to focus there.
>> Speaker 2: But we could.
>> Maximiliano Firtman: Again, if I have the focus on there and not on the console, if I press escape, it goes back.

[00:07:58]
Yeah, by default, models, to be honest that depends on the browser, but I think that most of browser at this point they are using the escape key. And if not, you can read the key key press and do it yourself.
>> Maximiliano Firtman: Okay, cool? Any other question?
>> Speaker 3: The styling, the blur and all of that, that comes from the CSS, right?

[00:08:20]
>> Maximiliano Firtman: That's CSS, that's pure CSS. So actually it's a filter, you can see it here, backdrop filter or you can play with this and do it less more. You can play with those bio change the background, make it more red forever, and see how it looks like.
>> Maximiliano Firtman: So the greater the value, the greater the lure effect that you will see, okay?

[00:08:48]
So you can play with that until you're happy with the results, that's just two lines of CSS, that's all, okay? When a framework, yeah, you have style dependency, that dependency has the dependency on other trade dependencies, and then fame machines that now you ship and blah, blah, blah.

[00:09:07]
Well, you can make it, yeah, if you want to customize it a lot, you will need a lot of CSS, but yeah, you can do it.