1
00:00:00,710 --> 00:00:04,910
In the last video we got access to our I.D. inside of our results show screen.

2
00:00:04,960 --> 00:00:09,120
So now we need to take this I.D. and use it to make a request to the Yelp API.

3
00:00:09,130 --> 00:00:14,060
Let's first begin by getting a quick reminder of the route that we want to make our request to so back

4
00:00:14,050 --> 00:00:16,110
over on the yelp documentation page.

5
00:00:16,250 --> 00:00:21,250
Here's the route that we're going to use to make a request to get information about one single business.

6
00:00:21,250 --> 00:00:26,860
So we're gonna make a request to businesses slash and adjust that I.D. they're sponsored we get back

7
00:00:26,920 --> 00:00:29,470
this time around is not going to be an array of objects.

8
00:00:29,500 --> 00:00:34,590
Instead it's gonna be one single object with information about the business that we asked for.

9
00:00:34,600 --> 00:00:40,030
Remember inside this really big object there is a photos array so that's gonna be the array of images

10
00:00:40,050 --> 00:00:42,310
that we want to display to our user.

11
00:00:42,310 --> 00:00:48,880
So we need to once again make a request to the Yelp API let's first begin by adding in a little helper

12
00:00:48,880 --> 00:00:51,490
function inside of results show screen.

13
00:00:51,850 --> 00:00:57,280
I'm going to call this helper function something like get business or maybe better yet we could call

14
00:00:57,280 --> 00:00:58,940
it something like get results.

15
00:00:59,080 --> 00:01:04,270
Because remember we've kind of been using the term results in place of business or restaurant inside

16
00:01:04,270 --> 00:01:09,800
this application so we're going to eventually call get results and we're just going to assume that we're

17
00:01:09,800 --> 00:01:13,330
going to pass in the I.D. that we want to retrieve.

18
00:01:13,400 --> 00:01:18,980
So I can add in an argument here of idea like so so then inside of here we're going to need to use that

19
00:01:18,980 --> 00:01:25,040
Yelp instance or the Acciona instance I should say inside of our API Yelp dot J.S. file.

20
00:01:25,190 --> 00:01:33,790
So I want to import that at the very top so we'll import yelp from up one directory API Yelp like so

21
00:01:34,790 --> 00:01:37,920
so then inside of this function we'll do our request.

22
00:01:37,920 --> 00:01:44,640
I can make sure I use the async await syntax so I'll say await Yelp dot get and we're going to make

23
00:01:44,640 --> 00:01:46,720
a request to I can use back ticks right here.

24
00:01:46,720 --> 00:01:54,200
Notice the tactics slash and then our I.D. like so because I'm using the awake keyword inside this function

25
00:01:54,260 --> 00:01:59,930
I'm going to also mark the function as being a sync so now this is going to eventually give us a response

26
00:01:59,990 --> 00:02:00,950
object.

27
00:02:00,950 --> 00:02:08,120
And remember the data that we actually care about is on the response data property so we need to somehow

28
00:02:08,180 --> 00:02:09,860
capture this data right here.

29
00:02:09,860 --> 00:02:15,620
And once we get this data we need to re render our component and take the list of images inside of data

30
00:02:15,890 --> 00:02:18,070
and show them on the screen.

31
00:02:18,110 --> 00:02:21,820
Now once again I've used the term capture some data in re render the component.

32
00:02:21,910 --> 00:02:27,680
Remember anytime we talk about rendering and component we're always talking about making use of state.

33
00:02:27,740 --> 00:02:32,290
So we need to once again create a new state variable inside of this component that's going to hold onto

34
00:02:32,330 --> 00:02:37,460
this response so we get back from the Yelp API so to make use of state I'm going to go back up to the

35
00:02:37,460 --> 00:02:41,750
very top up here and from react I'm going to import you state.

36
00:02:41,780 --> 00:02:47,990
Like so then at the top of my component I'll create a new piece of state that I'll call simply result

37
00:02:52,510 --> 00:02:58,390
now previously and this last use of state that we had we had a default value of an empty array because

38
00:02:58,390 --> 00:03:01,550
that meant that we were waiting to get some array of search results.

39
00:03:01,660 --> 00:03:05,480
But this time around we're going to get just one single object by itself.

40
00:03:05,530 --> 00:03:11,370
So we need to somehow provide a default state argument or state value right here when we call you state.

41
00:03:11,710 --> 00:03:16,560
Usually whenever we expect to have an array of objects we'll have a default value of an empty array.

42
00:03:16,570 --> 00:03:21,010
You know that definitely makes sense it means that we have not yet fetched any results and you suddenly

43
00:03:21,010 --> 00:03:22,930
expect a state value to be an object.

44
00:03:22,930 --> 00:03:28,990
Usually we will use a default value of null which indicates that we do not yet have any data available.

45
00:03:29,020 --> 00:03:34,510
So in other words when results show screen first is rendered to our device the value of result is going

46
00:03:34,510 --> 00:03:40,480
to be simply no which indicates we've not yet fetched any data then eventually after we make our request

47
00:03:40,690 --> 00:03:41,920
we're going to update results.

48
00:03:42,040 --> 00:03:44,710
And then it will be an actual object.

49
00:03:44,710 --> 00:03:48,890
So at some point time when we try to get access to the data inside this result variable we're gonna

50
00:03:48,910 --> 00:03:52,210
have to first make sure that result is not null.

51
00:03:52,210 --> 00:03:57,190
Otherwise we tried to refer some different to some different properties on NULL which results in an

52
00:03:57,220 --> 00:03:59,090
error okay.

53
00:03:59,120 --> 00:04:04,500
So now we've got our piece of state set up we're going to take our response dot data and use it to update

54
00:04:04,560 --> 00:04:06,560
our result piece of state.

55
00:04:06,660 --> 00:04:10,620
So I'll say set result is response dot data

56
00:04:13,610 --> 00:04:16,950
so now we've got this helper function that we need to call inside this component.

57
00:04:16,990 --> 00:04:22,270
And remember we only want to call it exactly one time if we accidentally call it multiple times or if

58
00:04:22,270 --> 00:04:27,160
we just call it willy nilly whenever this component gets rendered we're going to end up making a ton

59
00:04:27,160 --> 00:04:29,140
of different API requests to you.

60
00:04:29,800 --> 00:04:34,080
So in order to make this request we're going to use that use effect hook once again.

61
00:04:34,240 --> 00:04:39,250
Remember that use effect is going to run a function exactly one time provided that we give a second

62
00:04:39,280 --> 00:04:41,460
argument of an empty array.

63
00:04:41,490 --> 00:04:49,250
So I went to import use effect at the top once again from react and then underneath get results I'll

64
00:04:49,250 --> 00:04:51,080
call it use effect.

65
00:04:51,080 --> 00:04:57,730
I'll pass in our aero function and then an empty array as the second argument then inside of here we

66
00:04:57,730 --> 00:05:07,990
can call get results and pass them the I.D. that we retrieved from our navigation parameter.

67
00:05:08,160 --> 00:05:10,150
Okay so this is looking pretty good.

68
00:05:10,280 --> 00:05:12,500
So I think we're ready to do a quick test here.

69
00:05:12,500 --> 00:05:16,490
I think maybe the last thing we have to do is try to pronounce some information that we get back inside

70
00:05:16,490 --> 00:05:17,610
this result.

71
00:05:17,690 --> 00:05:23,090
So I'm gonna add in just a console log underneath our I.D. and I'll put in a console log of results

72
00:05:23,090 --> 00:05:31,000
like so I'll then save this flip back over I'll tap on one of the results and then hopefully we should

73
00:05:31,000 --> 00:05:34,150
have a console log that describes that particular restaurant.

74
00:05:34,270 --> 00:05:37,520
So I'll go back over to my terminal and back over here.

75
00:05:37,530 --> 00:05:42,020
Here's my big console log and I can see right away that there's the photos array which means that we've

76
00:05:42,030 --> 00:05:45,460
probably fetched some information about that very particular restaurant.

77
00:05:46,140 --> 00:05:47,440
Awesome.

78
00:05:47,460 --> 00:05:47,700
Okay.

79
00:05:47,730 --> 00:05:48,810
So now we've got our data.

80
00:05:48,810 --> 00:05:52,620
Let's take a quick pause and now we can figure out how to show this information on the screen in the

81
00:05:52,620 --> 00:05:53,250
next video.