1
00:00:01,120 --> 00:00:02,980
Let's start working on this little search widget.

2
00:00:03,220 --> 00:00:07,570
The goal of this search widget is to show a little text input right here where a user can type in some

3
00:00:07,570 --> 00:00:08,020
topic.

4
00:00:08,530 --> 00:00:14,160
We are then going to make that term right there, do a search of the Wikipedia API and then show her

5
00:00:14,200 --> 00:00:16,510
some results immediately underneath it.

6
00:00:17,080 --> 00:00:22,330
If you're not familiar with Wikipedia and check it out at Wikipedia dot org, it's essentially an online

7
00:00:22,360 --> 00:00:23,170
encyclopedia.

8
00:00:23,800 --> 00:00:27,000
So we're going to do a search, let's say, or something like programming.

9
00:00:28,030 --> 00:00:30,170
And then I would expect to see some results.

10
00:00:30,500 --> 00:00:35,210
Kind of like what you see right here, it's not going to look entirely identical API that we're going

11
00:00:35,210 --> 00:00:38,990
to using be using doesn't quite give us back topic based results.

12
00:00:39,350 --> 00:00:42,410
Instead, we're just going to kind of have it kind of like this listing right here.

13
00:00:42,440 --> 00:00:43,880
This is kind of a good representation.

14
00:00:44,330 --> 00:00:49,040
We'll show the title of some article and then the a summary of that article.

15
00:00:49,070 --> 00:00:50,120
Immediately after it.

16
00:00:50,870 --> 00:00:52,520
And we're just going to have a slightly different format.

17
00:00:52,550 --> 00:00:54,390
So it's gonna look kind of like what you see right here.

18
00:00:55,030 --> 00:00:56,030
So that's the general idea.

19
00:00:56,780 --> 00:01:01,010
We first need to understand a little bit more about the API itself and then figure out some architecture.

20
00:01:01,280 --> 00:01:06,710
But this search component or list component together, first off, how do we use the Wikipedia API?

21
00:01:07,520 --> 00:01:12,200
Well, this is probably the easiest API that we're gonna use in this entire course because it does not

22
00:01:12,200 --> 00:01:15,860
require any authentication, any API keys or anything like that.

23
00:01:16,430 --> 00:01:19,520
All we have to do is make a get request where you are.

24
00:01:19,520 --> 00:01:22,130
L like this right here at the very end.

25
00:01:22,220 --> 00:01:28,100
There is a query parameter called s r search and we're going to say s our search equals.

26
00:01:28,130 --> 00:01:33,320
And then whatever we want to search for by put inside of your search term, we will end up replacing

27
00:01:33,320 --> 00:01:35,780
that with whatever the user types into that text input.

28
00:01:36,310 --> 00:01:37,610
The user types and programming.

29
00:01:37,880 --> 00:01:40,620
We would end up making requests to something like this right here.

30
00:01:40,700 --> 00:01:42,560
So s our search equals programming.

31
00:01:43,550 --> 00:01:44,900
You do not have to write out this full.

32
00:01:44,900 --> 00:01:45,640
You are all right here.

33
00:01:45,770 --> 00:01:49,250
I just want to give you an idea of what the request is that we're going to make.

34
00:01:50,080 --> 00:01:55,010
I'm going to really quickly copy this link and put it inside my browser so you can see the kind of data

35
00:01:55,040 --> 00:01:56,420
that we're gonna get back in response.

36
00:01:57,200 --> 00:01:59,480
You can see that we get back some very simple Jason.

37
00:02:00,740 --> 00:02:05,450
As a reminder, I run a little formatter inside my browser to automatically format Jason data.

38
00:02:05,810 --> 00:02:07,770
So if you manually type in this, you are all right here.

39
00:02:07,850 --> 00:02:12,170
You're going to see probably a big blob of text unless you also get that formatting extension.

40
00:02:12,990 --> 00:02:14,120
So in the response we get back.

41
00:02:14,240 --> 00:02:17,450
There is a query property inside, a query.

42
00:02:17,480 --> 00:02:18,980
There is a search property.

43
00:02:19,460 --> 00:02:24,290
And that's a reference to an array of search results for every search results.

44
00:02:24,560 --> 00:02:27,200
We have a title, a page I.D..

45
00:02:27,890 --> 00:02:33,800
And most importantly, a snippet and a snippet is kind of a summary of the article or a kind of a headline

46
00:02:33,860 --> 00:02:34,460
of the article.

47
00:02:35,320 --> 00:02:38,270
So the title of the article is What We Are Going to show.

48
00:02:39,210 --> 00:02:39,870
Right here.

49
00:02:41,070 --> 00:02:46,260
And then the summary of the article or the snippet is what we're going to show right after it.

50
00:02:46,950 --> 00:02:47,790
And that's pretty much it.

51
00:02:48,310 --> 00:02:49,860
But we have to do is take these are input.

52
00:02:49,950 --> 00:02:50,790
Make a request.

53
00:02:51,240 --> 00:02:52,650
Do a map over the results.

54
00:02:52,710 --> 00:02:53,880
Show the results on the screen.

55
00:02:54,340 --> 00:02:58,380
This is extremely similar to what we have done several times throughout this course.

56
00:02:58,440 --> 00:03:00,540
We're really just doing a search, building a list.

57
00:03:00,900 --> 00:03:05,490
The only difference this time around is that we are making use of hooks to implement all this stuff.

58
00:03:05,520 --> 00:03:06,690
That's the only change here.

59
00:03:07,900 --> 00:03:12,430
All right, Lessing, when I mentioned very quickly, is the overall structure now, remember on that

60
00:03:12,430 --> 00:03:13,600
YouTube application?

61
00:03:13,630 --> 00:03:19,450
We had several different components, like a search bar component and an app and a results list or video

62
00:03:19,450 --> 00:03:24,830
list and all those different components in this very simple search or listing application are gonna

63
00:03:24,850 --> 00:03:25,360
put together.

64
00:03:25,600 --> 00:03:29,170
We're going to build everything inside of one single search component.

65
00:03:30,180 --> 00:03:31,680
That's going to be displayed by the app.

66
00:03:32,220 --> 00:03:34,830
It's not going to take any props from the app or anything like that.

67
00:03:34,920 --> 00:03:36,450
So, again, it's gonna be one hundred percent.

68
00:03:36,680 --> 00:03:39,150
So to me, 100 percent self-contained.

69
00:03:40,270 --> 00:03:43,150
The search component itself will have two pieces of state.

70
00:03:43,600 --> 00:03:48,670
First off, we'll have a term which is whatever user is typing into that text input, whenever a user

71
00:03:48,670 --> 00:03:50,380
types into that text input.

72
00:03:50,590 --> 00:03:54,910
We're then going to send that off to the Wikipedia API and do a search.

73
00:03:56,080 --> 00:03:57,760
That's going to give us back some results.

74
00:03:58,150 --> 00:04:01,510
We're going to store those results on some piece of state as well.

75
00:04:02,090 --> 00:04:06,910
So as soon as we change that results piece of state, our component will re render and we should render

76
00:04:06,910 --> 00:04:09,700
that list of results onto the screen and show to the user.

77
00:04:10,730 --> 00:04:10,920
All right.

78
00:04:10,970 --> 00:04:12,020
Well, that's pretty much the summary.

79
00:04:12,170 --> 00:04:16,190
Like I said, it is really similar to what we've done several times throughout this course.

80
00:04:16,460 --> 00:04:19,730
The only difference is that we are introducing some additional hook.

81
00:04:20,000 --> 00:04:20,480
That's it.

82
00:04:20,800 --> 00:04:23,180
So we can really focus on that hook and understand how it works.

83
00:04:24,180 --> 00:04:25,320
Well, enough lecturing.

84
00:04:25,440 --> 00:04:29,430
Let's take a pause and then start putting this search component together in the next video.