1
00:00:00,150 --> 00:00:03,150
Perfect ones were familiar with our API.

2
00:00:03,600 --> 00:00:07,310
Now, of course, let's set up Futch in the context.

3
00:00:07,740 --> 00:00:12,300
So right after my state values, I would want to come up with my function.

4
00:00:12,680 --> 00:00:16,350
We call this Fritsche Drunk's No.

5
00:00:16,380 --> 00:00:24,090
One is equal to my error function, but I would want the key keyword, since, of course I would want

6
00:00:24,090 --> 00:00:25,910
to use that syntax as well.

7
00:00:26,250 --> 00:00:28,980
I have my async beautiful.

8
00:00:29,400 --> 00:00:36,570
And then inside of the function, Botibol right away set up to try and catch it here, will try to fetch

9
00:00:36,690 --> 00:00:42,180
for cocktails and then if we have some kind of error, at least we can cancel it.

10
00:00:42,330 --> 00:00:45,750
So we're going to go with a log and then error.

11
00:00:46,170 --> 00:00:53,610
Now, let's also keep one thing in mind where we will call this function every time we type something

12
00:00:53,970 --> 00:00:55,650
in the input.

13
00:00:55,890 --> 00:00:56,340
Correct.

14
00:00:56,670 --> 00:01:02,340
And essentially, once we've got our data back, once we return a list of cocktails, we'll also have

15
00:01:02,340 --> 00:01:05,640
to set that loading to force.

16
00:01:06,110 --> 00:01:10,770
That's why when we start pitching, we always want to go with set loading.

17
00:01:11,160 --> 00:01:17,220
Antrel, again, if you want to double check that, if you go to a complete cocktail's, navigate home.

18
00:01:17,490 --> 00:01:19,260
Notice how we type, right.

19
00:01:19,500 --> 00:01:23,540
And then we showcase that loading that is important.

20
00:01:23,550 --> 00:01:26,820
So every time we start watching, we go with set loading.

21
00:01:27,420 --> 00:01:31,410
And the reason why I'm telling you that, because you might find that redundant, you might say, hey,

22
00:01:31,410 --> 00:01:33,720
listen, we already fetching by default.

23
00:01:34,080 --> 00:01:39,690
Why when we start switching, we still set loading to show up because we'll use this function multiple

24
00:01:39,690 --> 00:01:45,560
times, not just by default, but also every time we type something in the input.

25
00:01:45,900 --> 00:01:52,620
And now let's set up our functionality in a try block and I'm going to go again with some kind of response

26
00:01:53,040 --> 00:01:55,050
I want is equal to await.

27
00:01:55,440 --> 00:01:58,530
Then I'm fetching and now let's think about it.

28
00:01:58,950 --> 00:02:01,220
I have the URL correct.

29
00:02:01,410 --> 00:02:09,450
So this is the URL, if I would want to get cocktail by name and here, of course I'll have that changing

30
00:02:09,630 --> 00:02:10,230
primer.

31
00:02:10,680 --> 00:02:16,110
So what I would want is to set up a template string and first I'm going to say, yeah, grab me that

32
00:02:16,350 --> 00:02:17,490
you are of value.

33
00:02:17,880 --> 00:02:18,540
OK, good.

34
00:02:18,840 --> 00:02:22,890
And then here, right next to it, I'll place that search term.

35
00:02:23,220 --> 00:02:25,440
That's why I added some kind of value here.

36
00:02:25,860 --> 00:02:34,380
So I get some cocktails right away by default once my app renders that's all, that's all we're doing.

37
00:02:34,650 --> 00:02:38,400
And we can probably already guess that as we're going to be typing.

38
00:02:39,400 --> 00:02:46,140
We'll be calling this function, this value, of course, will change in our use of fact, we will refresh

39
00:02:46,210 --> 00:02:52,920
those new drinks that match the search term that is coming from our input from here right next to it.

40
00:02:53,470 --> 00:02:59,730
We all set up our search term as well, which by default is a OK.

41
00:03:00,810 --> 00:03:07,030
Now, I would want to deal with data accounts and then data I want is equal to await.

42
00:03:07,420 --> 00:03:09,160
And then we go with response.

43
00:03:09,160 --> 00:03:09,640
Jason.

44
00:03:11,490 --> 00:03:19,230
Jason, we invoke it and effectively will have two options, either data will be array of cocktails

45
00:03:19,710 --> 00:03:21,570
or it is going to be no.

46
00:03:22,020 --> 00:03:26,160
So let's consider log data just so you trust me.

47
00:03:26,700 --> 00:03:29,220
And I'm going to navigate back to the cocktails.

48
00:03:29,730 --> 00:03:34,340
And if I inspect, by the way, of course, I won't be able to see anything because I'm not watching.

49
00:03:34,740 --> 00:03:36,490
So let's set up our use of fact.

50
00:03:36,540 --> 00:03:38,790
We're going to go with years a fact.

51
00:03:38,790 --> 00:03:39,750
We will invoke it.

52
00:03:40,020 --> 00:03:41,970
And I would want to invoke this.

53
00:03:41,970 --> 00:03:48,090
Frege drinks every time something changes about my search term.

54
00:03:48,450 --> 00:03:55,900
So we go here with search term and we go with fetch and drinks like you course.

55
00:03:56,130 --> 00:03:56,550
Correct.

56
00:03:56,730 --> 00:03:57,860
So I invoke the function.

57
00:03:57,880 --> 00:03:59,250
We navigate the bigger screen.

58
00:03:59,490 --> 00:04:00,480
And of course there is.

59
00:04:00,510 --> 00:04:01,740
This is what I'm getting back.

60
00:04:02,070 --> 00:04:07,230
I'm getting back the object with a drinks property, which is an array.

61
00:04:07,650 --> 00:04:13,350
And then each item in there is that drink, which is represented, of course, by the object.

62
00:04:13,740 --> 00:04:16,830
Now what happens if I type a bunch of gibberish here?

63
00:04:17,160 --> 00:04:22,980
So I'm going to go with some kind of name that shouldn't return any cocktails and of course, doesn't

64
00:04:23,610 --> 00:04:25,490
have drinks equal to now.

65
00:04:26,070 --> 00:04:31,220
So what we could do is set up here a if statement.

66
00:04:31,440 --> 00:04:37,800
So first, all the structured drinks, I say, yeah, grab me the drinks property from my data and then

67
00:04:37,800 --> 00:04:38,700
I have two options.

68
00:04:38,700 --> 00:04:42,410
Either it is going to be now or is going to be in right now.

69
00:04:42,420 --> 00:04:50,520
Keep in mind, it is not a error as far as patching error we are getting data is just nothing there.

70
00:04:50,670 --> 00:04:51,910
We have it now, OK?

71
00:04:51,930 --> 00:04:54,530
That's why we are not placing that in a catch.

72
00:04:55,020 --> 00:04:56,190
We're still placing it here.

73
00:04:56,250 --> 00:04:58,350
We say, yeah, try to patch that data.

74
00:04:58,740 --> 00:05:01,650
If data is essentially null.

75
00:05:01,950 --> 00:05:06,030
Yeah, then we'll set it back the cocktail's to an empty array.

76
00:05:06,450 --> 00:05:12,330
Because remember that case, we are displaying some kind of message on screen.

77
00:05:12,450 --> 00:05:12,920
Correct.

78
00:05:13,230 --> 00:05:20,040
So in here I'm going to say if drunk's so if it is not null than I would want to do something.

79
00:05:20,370 --> 00:05:23,190
And that is going to be mapping over my right.

80
00:05:23,510 --> 00:05:31,320
Or if it is null, well then I would want to go with else and I'm just going to go with set cocktails

81
00:05:31,680 --> 00:05:36,030
and I'll set them equal to an empty array, not set loading.

82
00:05:36,210 --> 00:05:36,540
All right.

83
00:05:36,870 --> 00:05:39,600
Set cocktails and that one will be empty.

84
00:05:39,930 --> 00:05:41,040
Again, this is happening.

85
00:05:41,310 --> 00:05:45,420
If cocktails are now now still would not try, though.

86
00:05:45,660 --> 00:05:49,560
I would want to go with set loading and set it equal to false.

87
00:05:49,950 --> 00:05:55,260
And the same is going to work out here with another or go set loading and then force.

88
00:05:55,620 --> 00:06:02,670
So in both cases, once we get something back or there's some kind of error, now of course we have

89
00:06:02,670 --> 00:06:06,540
the set loading the force and notice now once I saved it.

90
00:06:07,470 --> 00:06:13,650
Since I have jibberish here, I have used it and then some kind of search term, no, definitely shouldn't

91
00:06:13,650 --> 00:06:14,790
return cocktail's.

92
00:06:15,120 --> 00:06:19,310
Now, of course I changed my loading from true to false.

93
00:06:19,650 --> 00:06:25,700
And since we're handling that already in our cocktail's, we said cocktail's length is less than one.

94
00:06:25,980 --> 00:06:28,160
And of course we have our message.

95
00:06:28,470 --> 00:06:30,360
Hopefully that is clear.

96
00:06:30,690 --> 00:06:35,550
And now it's going to be annoying part where we'll have to iterate over that list.

97
00:06:35,850 --> 00:06:42,510
So I'm going to go back to a meaning, I'm going to go back to some kind of search term that should

98
00:06:42,840 --> 00:06:44,160
yield the results.

99
00:06:44,340 --> 00:06:50,250
And don't freak out if you change this and you still get this, no cocktail's match your search.

100
00:06:50,640 --> 00:06:57,630
Because remember, even though we don't explicitly set it over here in the US because of course, our

101
00:06:57,630 --> 00:06:59,370
drunk's is an array.

102
00:06:59,730 --> 00:07:01,080
We have this by default.

103
00:07:01,170 --> 00:07:03,660
Remember, by default, this is an empty array.

104
00:07:03,840 --> 00:07:09,120
And then in the cocktail list, if we're not loading, we're still checking for the length of.

105
00:07:09,120 --> 00:07:15,980
All right, once we set up this properly and of course, we'll display our list as well.

106
00:07:16,320 --> 00:07:18,480
So we go here where we have the drinks.

107
00:07:19,550 --> 00:07:25,460
And then, like I said, I would want to iterate over them, so I'm going to call this new drunk's we're

108
00:07:25,460 --> 00:07:29,200
going to go with new and online cocktails.

109
00:07:29,780 --> 00:07:32,030
No one is equal to drinks.

110
00:07:32,450 --> 00:07:34,190
And then I would want a map over them.

111
00:07:34,820 --> 00:07:37,720
I'll be lazy and I'll just call this item online.

112
00:07:37,730 --> 00:07:44,060
Like I said, this is going to be that annoying part where I one of the structure, those properties

113
00:07:44,300 --> 00:07:46,080
are of those objects.

114
00:07:46,400 --> 00:07:51,760
So what we're looking for and by the way, is this one, what we're looking for are these properties

115
00:07:51,770 --> 00:07:55,040
now, of course, around the structure, all of them essentially.

116
00:07:55,040 --> 00:08:02,150
I'm looking for the idea of drink than the drunk name, the thumbnail, whether it is alcoholic or not,

117
00:08:02,450 --> 00:08:05,040
and what kind of glass it uses.

118
00:08:05,300 --> 00:08:08,200
Now, if you want to get more properties, that is definitely up to you.

119
00:08:08,210 --> 00:08:15,500
But in my case, I'm going to go with it drunk that as they are drunk as they are.

120
00:08:15,500 --> 00:08:23,180
And then I'm looking for the image so drunk and I believe the name was I'm now like, so then we have

121
00:08:23,180 --> 00:08:25,670
SDR and an alcoholic.

122
00:08:26,550 --> 00:08:28,080
Alcoholic.

123
00:08:29,530 --> 00:08:32,860
And on the last one is start and then glass.

124
00:08:32,890 --> 00:08:38,980
So what kind of glass we're using to serve that cocktail matters, of course, coming from the item

125
00:08:39,370 --> 00:08:45,520
and now in order to make it easier for us, I'm going to say that I would want to return a new object

126
00:08:45,820 --> 00:08:48,520
and I'll set up nice property.

127
00:08:48,520 --> 00:08:55,270
Names that are much shorter term here will be equal to the idea of drunk that I would want to go with

128
00:08:55,280 --> 00:08:57,090
name, which will be equal.

129
00:08:57,100 --> 00:09:03,180
Of course you might as they are drunk that I have the image, which of course is my thumbnail.

130
00:09:03,550 --> 00:09:08,430
So as these are and then drunk thumbnail, we have the info.

131
00:09:09,310 --> 00:09:14,980
Which is going to be whether it is alcoholic or not, and then sorry, not from now, what we're looking

132
00:09:14,980 --> 00:09:17,890
for, they and non-alcoholic.

133
00:09:18,310 --> 00:09:21,130
And then lastly, I would want to go with my glasses.

134
00:09:21,150 --> 00:09:27,840
So let's add a glass property and my one will be equal to SDR and glass.

135
00:09:28,480 --> 00:09:31,240
So we return right now, this object.

136
00:09:31,470 --> 00:09:32,000
Awesome.

137
00:09:32,380 --> 00:09:40,300
So in the new cocktails, we should have the array with these items and now we have much more simpler

138
00:09:40,300 --> 00:09:44,230
property names and we don't have, of course, that many properties.

139
00:09:44,710 --> 00:09:53,290
So right after I map over, I also want to call set cocktails and then I pass in that new cocktails

140
00:09:53,650 --> 00:09:54,430
are it?

141
00:09:54,670 --> 00:09:56,590
And now we have the cocktail list.

142
00:09:56,830 --> 00:09:58,340
And of course, there's nothing in the list.

143
00:09:58,690 --> 00:10:03,880
This is something we're going to do in the next video, but at least we should have the array.

144
00:10:04,150 --> 00:10:10,630
And if we want to double check, we just navigate to the cocktail list and then cancel the cocktails.

145
00:10:11,590 --> 00:10:18,630
Cocktails and we navigate to the bigger screen, we should have twenty five cocktails with the property

146
00:10:18,640 --> 00:10:21,400
names that are much more easier to manage.