Route Parameters

[00:00:00]
>> Yes.
>> So going back to that original map, you could easily just use object destructuring, and then you wouldn't have to redeclare each prop.
>> Yes, but then you just copy everything over, right?
>> Right, so request handlers simply copy, gotcha.
>> Yeah, you could do that.

[00:00:19]
Okay, so next step is we probably wanna be able to click on it. So instead of just having contact name, let's make this into an anchor. Yeah. Sorry, okay, so now we added an anchor. And in this particular case, let's navigate to /contacts. Slash, and let's do contact.id.

[00:01:05]
Okay, as of right now, this route navigation is not typesafe, right? If I do a typo, it will not stop me. But one of the feature we're working on is to make sure that it is typesafe. So type safety for route navigations will be coming soon, just like there's a type safety for the data that the onGet returns.

[00:01:25]
We will have type safety for the navigation over here. So all I'm saying here now is that I can now click on any of these icons, right? And this will take me to a new URL, which is contacts/mhevery. Now, that URL is not created. So let's create that URL.

[00:01:43]
So we need to have that route. So what do you think we're gonna do here?
>> Do you use a bracket notation or something like that?
>> That's right, so contactid/index.tsx, right? And, again, we just do export default, component. Sure, TODO sounds good. So now if we go here and refresh this, it is having issues, okay, start it.

[00:02:23]
Now it just shows TODO, right, because that's all I created for the route. So the thing to do now is to use the chunk of the URL we would call params. And then extract that somehow and then deliver the correct person for this URL, makes sense? Let me know if it's a good time to continue.

[00:02:46]
So again, we're gonna do export const onGet, which is gonna be a request handler, Which is gonna return a contact, which will be async function that will do some stuff. And so the thing we wanna return here is we wanna go to contacts and we wanna filter it and, Let's see, does the autopilot do the right thing?

[00:03:18]
Let's see, the contactId is the, wow, autopilot, that's amazing, you got it right. At what point is our job gonna not be have a job here? Okay, so this returns now a contact for us. So now we can grab the contact, let's say, endpoint. Wow, this needs to be imported.

[00:03:46]
And so now in here, we can say JSON.stringify. Sorry, that's an endpoint, so we have to do a resource first. Resource, Value is endpoint, onPending is, Okay, onResolved is, What are we gonna do on resolved? I've got a contact here, and for now, let's just do JSON.stringify contact, keep it simple, right?

[00:04:52]
So now, you see that if I navigate to this particular URL, this is the data for me. If I go back and I navigate to Steve, I will get Steve, and so on and so forth, right? So there's different URLs that that show up for this particular path.

[00:05:06]
Pretty straightforward, onGet, we go to our fake database. We retrieve our item from the fake database. And that's the data that's gonna be used for rendering the component. And the component gets a hold of this data on useEndpoint, and all of this magic happens. Yes.
>> Can you do multiple onGets?

[00:05:35]
>> No, you can only have one onGet. The idea is inside your onGet, you can talk to as many databases as you want. But you wanna return just one dataset, right? So nothing's stopping you inside of the onGet to talk to five different storage systems. [COUGH] But you wanna assemble it as a single data packet that you return to the client.

[00:06:04]
All right, so let's print out this thing. Let's do a div here. Okay, so we wanna print an image. C.avatar, span c.name. That's image, my mistake, here we go. So we have our image. So then let me see if I remember it from the other place. ContactSearchPane, no, that's not in contact.

[00:07:21]
I am cheating from existing code contact details. Here we go. This is LinkedIn. So this is LinkedIn, GitHub, Twitter, except the image is LinkedIn. This is GitHub. I will push all that into, where's Twitter? Here we go, no? Here we go. Okay, how does that look like? Why am I there twice?

[00:08:37]
Cuz I'm typing myself twice here. Okay, [COUGH] so it needs a little bit of styling. Yes, and also these URLs, these things are supposed to be links. So that actually becomes, Not span, this becomes a, href c.linked. And then here, we just wanna do last. Function last url string returns string.

[00:09:15]
Wow, autopilot is amazing. How does it know that? Okay, why are you complaining? [COUGH] this is actually an interesting error. It's worth talking about. So what I did over here is completely normal, but I notice it's complaining. And the complaint over here basically says, it's like, look, you're trying to refer to last.

[00:09:56]
But last is a function that's not exported. And I am over here inside of a dollar sign. And so this thing will be lazy loaded from some other URL somewhere. And so this code is gonna get moved. So how in the world am I supposed to get hold of last if you do this?

[00:10:15]
And so this is one of those things where you have to be like, yes, export, right? So now it's happy because, this could be undefined. Okay, so let me make this undefined, too.
>> Could you just do optional branch, optional cheating operator there?
>> Yeah, what is it?

[00:10:46]
What is it, is it like this? No, I guess.
>> You just add, yeah.
>> Yeah, sorry. Typescript's not my strong point. [LAUGH] [COUGH] No, it disappeared. Hold on, what did we do wrong here? URL. Why don't we see it? What am I missing here, last? Yeah, the link is there.

[00:11:23]
Because it ends in a slash, duh, okay, okay, okay, okay. It's a little more complicated. You know what, I'm just gonna steal it from here. Yeah, here we go. Okay, so this just takes the last chunk out of the list, right? Here we go. [COUGH] So now the same thing, let's move the code to be the same for GitHub.

[00:11:59]
And same code for Twitter. Yep, all of the pieces are there. So let's do some styling. You have to import, wow, so good, autopilot. StylesScoped. Okay, so .icon is width, I don't know, 40 pixels, height, 40 pixels. No, it's still big, 20? There we go. It has to be vertical-align middle.

[00:13:05]
Yep, and then the image on the top is just image. So let's say this is class, avatar. Let's make this 75. Yeah, ship it? [LAUGH]
>> Let's write some tests first, but then yes.
>> [LAUGH] margin-right. All right, I'm gonna call it as good as I'm gonna get given my styling capabilities.