TypeScript Fundamentals

TypeScript Fundamentals Challenge 7: Autocomplete, Part 1


This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.

Check out a free preview of the full TypeScript Fundamentals course:
The "Challenge 7: Autocomplete, Part 1" 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 code an autocomplete feature.

Get Unlimited Access Now

Transcript from the "Challenge 7: Autocomplete, Part 1" Lesson

>> Mike North: So we're gonna build step by step an auto complete, where we can type in something like that and we will get some results coming back. Now this is, anyone who's built one of these things is, they know it is more complex than it initially seems. Even what I just showed you now, it has a pitfall where we saw all of those previous requests kind of come in.

[00:00:27] We have a raised condition here even at the point where I'm gonna have you finish your last exercise. And together, we're gonna take that to a logical conclusion where we can get rid of that weird behavior. Here just again, if you look carefully, all of my intermediate results end up hitting and replacing each other.

[00:00:47] See how we have got that flashing? Or if we do,
>> Mike North: We're failing to ignore intermediate results, even as a new key is pressed on. So the first thing we're gonna do is build one of these objects here, one of the search result rows. And we're gonna implement this as a stateless, functional component.

[00:01:13] So just to show you the exercise here.
>> Mike North: So here is an interface for place details. I've given you some code that we're gonna walk through in a moment. This is sort of your starting point for the project. And we're gonna move through four stages of this exercise.

[00:01:32] This first stage is just about those result row components. The next exercise is gonna be for the list of results treating that as an array where we're handling the situation where like the search is in progress. So we'll add in this idea of state, like search is currently in progress, or the user hasn't typed in anything yet, or there are no results found.

[00:01:52] There are different sort of application states you have to deal with. Then we'll deal with this concept of a stateless, or a stateful container component wrapping presentation component, this is a popular react design pattern. And then finally we will deal with handling the asynchrony ourselves, the asynchronous work ourselves instead of using async in a way.

[00:02:15] We will build our own async in way in an effort to understand exactly what's going on here. So one of the things you're getting for free is interfaces that reflects the data you're getting back from your API. This is great because now, when you're receiving these objects, you basically already know what properties you're allowed to use and the TypeScript compiler will be happy with you.

[00:02:41] So, we want a stateless functional react component for representing one of these items. And this is a row in that list of search results. You're gonna wanna include at least five pieces of data from this menu here. In it I've used just snapshots, if you've used this before it takes HTML snapshots of a component in its working state for various scenarios.

[00:03:03] So if you look in that folder there is a file there that will give you some clues as how to setup your HTML. If you're not clear as to how to look at that, please ping me. And I will explain it to you. So we're gonna run npm test.

[00:03:20] Sorry. It's gonna be npm start autocomplete-sfc.
>> Mike North: My mistake. npm start autocomplete-sfc. If you run npm test, it's gonna basically assert that your HTML looks exactly like mine did. I care much less about your passing that kind of test than getting some result showing up on the screen.

[00:03:45] And know that as we progress from exercise to exercise, you're gonna get a more enriched starting point. So you're not carrying your work along with you. We're gonna make sure we all stay on the same path. And you will get my solution to this problem in the next exercise instead of having to worry about getting off track on this first step and that causing trouble downstream.

[00:04:08] So I'm gonna walk you through the starting point for the code, so you know the ingredients you have to work with here.
>> Mike North: So here we're starting up the stateless functional component exercise, and this is what we get to start with. So you can see that I've given you a hard-coded search already.

[00:04:36] So you are always searching for donuts, no matter what you do, you're searching for donuts. And you don't have to worry about how this data arrives. Your job is to turn these boring components into something a little bit more rich. So if we look in the Autocomplete SFC, which is Stateless Functional Components, we'll start with Index, and you can see we've got this app component here, takes no props.

[00:05:02] Inside the app, we've got a PlaceDetails state object. Don't worry about the state fullness here. Just understand that when we're rendering. So you're gonna wanna have something like this, that passes in a place search result, like these place result objects, right. You're gonna wanna make it so that you're passing that data into a rich component that you define.

[00:05:37] You're gonna have to create your own file, or maybe we have a starting point file.
>> Mike North: Nope, I'm on the solutions branch, whew. I thought I checked in the answer there. So there's your starting point, [LAUGH] there's your starting point. We've got just a div here. So the file exists just to kind of make this app work, and so it doesn't throw a bunch of errors.

[00:06:05] But your job is gonna basically be, okay, instead of for each search result rendering a paragraph tag. You're going to say, okay, well, we're gonna create this rich component. And just use this idea of this place, details, interface, and build that component out so that it looks kinda like these snapshots here.

[00:06:30] Right, so if we get rid of some of that, reclaim some space, you can see this would be a good starting point for grabbing some HTML and seeing what the desired end result might look like. So I'm gonna give you 20 minutes for this. And then we're gonna iteratively start taking on more and more of this challenge, and we'll end up with that working autocomplete by the end of the day.