1
00:00:00,180 --> 00:00:06,980
Perfect, and once we've got our product in the context, of course, let's worry about rendering them,

2
00:00:07,380 --> 00:00:13,560
so I'm going to navigate to the bigger screen and I'm going to start working on the feature product

3
00:00:14,100 --> 00:00:17,180
because I would want to do it in following steps.

4
00:00:17,190 --> 00:00:19,860
First, I don't want to work on feature products.

5
00:00:20,340 --> 00:00:22,520
Then we're going to work on a single product.

6
00:00:22,800 --> 00:00:25,550
So I still have to set up one more fetch.

7
00:00:26,010 --> 00:00:32,490
So we have the single product page out of the way and only then we'll worry about the product because

8
00:00:32,790 --> 00:00:35,800
as you can see, we have a bunch of moving pieces in here.

9
00:00:36,300 --> 00:00:40,740
First of all, there's going to be two ways how we can display them and there's going to be sorting

10
00:00:40,740 --> 00:00:42,280
and then filtering and all that.

11
00:00:42,300 --> 00:00:44,520
So I would want to do this all at once.

12
00:00:44,850 --> 00:00:46,580
That's why I will take these steps.

13
00:00:46,740 --> 00:00:48,420
So start with featured ones.

14
00:00:48,540 --> 00:00:55,110
Like I said, then we'll worry about the single product and only then we'll dump all our products in

15
00:00:55,110 --> 00:00:56,930
the product page.

16
00:00:57,360 --> 00:01:02,930
And if you worry about the fact that I didn't show you what happens with there, don't worry.

17
00:01:03,360 --> 00:01:07,760
Once we start working on a feature, of course, there's going to be an if statement for error.

18
00:01:07,920 --> 00:01:10,650
So it's going to be a little bit easier for me to showcase that.

19
00:01:10,800 --> 00:01:13,140
What happens if we get the error?

20
00:01:13,410 --> 00:01:17,610
Because otherwise, yeah, I can show you in the components, but probably doesn't mean that much.

21
00:01:17,760 --> 00:01:25,980
So what I would want is to navigate to my filter products because or I'm sorry, I guess feature products.

22
00:01:25,980 --> 00:01:33,330
I keep saying filter filter, but it's actually feature products because I have an array of six items.

23
00:01:33,660 --> 00:01:38,430
So I notice here how I'm importing use product contacts.

24
00:01:38,760 --> 00:01:40,290
So that is of course my hook.

25
00:01:40,590 --> 00:01:42,570
And what properties am I looking for?

26
00:01:42,600 --> 00:01:49,440
Well, our one check preloading since I want to show the spinner then I also want to showcase if there's

27
00:01:49,440 --> 00:01:50,190
some kind of error.

28
00:01:50,610 --> 00:01:56,640
And eventually, of course, I want to showcase the featured product since we're just going to iterate

29
00:01:56,640 --> 00:01:59,730
over them and display each item.

30
00:02:00,090 --> 00:02:01,930
So let's start with CONSED.

31
00:02:02,100 --> 00:02:08,760
We know that we're pulling down the object and from the object I'm looking for products and then loading.

32
00:02:09,090 --> 00:02:14,790
But in order to make life a little bit easier, I'm just going to give you an analysis of loading since

33
00:02:14,790 --> 00:02:15,800
it's going to be easier.

34
00:02:16,080 --> 00:02:17,580
So we're going to go with products.

35
00:02:17,580 --> 00:02:23,700
And then also I would want to check Arah again, Alia's of error and then eventually we'll look for

36
00:02:23,700 --> 00:02:27,990
a featured feature and an underscore product.

37
00:02:28,030 --> 00:02:31,640
And one will be equal to a feature like.

38
00:02:31,680 --> 00:02:38,660
So I once I've got all of this coming from use product context, then I would want to set up some segments.

39
00:02:38,760 --> 00:02:43,200
So if I'm loading, then I would want to display my loading component.

40
00:02:43,200 --> 00:02:50,220
If there is an error on one display, the error component, and then eventually if I've got my product,

41
00:02:50,620 --> 00:02:57,640
which I'll iterate over them, and then for every item, I'll return this product component.

42
00:02:57,990 --> 00:02:59,700
So let's start with offloading.

43
00:03:00,090 --> 00:03:05,520
And then for the time being, of course, there's not much in there, but we'll still go with return

44
00:03:05,880 --> 00:03:07,720
and a loading like so.

45
00:03:08,340 --> 00:03:14,820
So if we're loading, we should have quick loading one and I think we would need to set it up first.

46
00:03:14,820 --> 00:03:18,840
So let's just go to a loading component.

47
00:03:19,140 --> 00:03:22,800
And as you can see, for now, we just have the heading for now.

48
00:03:22,800 --> 00:03:28,680
There's not going to be much in there will simply go with Dev and we'll add some global class names.

49
00:03:28,740 --> 00:03:33,570
So say class name section and then section center.

50
00:03:33,870 --> 00:03:38,610
And then inside of this there there's going to be another one with a class of loading.

51
00:03:38,800 --> 00:03:39,240
That's it.

52
00:03:39,470 --> 00:03:45,240
So all we have to do and once we have the loading in place for a split second, of course, we can see

53
00:03:45,240 --> 00:03:47,460
that a little spinner in action.

54
00:03:48,000 --> 00:03:49,650
So that should do it for the loading.

55
00:03:49,870 --> 00:03:52,410
And I also want to take care of the error.

56
00:03:52,950 --> 00:04:00,600
So before we maybe set up the error in a featured one, we might as well and just navigate there were

57
00:04:00,630 --> 00:04:05,580
errors or where you are and it's right above.

58
00:04:05,970 --> 00:04:08,760
And as far as the error, same spiel.

59
00:04:08,790 --> 00:04:12,180
Go with Dave and then your class names here.

60
00:04:12,480 --> 00:04:18,590
There's going to be a section section center as well as the text center.

61
00:04:18,600 --> 00:04:21,000
So those are the three classes that I would want to add.

62
00:04:21,360 --> 00:04:29,960
And inside of this there I simply go with heading to and there was an error, there was an error and

63
00:04:30,000 --> 00:04:30,780
then three dots.

64
00:04:30,780 --> 00:04:37,200
And so that that should be displayed if we have the error and in order to test out the error.

65
00:04:37,590 --> 00:04:41,340
Well, first of all, I guess we would need to set up in a feature product.

66
00:04:41,340 --> 00:04:41,720
Correct.

67
00:04:42,090 --> 00:04:45,330
So say if there is an error, if error.

68
00:04:46,480 --> 00:04:54,640
Then I would want to return, of course, my air component, air component, and I would want to navigate

69
00:04:54,640 --> 00:04:58,300
back to the product context and where I'm passing in the oral.

70
00:04:59,390 --> 00:05:08,660
I'm just going to add one more extra extras, so I'll wrap my URL right now in the curly braces and

71
00:05:08,660 --> 00:05:15,200
I'll just add as essentially, of course, there is going to be an error because there is no such an

72
00:05:15,200 --> 00:05:17,120
end point with that extremeness.

73
00:05:17,360 --> 00:05:21,740
And that's why we can see nicely that there was a beautiful.

74
00:05:22,190 --> 00:05:28,690
And of course, I'm going to go back to my proper URL since I would want to display my product.

75
00:05:29,060 --> 00:05:33,660
So now there's no error, there's no loading since we already have all the product.

76
00:05:33,920 --> 00:05:35,600
So now let's iterate over them.

77
00:05:35,600 --> 00:05:40,670
And for every product, we're going to return a product component.

78
00:05:40,970 --> 00:05:42,120
So close the sidebar.

79
00:05:42,680 --> 00:05:49,020
And again, we have done this quite a few times, so we'll go with the wrapper and inside of the wrapper.

80
00:05:49,040 --> 00:05:55,160
And by the way, let's add a global class name of section as well, section class name and line instead

81
00:05:55,160 --> 00:05:56,000
of this wrapper.

82
00:05:57,330 --> 00:06:03,430
I would want to first start with the title, that's one of the global classes than having two and nine

83
00:06:03,450 --> 00:06:09,780
featured products and also this underline here underline.

84
00:06:10,750 --> 00:06:16,430
And then right after that, there's going to be the section with all my featured products.

85
00:06:16,840 --> 00:06:23,890
So right after the title there, we're going to go with section and then section center and featured

86
00:06:23,890 --> 00:06:26,860
classes like Show and then sort of this there.

87
00:06:26,870 --> 00:06:30,370
Of course, I'm going to iterate over my feature.

88
00:06:30,520 --> 00:06:30,950
All right.

89
00:06:31,480 --> 00:06:32,650
Now it's up to you.

90
00:06:32,680 --> 00:06:34,360
You can render all of them.

91
00:06:34,570 --> 00:06:36,070
And I'm going to start that way.

92
00:06:36,430 --> 00:06:42,970
But eventually I would just want to display to you or I'm sorry, three again, that is just my preference.

93
00:06:42,970 --> 00:06:47,850
If you take a look at the complete project, but you can render all six of them.

94
00:06:48,070 --> 00:06:53,400
So I purposely set up six feature products just in case you would want to render more.

95
00:06:53,710 --> 00:06:56,250
But in my case, I'm just going to go with three.

96
00:06:56,770 --> 00:06:58,600
So we're going to iterate over.

97
00:06:58,750 --> 00:07:01,060
So we have featured.

98
00:07:01,390 --> 00:07:07,420
So, um, and of course, we're using the map for every product we've got.

99
00:07:07,420 --> 00:07:11,020
And I object and I'll name this object a product.

100
00:07:11,260 --> 00:07:16,630
And then as far as the return, which is going to go with the product component, then we need to pass

101
00:07:16,630 --> 00:07:22,900
in the key in the object, we have the ad property and then we'll use this print operator so that the

102
00:07:22,900 --> 00:07:31,300
DOT and we spread out the product we save and we should have product the product, because that is the

103
00:07:31,300 --> 00:07:34,650
text that is inside the Perak component.

104
00:07:35,020 --> 00:07:41,700
And the last piece of the puzzle is navigating, of course, to the product component.

105
00:07:42,460 --> 00:07:49,120
So whoever it is that the sucker and since I'm passing in all the properties, I just need to be specific

106
00:07:49,120 --> 00:07:50,200
which ones I'm looking for.

107
00:07:50,530 --> 00:07:52,000
So I would want to get the image.

108
00:07:52,000 --> 00:07:54,220
I would want to get the name, I would want to get the price.

109
00:07:54,220 --> 00:07:56,190
And I would want to get the idea.

110
00:07:56,560 --> 00:07:59,110
I'll say I'll close the sidebar.

111
00:07:59,380 --> 00:08:02,590
And in here, let's say that we're going to return a wrapper.

112
00:08:02,830 --> 00:08:08,500
So all my styling here and instead of the wrapper, there's going to be a container.

113
00:08:08,860 --> 00:08:15,250
And in the container, I would want to place the image on a link because we need to understand that

114
00:08:15,370 --> 00:08:21,520
as I'm hovering over the image, because this is the link and this is going to navigate through that

115
00:08:21,700 --> 00:08:23,130
single product.

116
00:08:23,410 --> 00:08:28,510
So that's why if we take a look at the imports, of course, we have the style and we also have format

117
00:08:28,510 --> 00:08:31,360
price, which at the moment we're not going to talk about.

118
00:08:31,360 --> 00:08:32,970
I'll cover that in next video.

119
00:08:33,340 --> 00:08:35,530
And in here I have a search.

120
00:08:35,530 --> 00:08:36,460
So that's my icon.

121
00:08:36,700 --> 00:08:38,500
And then I also have the link.

122
00:08:38,890 --> 00:08:41,110
So I'll place the icon inside of the link.

123
00:08:41,440 --> 00:08:47,380
But Link, of course, is going to use this ID to navigate to that specific product page.

124
00:08:47,590 --> 00:08:49,540
Now, of course, Page is a placeholder.

125
00:08:49,760 --> 00:08:55,900
Remember, that single product is a placeholder page where there's going to be a user and will pass

126
00:08:55,900 --> 00:09:01,140
in that specific idea in the user effect and then of course, will fetch that single product.

127
00:09:01,360 --> 00:09:02,320
Hopefully that is clear.

128
00:09:02,710 --> 00:09:04,410
Again, we have done that already before.

129
00:09:04,690 --> 00:09:07,180
So for the source, I'm just going to display the image.

130
00:09:07,540 --> 00:09:11,010
And as far as the alternative, I'll use my name in this case.

131
00:09:11,440 --> 00:09:12,580
So same name.

132
00:09:12,790 --> 00:09:15,850
Then I would want to set up my link over here.

133
00:09:16,240 --> 00:09:21,400
And then this is going to navigate again dynamically to product.

134
00:09:21,400 --> 00:09:22,650
And then why?

135
00:09:23,200 --> 00:09:28,900
Because if we go back to the abcess, what was the path for a single product?

136
00:09:28,930 --> 00:09:34,580
Well, in my case, it was Ford's product and then forward slash and then the ad.

137
00:09:35,170 --> 00:09:36,580
So my you are primer.

138
00:09:37,000 --> 00:09:43,990
And since, of course, for every product that ad is going to be unique in here, will set up the template

139
00:09:43,990 --> 00:09:49,030
literals and I'll say forward slash product and then forward slash.

140
00:09:49,210 --> 00:09:51,310
And now I want to access the idee.

141
00:09:51,580 --> 00:09:53,680
Now I do want to add a little bit of styling here.

142
00:09:53,680 --> 00:09:56,170
So class name is going to be equal to Link.

143
00:09:56,170 --> 00:10:04,090
And inside of this, like like I said, I would want to place my icons so f and learn a search so we

144
00:10:04,090 --> 00:10:04,720
can close it.

145
00:10:05,080 --> 00:10:12,250
We should have all of these images and then as we're hovering and of course we can see the link and

146
00:10:12,250 --> 00:10:18,400
then right outside of this div I'm going to go with my photo or not fonts or whatever here, and we're

147
00:10:18,400 --> 00:10:22,920
going to go with heading five and inside of it will pass in the name.

148
00:10:23,080 --> 00:10:26,180
So it won't display the name as well as the price.

149
00:10:26,470 --> 00:10:34,990
Again, I'll talk about why we have price incents and why we would want to format it and all that info

150
00:10:34,990 --> 00:10:35,800
in the next video.

151
00:10:35,810 --> 00:10:36,970
For now, just bear with me.

152
00:10:37,130 --> 00:10:42,790
So we're going to go with paragraph and then instead of this paragraph, we'll just pass in the price.

153
00:10:42,820 --> 00:10:46,750
Now, if you want, you can add, but you'll see that in the next video.

154
00:10:46,750 --> 00:10:48,220
I'll have to remove it anyway.

155
00:10:48,490 --> 00:10:51,580
So at the moment, of course, these prices look gigantic.

156
00:10:52,000 --> 00:10:55,470
But the good news is that we have the product.

157
00:10:55,750 --> 00:10:57,220
So let's navigate to the big screen.

158
00:10:57,940 --> 00:11:02,590
If you want, you can display more product since there is a grid.

159
00:11:02,590 --> 00:11:05,290
Well, so we have nice columns as well as the rows.

160
00:11:05,290 --> 00:11:10,220
But in my case, when I'm going to do is go back to the feature product and the.

161
00:11:10,370 --> 00:11:17,690
In JavaScript, we have the array method by the name of sleights, so essentially you get items from

162
00:11:17,690 --> 00:11:20,250
the array and then creates a new one.

163
00:11:20,600 --> 00:11:28,790
So instead of iterating over the whole thing, a feature dot and then slice and then I'll pass it.

164
00:11:28,820 --> 00:11:32,420
Well, how many items I would want and then I'll change my map.

165
00:11:32,750 --> 00:11:36,490
And in my case, I'm going to go with zero and three.

166
00:11:36,890 --> 00:11:42,320
So this is just going to grab items with in excess of zero one and two.

167
00:11:42,470 --> 00:11:43,990
So three is not included.

168
00:11:44,240 --> 00:11:52,240
So that's why in my case, I'm going to have a array or I guess a list of three feature products.

169
00:11:52,400 --> 00:11:52,880
Beautiful.

170
00:11:53,210 --> 00:12:00,120
If we see our product displayed on screen, we are in good shape and we can move on to the next step.