Fixing the MovieItem Component

[00:00:00]
>> Maximiliano Firtman: But we need to separate between the idea of loading the component and executing the component than importing that in a module. This module, if it's going to use it, it needs to import it anyway. So one thing is for HTML to execute the custom components defined. Another thing is for JavaScript, a module should always import elements from other modules, okay?

[00:00:28]
Make sense? And finally, we can see Superman movies or Back to the Future movies, and it works, okay? And if I click on these ones should work, oops, seems like you have a bug there, right? So for some reason, no, maybe I click twice because it's in the history.

[00:00:52]
Can you see that? We have a bug somewhere, we need to find that bug that when we click in one element, it goes to the home for some reason, but then it's in the history. So I can go back and then there it seems like I do have a go to home that is there somehow that we need to solve, okay.

[00:01:15]
Is it happening also in the home page? Yes. So the problem seems to be directly in our-
>> Speaker 2: The catch all.
>> Maximiliano Firtman: Movie item component, right? The catch all is on the server, so we are actually not touching the server, so it shouldn't be something on the server, okay?

[00:01:34]
So because here we are not touching the server, so we are just client-side. So the problem should be around movie item, so we are going to a URL on clicking, and maybe the problem is this one, I'm not preventing default. We can do that first, maybe that's the issue, because this is going to the home page event, preventDefault.

[00:02:06]
Does it make sense? It's a link with an href, so if I don't preventDefault, the browser is also changing the URL, and it's going to the home because it has no URL. But also my code is changing the URL. So we are both calling router, I think that's the issue, cross your fingers.

[00:02:26]
So we go here, click, no, let's refresh again just in case, yeah. And if I search, back to the future, go in here, it's working now. Okay, did you all get the problem? When you have links or forms, you have to preventDefault.
>> Speaker 2: Is there some kind of listener that exists for injecting in our HTML like that?

[00:02:53]
Because when we load the page, we go through each href and disable them. It seems like you could probably make a listener or something here too.
>> Maximiliano Firtman: Something that we can do is that, so we have that maybe, if I understand correctly, maybe we can add the same nav link that we have for the homepage, okay?

[00:03:14]
And then we can, I mean, as an idea, you can go to the Router and remember we have that enhancing experience here. So maybe we can call that also when we are going to a new page. So after injecting the page, we go through the links and do something, that's one option.

[00:03:39]
Another option that's probably gonna be better is that you can have observers of the DOM. So every time there is a change in some parts of the DOM, you can go again and run this, okay? That's another option. And let's say the final option is to you can even do something like, I'm not sure if it's initially a good idea, but just to tell you that you can do that, you can take the document and addEventListener(click).

[00:04:09]
And you say, well, but if I do this, it's the click of the whole page, yes. But I'm not sure if you know, there are two things. We have target, two elements, and current target. Does anyone know the difference between target and current target? Nope, let's do a console.log of both,
>> Maximiliano Firtman: And see what happens.

[00:04:33]
So anywhere, now if I click anywhere on the page, I should see that, or maybe not.
>> Maximiliano Firtman: This error is from YouTube, I'm still getting the error from YouTube. There, I'm seeing the document, sorry, I'm clicking on Back to the Future, and I'm seeing first h2, second the document, okay?

[00:05:02]
So target is the actual element you are clicking on. Even if you are listening for the whole page and current target is the whole page. So meaning that on target, you can actually check, for example, which kind of element it is, if it's a link. So then, if it's a link, you can preventDefault for all the links.

[00:05:27]
I'm not sure you want to do that, okay? But I'm just saying that you can use the DOM with this and listen for events in the whole document or just in the part. So it can be just the main and everything is in there. When you click there, then you can check here who is the actual target.

[00:05:47]
And if the one that you are looking for, do something with it. This gets more complicated, you have something known as bubbling, I'm not getting into those details here. Also you can stop propagation, so another listener can stop propagation, so then you won't get executed at the document level.

[00:06:08]
It depends if in which phase you are, so it gets more complicated. So, but if you wanna get there you can make a lot of dance tricks, just by using the DOM, okay? Does that make sense? So, do you have any questions on the search?
>> Speaker 3: In the, I think it was a movie item you had the onClick attribute.

[00:06:34]
>> Maximiliano Firtman: Movie item?
>> Speaker 3: Yeah, that.
>> Maximiliano Firtman: Yeah.
>> Speaker 3: It's just implicitly it has access to the event object?
>> Maximiliano Firtman: Yeah, exactly when you have any on something event on HTML, you always have an argument known as event with that name that is available in that particular context of execution.

[00:06:56]
It's called event, but if you're passing that to a function, you need to pass, I mean, if you have here app.process or whatever, you typically pass the event as an argument. So then that function will execute preventDefault. But because here I'm not using an external function, I'm just writing a script there, I can use semicolon, separate sentences and execute both at the same time.

[00:07:22]
And there is an implicit argument known as the event.
>> Speaker 3: So you can assume that it's just a-
>> Maximiliano Firtman: Yeah, it's always there.
>> Speaker 3: Okay, but in that line, that's essentially a function that's just always gonna execute.
>> Maximiliano Firtman: It's an object more than a function, but yeah, event is an object that is always available inside an event of type on when you say on something.

[00:07:41]
>> Speaker 3: Okay, could you pass in a function to onClick?
>> Maximiliano Firtman: Yeah, I think I'm doing that at some point, maybe on the search. So if you go index.html and the search the homepage, no, here.
>> Speaker 3: Sure, yeah.
>> Maximiliano Firtman: And passing the event argument. So I was in this case stopping the default action prevented default from inside app.

[00:08:10]
So here on app search I'm receiving the event and calling preventDefault from here.