1
00:00:00,360 --> 00:00:01,470
Not bad, not bad.

2
00:00:01,540 --> 00:00:07,500
We have our structure, we have the easy purchase, and of course, let's deal with the big beast,

3
00:00:07,500 --> 00:00:10,820
which is going to be your homepage and home page.

4
00:00:10,860 --> 00:00:16,920
We're going to have two components, one search form where we can type the text and of course, we'll

5
00:00:16,920 --> 00:00:21,580
be searching for cocktails and then a list of cocktails.

6
00:00:21,900 --> 00:00:24,650
Now, each cocktail will be represented by this card.

7
00:00:25,020 --> 00:00:32,160
So if you click on details and of course, you can navigate to that single cocktail page, which we're

8
00:00:32,160 --> 00:00:33,600
going to work on over the last.

9
00:00:33,990 --> 00:00:41,520
So now I would want to set up the basic structure for both of these components and then also the basic

10
00:00:41,520 --> 00:00:47,970
structure in the context, because the initial fetching will do in the context.

11
00:00:48,240 --> 00:00:51,080
And that's why I would want to set up my state values.

12
00:00:51,300 --> 00:01:00,210
And then, of course, also right away use my global custom hook to grab those values and place them

13
00:01:00,210 --> 00:01:01,620
inside of the components.

14
00:01:01,920 --> 00:01:05,310
And then, of course, one by one will work on those components as well.

15
00:01:05,850 --> 00:01:12,240
So here I would want to close everything that I have been working on the files.

16
00:01:12,570 --> 00:01:16,280
And then what I would want to open is the home page.

17
00:01:16,600 --> 00:01:19,260
Now, I'm already importing both of these components.

18
00:01:19,410 --> 00:01:22,350
I have cocktail list as well as a search form.

19
00:01:22,620 --> 00:01:24,240
And I'll just turn this around.

20
00:01:24,240 --> 00:01:28,110
I'll say we're turning the main online course.

21
00:01:28,110 --> 00:01:32,370
I would want to get a cocktail list and also a search form.

22
00:01:32,880 --> 00:01:38,370
Now, I think the order is a bit off because I want to start with search form and then the cocktail

23
00:01:38,370 --> 00:01:38,620
list.

24
00:01:38,810 --> 00:01:44,980
So now if I check it out, I have both of these components and effectively we're done with our work

25
00:01:45,150 --> 00:01:45,890
home address.

26
00:01:45,930 --> 00:01:47,850
We're not going to return here anymore.

27
00:01:48,300 --> 00:01:51,390
And I think we can navigate to the context.

28
00:01:51,390 --> 00:01:57,920
And then, like I said, I would want to set up some basic state values the moment no functionality,

29
00:01:58,170 --> 00:02:03,150
just state values, pass them down and then grab them in my components.

30
00:02:03,480 --> 00:02:06,720
So I have the basic structure in place.

31
00:02:07,020 --> 00:02:11,300
So I'm going to go with loading because there's going to be a loading state value.

32
00:02:11,670 --> 00:02:17,240
We're going to go set loading here and by default, I'll set it right away to be true.

33
00:02:17,670 --> 00:02:24,890
So we're going to go with it through here and then we have a search term and set search term.

34
00:02:25,200 --> 00:02:30,380
So if we think of search term, we need to think about our form.

35
00:02:30,810 --> 00:02:38,790
So in form, of course, we'll be typing something and I would want to grab that value and add it to

36
00:02:38,820 --> 00:02:39,690
my fetch.

37
00:02:40,440 --> 00:02:44,720
So in the future, of course, as I'm typing, I'll be getting different values.

38
00:02:45,000 --> 00:02:47,160
So we'll be putting different cocktail's.

39
00:02:48,350 --> 00:02:56,390
So let's go here and then let's say search terms or whatever, we're typing in the input and of course

40
00:02:56,390 --> 00:03:05,480
the function is set search, and then we're looking for a term that is equal to a huge state and by

41
00:03:05,480 --> 00:03:07,080
default, all set it equal to.

42
00:03:07,610 --> 00:03:11,620
And I'll show you, of course, why I'm doing that in a few videos.

43
00:03:11,930 --> 00:03:17,840
Now, the more you can play whatever you want is just essential to have something, because I would

44
00:03:17,870 --> 00:03:22,280
want to display already some cocktails when the app loads.

45
00:03:22,490 --> 00:03:25,880
OK, and then the last one is the actual cocktails.

46
00:03:26,030 --> 00:03:27,800
So I'm going to go with Consed and then.

47
00:03:30,340 --> 00:03:36,130
And then I'll have my set cocktail's that, of course, is my function.

48
00:03:37,380 --> 00:03:45,360
And then I want to set it equal to the U.S. state and by default, it's just going to be an empty.

49
00:03:45,370 --> 00:03:45,790
All right.

50
00:03:46,500 --> 00:03:47,850
And once we have the set up.

51
00:03:49,020 --> 00:03:54,990
Where we have the basic hello, because that will turn into the object, so double Curley's and then

52
00:03:54,990 --> 00:03:59,060
we just go with loading, then of course search term.

53
00:03:59,400 --> 00:04:02,220
And also I would want to go with cocktails.

54
00:04:02,820 --> 00:04:08,510
And one last thing that I would do in the past and in this case is also that set search term.

55
00:04:08,970 --> 00:04:10,760
So I'm looking for that function.

56
00:04:11,370 --> 00:04:14,940
And now, of course, I want to navigate to both of those components.

57
00:04:15,210 --> 00:04:21,990
The ones that I'm rendering one, of course, is the search form and the other one is the cocktail list

58
00:04:22,380 --> 00:04:26,660
and then grab those values using my global hook.

59
00:04:26,970 --> 00:04:30,770
So I have used global context and then I pass in the app context.

60
00:04:31,050 --> 00:04:37,320
So now, of course, in both components, I can access these values, whether that's loading search

61
00:04:37,320 --> 00:04:42,560
term cocktails or the function by the name of that search term.

62
00:04:43,140 --> 00:04:47,130
And I think I'm going to start with a search form.

63
00:04:48,080 --> 00:04:54,680
And in this component, I have my global context, and essentially I'm just looking for a function by

64
00:04:54,680 --> 00:04:57,060
the name of that search term.

65
00:04:57,590 --> 00:05:05,810
So every time we're going to type, we are going to invoke the function, the set search term and will

66
00:05:05,810 --> 00:05:09,920
pass in the value that is coming from the form.

67
00:05:10,250 --> 00:05:15,470
OK, now first let's set up those values and then later we'll worry about functionality.

68
00:05:15,690 --> 00:05:17,000
So we go with CONSED.

69
00:05:17,390 --> 00:05:24,350
We would want the structured set search and then we're looking for term not as equal to my use global

70
00:05:24,350 --> 00:05:27,530
context and I just invoke it now.

71
00:05:27,530 --> 00:05:29,900
If you want to control it, definitely do so.

72
00:05:30,140 --> 00:05:35,810
But in my case I'm going to skip that part and I'll write or navigate a home.

73
00:05:36,230 --> 00:05:43,850
And in the homepage I'm looking for two things or I'm sorry, at home actually I meant cocktail's sorry.

74
00:05:43,850 --> 00:05:46,370
That was the other component that I was rendering.

75
00:05:46,820 --> 00:05:52,610
And then in the cocktail list, I'm looking for a huge global context, which of course is already important.

76
00:05:52,880 --> 00:05:57,470
I also imported the loading component as well as the cocktail.

77
00:05:57,890 --> 00:06:01,700
So cocktail will be displayed for every cocktail in my list.

78
00:06:01,700 --> 00:06:03,620
Loading will be displayed if we're loading.

79
00:06:04,650 --> 00:06:11,640
And then use global context just allows me to access my context values again, I would want to structure

80
00:06:12,000 --> 00:06:16,640
and I'm going to be looking for cocktail's that is my area, of course.

81
00:06:16,950 --> 00:06:19,470
And then also I have the loading one.

82
00:06:19,740 --> 00:06:22,790
So I'm going to go use global context.

83
00:06:23,040 --> 00:06:29,070
And just because I would want to show you the loading component as well as what happens if we cannot

84
00:06:29,070 --> 00:06:35,840
fetch any cocktail's all right away, set up my conditions where I'm going to have multiple returns.

85
00:06:35,850 --> 00:06:41,640
First one will be for the loading, so I'll check for the loading, which remember the moment in the

86
00:06:41,640 --> 00:06:43,280
context it is true.

87
00:06:43,740 --> 00:06:45,090
So it is true by default.

88
00:06:46,080 --> 00:06:53,850
And if I'm loading out when I return, of course, my loading component, the only component that is

89
00:06:53,850 --> 00:06:59,720
already complete and there is this is going to be rendered if we are loading.

90
00:07:00,030 --> 00:07:04,310
And of course, if you want to set out, you can navigate to complete project.

91
00:07:04,320 --> 00:07:12,600
And you'll notice that not only by default when the app renders we're loading, but also as we're typing,

92
00:07:12,960 --> 00:07:16,390
because as we're going to be typing, of course, we'll set back loading.

93
00:07:16,530 --> 00:07:16,950
True.

94
00:07:17,250 --> 00:07:19,630
And that's why this will be displayed.

95
00:07:20,070 --> 00:07:23,520
Now, also, there's going to be a case where we cannot get any cocktail's.

96
00:07:23,880 --> 00:07:30,180
For example, I go with this gibberish term and I will go on display to the user that, hey, listen,

97
00:07:30,570 --> 00:07:34,500
the term that you're using doesn't return any cocktails.

98
00:07:34,680 --> 00:07:40,650
And in this case, I just want with somewhat simple message where it displays on a screen, no cocktail's

99
00:07:40,650 --> 00:07:43,260
match your search criteria.

100
00:07:43,770 --> 00:07:51,390
Now, when we would want to display that, well, when the cocktails are just empty or so, of course,

101
00:07:51,390 --> 00:07:56,970
eventually we'll have our futch function where we're fetching the cocktails and there's going to be

102
00:07:56,970 --> 00:08:01,150
cases where our return says, well, there's no cocktails.

103
00:08:01,440 --> 00:08:05,910
So in that case, we'll set back our array to an empty array.

104
00:08:06,450 --> 00:08:10,140
And in here in the cocktail list, we'll handle that.

105
00:08:10,440 --> 00:08:17,570
I'll say if and then cocktails like that length, since it is an array at the end of the day, right.

106
00:08:18,000 --> 00:08:23,190
If it is less than one, then of course I want to show that error.

107
00:08:23,520 --> 00:08:27,070
Now, we already know that that is also something that is happening by default.

108
00:08:27,090 --> 00:08:27,460
Right.

109
00:08:27,480 --> 00:08:30,620
So we have loading by default as well as cocktails like.

110
00:08:30,900 --> 00:08:34,320
So in order to see that, we'll have to set loading the force.

111
00:08:34,320 --> 00:08:36,840
Otherwise we'll always see the loading.

112
00:08:37,320 --> 00:08:45,060
And here, like I said, nothing really special heading to let's add a class name here and we'll say

113
00:08:45,060 --> 00:08:52,350
that the value will be section and then hyphen title and let's just say no cocktails matched your search.

114
00:08:52,860 --> 00:08:54,840
And let's add criteria as well.

115
00:08:55,470 --> 00:08:56,350
Right here.

116
00:08:56,370 --> 00:08:56,700
Here.

117
00:08:57,220 --> 00:08:58,640
OK, awesome.

118
00:08:59,010 --> 00:09:04,100
We can say it on and here, of course, as mousetrap up it should be returned return.

119
00:09:04,260 --> 00:09:07,050
Let's do this way and we have the return.

120
00:09:07,470 --> 00:09:08,130
OK, awesome.

121
00:09:08,370 --> 00:09:13,070
And like I just said, we won't be able to see that because our loading is true.

122
00:09:13,410 --> 00:09:15,540
So let's change the force then.

123
00:09:15,540 --> 00:09:17,700
Of course we'll have our text now.

124
00:09:17,700 --> 00:09:25,260
Cocktails match your search and that of course will happen when our cocktails arrive is just an empty

125
00:09:25,260 --> 00:09:26,190
right now.

126
00:09:26,190 --> 00:09:30,480
I'll set it back to true because I would want to display my loading.

127
00:09:30,750 --> 00:09:38,160
But hopefully everything is clear as far as our basic setup in a search form where we are just looking

128
00:09:38,160 --> 00:09:44,550
for a function as well as the cocktail's list where we have loading as well as the cocktails.

129
00:09:44,820 --> 00:09:51,630
And one thing you probably notice of that in the context I'm also passing in that search term now to

130
00:09:51,630 --> 00:09:55,680
tell you honestly, I just went with the flow and added it by mistake.

131
00:09:55,950 --> 00:09:59,880
Essentially, we won't need it because of the search form.

132
00:10:00,210 --> 00:10:04,980
The component that is going to be responsible for our input won't be controlled input.

133
00:10:05,200 --> 00:10:06,840
Remember, we had two flavors.

134
00:10:07,170 --> 00:10:12,540
We had controlled and uncontrolled input and in this case, adjust spice things up.

135
00:10:12,750 --> 00:10:15,510
We are going to go with uncontrolled input.

136
00:10:15,780 --> 00:10:16,890
So my apologies.

137
00:10:17,100 --> 00:10:25,860
We're just looking for set search term function, which should be structured in our search form component.