Creating a Generic Router

[00:00:00]
>> Maximiliano Firtman: Well, now what's the deal, what do I need to do? I need to check the route, and based on that route, I need to inject in the main the component that I set here. Okay, so if I if this is the path, I need to inject the home page, if this is a path, I need to change the movie page and so on.

[00:00:25]
Okay, does it make sense? So, and I'm creating a generic router, so a system that you can quickly use on any project, okay? So you say, if add to history, we can do something like this, create a page element, and that page element is the one that we are going to inject if we have it.

[00:00:53]
So there is a to do here, we are going to inject this. Let's say if it's null,
>> Maximiliano Firtman: If it's not, though. So we are going to get the main document query selector, main and we're going to first delete what we have we are going to remove. This is a quick and dirty way to remove what we have in the main there are other ways as well.

[00:01:26]
And after we do that, we want to append child that page element again, we still have the logic we need to the logic there, but I want you to understand what I'm trying to achieve. I will create the variable for the page element that I need to go.

[00:01:47]
If I do have one, then I will do that, so I have a page for the current URL, so we inject that page, that element in the, does it make sense? What are the possibilities for page elements being null, why it says that it can be null? Well, maybe it's a URL that I'm not managing, it's a 404, does that make sense?

[00:02:15]
So maybe it's a 404. So if it's a 404, then I'm going to create an element.
>> Maximiliano Firtman: Any element will work, but I'm just going to use this to create a text saying, page not found. So if the engine couldn't find a route for the current URL, the patient admin will be an edge one saying patient phone.

[00:02:45]
So we need to fill the engine here that I mean, it's not a big deal, we need to just go through all the routes and try to find one that matches the current URL, that make sense?
>> Maximiliano Firtman: So something that we need is a current URL, the current URL is actually here in route, okay?

[00:03:12]
So it's coming here, the problem is that sometimes that URL can include for example, it can be search query equals to batman and page equals to three. So in this case, what I want is just this part before the question mark, does it make sense? So what I need is that segment of the URL that has only what is known as the path, not the search, so this is just looking.

[00:03:50]
So I'm going to create the route path argument and I will use, now I will check if the route include a question mark. Now I will use a ternary operator that you mentioned before, I will just split this, do you know what a split does over a string?

[00:04:14]
It separates this in an array, and I will take the first segment. So before the question mark, and if it doesn't include one, it's just the full route, okay? So pretty simple, this is programming, nothing really, really fancy. And now what I'm going to check we have two kinds if you remember, in our routes, we have two kind of path, they can be strings, or they can be regular expressions, okay?

[00:04:41]
So we have two different kinds of path, so I need to check, I'm looping through all the routes, I need to check if the path for the current route is a string. So I do a just a comparison, a string comparison, or if it's a regular expression in this case, I need to execute the regular expression, okay?

[00:05:02]
Make sense? So that's the next step, so I will check if the type of the path is a string. So if it's a string, actually equals,
>> Maximiliano Firtman: And the path, the current path is the one that I'm looking for. I found the path, so basically, I will say that the page element is a new and look at this r.component.

[00:05:36]
Let's see if you understand that part new r.component, does anyone know what this means? Because it looks weird, it works, but r is our current variable looping through, Actually, this is not router, I have a typo here, this is routes.
>> Maximiliano Firtman: Okay? Routes, not router. And we are looping through all the routes I need to get the component, the component is a constructor, it's a class, so I'm just creating a new instance of that class.

[00:06:16]
>> Maximiliano Firtman: Okay? Let me, It works in JavaScript, you can actually do that. And then I can break meaning that I don't need to continue looping through the rest of the routes, because I have already found it, okay? And the other option is that it's, if the path is an instance of regular expression.

[00:06:39]
>> Maximiliano Firtman: So if it's a regular expression, I need to check if it's matching and you take the path and you execute the regular expression with the route that I need to check. Actually with the route, no, the route, the complete route. Yeah, not the route path because here I may change, I wanna see everything.

[00:07:04]
>> Maximiliano Firtman: Okay, does that make sense? So if it matches, it means that we are in the right route, so something similar as we did before. Page element, new archive a component, so just remember this. Let's do this, string route, string path, and this is a regular expression path.

[00:07:34]
>> Maximiliano Firtman: And I'm not sure if you remember, and we are finishing the router, so, We have this idea of a variable here, okay? So we need to extract those parameters, okay? And we do that, actually, with match, I'm not sure if you have used this before, but actually that match will have match.

[00:08:02]
We can slice that, and if we take slice one, it's giving me actually the parameters, that's how that works, the regular expression API.
>> Maximiliano Firtman: So something that you can do, I can inject those params in the page element. By the way, params is just a variable name I'm creating right now can be arguments, it can be properties, props, however you wanna call it.

[00:08:38]
So let's try to understand that if I'm in this route, for example, if I'm in movies/14, 14, because it's here, a variable will actually be one of the elements of this params array.
>> Maximiliano Firtman: Okay? It's a little low level, but it makes our router future proof, because we can have more routes later.