TypeScript Fundamentals TypeScript Fundamentals

Challenge 9: Autocomplete, Part 3

Check out a free preview of the full TypeScript Fundamentals course:
The "Challenge 9: Autocomplete, Part 3" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students work on refactoring state management in the project.

Get Unlimited Access Now

Transcript from the "Challenge 9: Autocomplete, Part 3" Lesson

[00:00:00]
>> Mike North: This one should be relatively easy. Our job is to build a place search container component that wraps around our play search list. And its job is to manage state but not trigger any of its own re-rendering. So basically, what I'm aiming that we do here is, take away some of the responsibility from the app component and move it into another component.

[00:00:24] And it's our job to implement that in this phase. So we've gone from the presentation only. We had to implement that another list and now the thing that's basically sending out the API calls and then we're gonna go even one level deeper. So I'll show you what this exercise looks like.

[00:00:42] How the starting point is a little different from the last one.
>> Mike North: All right, so our app.tsx. You see it right away. This is ultra minimal, there is nothing going on here of interest, right? This should be a quicker exercise by the way. So app.tsx,it was previously doing some work.

[00:01:12] It previously had some state. Now it's a stateless functional component that doesn't even have any props. Right and it's just its job is to basically put this thing on the screen. This place search container, it has a function here called begin search. Which think of that, sorry I changed my convention slightly.

[00:01:36] Formally known as tri-search. I did this cause I didn't have a tri-catch and I felt like, Try seems to imply that there is some insulation from failure and there is not. So begin search, same thing as try search. So you are gonna want to have you placed search result list, which is already set up for you, right?

[00:01:58] This is your play search result list, the thing that we just solved. That's already here waiting for you, a version of it that's basically the same that's what we built, right? So here's our search result and you can see like the different items for the different scenarios. So like we've got that check mark there.

[00:02:15] Now, it's our job to basically do the non-visual stuff that drives this component. And feel free to refer back to the app component from the last exercise, but I want us to lay the foundation out here. Now, we've got a new module in place. Called autocomplete.ts.
>> Mike North: And this is we've taken our async function and we've just refactored it out into another file, that's all.

[00:02:50] Now, we're still awaiting, we're logging some stuff out here just so that we can see like at different phases what's happening. Just kind of keeping track of how things are progressing. This still is a promise, this async function store all kind of promise that resolves two place details just as before.

[00:03:10] So your task now is to leverage this autocomplete.js, flesh out the begin search function in this place search container component. And basically hook it up in some way to this ready made place search result component. So that it behaves just as it did as where we left off in the previous solution.

[00:03:34] So you see, the theme here is, you kind of get everything in the app except your target exercise and now we've moved like one level upstream. And then finally, we're going to actually take care of the async await stuff on our own in the exercise after this one.

[00:03:50] And then we will have like, touched all areas and at some point have implemented each aspect of this little autocomplete example. So everyone understand what the instructions are here? So you shouldn't be doing much visual stuff here you should just be sort of handling the asynchrony and the promises and dealing with state manipulation.

[00:04:11] This is a container component that it should not be doing, like for a container component, it's job is basically to render something else. Let it take care of the complicated visual presentation and its job is just to manage state. So let's take a half hour for that and, let's just do 20 minutes, this is one is a little bit easier than the last one.

[00:04:34] So at 2:50 will go through the solution and then will dive into this last one. Which should be a little bit more involved but it's like the weight lifting for a single weight, where you will understand how this works in depth. You have a very high chance of being able to wrangle this in even complex scenarios once we implement our own version of it.