1
00:00:00,270 --> 00:00:02,790
Beautiful ones we have access to all the products.

2
00:00:02,820 --> 00:00:06,430
Now let's render our feature products.

3
00:00:06,660 --> 00:00:11,940
In the home page we're gonna have this feature product section and we're gonna head over back to our

4
00:00:11,940 --> 00:00:17,400
application and that of course is not our application that is my desktop that I'm gonna open up the

5
00:00:17,400 --> 00:00:24,300
sidebar and in fact I'm gonna close out again all the tabs and I'm gonna open up first of all the feature

6
00:00:24,300 --> 00:00:25,220
products.

7
00:00:25,230 --> 00:00:31,290
So this guy was having one then we're going to look for the home page let's see where we have the homepage

8
00:00:31,680 --> 00:00:35,820
then also we want to open up the helpers and you're going to see in a second why.

9
00:00:35,880 --> 00:00:43,050
And lastly we're gonna need also a product context so let's also open up the product context and let's

10
00:00:43,050 --> 00:00:47,300
start I guess with home and let's import our feature product.

11
00:00:47,370 --> 00:00:51,960
So we're going to look for import then featured products.

12
00:00:51,990 --> 00:00:57,240
So essentially the products that have featured property of true and currently of course there's only

13
00:00:57,240 --> 00:00:58,220
having one.

14
00:00:58,230 --> 00:01:00,750
So let's look for components then.

15
00:01:00,750 --> 00:01:04,620
Products folder and then we're looking for feature product.

16
00:01:04,620 --> 00:01:12,090
And then right after the hero we're going to render our featured products and now let me now get back

17
00:01:12,090 --> 00:01:13,260
home.

18
00:01:13,260 --> 00:01:18,090
So let's click on home and of course we're going to see hello from feature product.

19
00:01:18,180 --> 00:01:19,610
So let's start working on it.

20
00:01:19,630 --> 00:01:23,640
We're if we're gonna head over to a feature product what are we going to need.

21
00:01:23,990 --> 00:01:29,820
We'll need a product list because I wouldn't want to again set up functionality where I loop over the

22
00:01:29,820 --> 00:01:33,200
project because I already have all the product.

23
00:01:33,210 --> 00:01:37,240
The only thing I need to do is just passing whatever data I would want.

24
00:01:37,260 --> 00:01:45,030
So that's the reason why we're going to import a product list that is sitting right next to say product

25
00:01:45,040 --> 00:01:49,110
list and that is of course within the same folder.

26
00:01:49,110 --> 00:01:54,600
So we're just going to grab a product list and then we're gonna be looking for the product context because

27
00:01:54,660 --> 00:02:00,810
I would want to get to things I'd want to get loading as well as the feature which currently is just

28
00:02:00,810 --> 00:02:01,800
an empty array.

29
00:02:01,830 --> 00:02:03,770
So we're also gonna cheat a little bit.

30
00:02:03,780 --> 00:02:09,450
We're going to work first all the product and then we're gonna set them up as feature men let's import

31
00:02:09,480 --> 00:02:17,280
our product context so let's say import then we're looking for product context and that is coming from

32
00:02:17,370 --> 00:02:18,440
our context.

33
00:02:18,630 --> 00:02:25,440
So let's navigate to folder and the folder name is context and then we're looking for a product like

34
00:02:25,460 --> 00:02:26,060
so.

35
00:02:26,130 --> 00:02:31,650
And then also I would want to get loading because the same way as with product I want to display loading

36
00:02:32,070 --> 00:02:34,220
if I'm still getting my product.

37
00:02:34,230 --> 00:02:42,530
So if Bush still performing fetch request so let's do a loading then from online of course it is coming

38
00:02:42,530 --> 00:02:50,240
from the components like so and that is of course within the same folder meaning one level up but we're

39
00:02:50,240 --> 00:02:52,990
still sitting technically within the components.

40
00:02:53,000 --> 00:02:53,480
All right.

41
00:02:53,480 --> 00:03:00,530
We have our imports now let's set up our used context to get the values from our products context and

42
00:03:00,530 --> 00:03:06,290
remember the syntax was following where we need to decide what we would want from the context.

43
00:03:06,290 --> 00:03:09,060
So in this case I'm looking for two things.

44
00:03:09,230 --> 00:03:14,180
But since my feature is equal to an empty array I'm gonna grab three things.

45
00:03:14,180 --> 00:03:17,880
Eventually there's going to be only two but for now we're gonna grab three.

46
00:03:17,900 --> 00:03:25,310
So we're gonna look for featured as well as the product and all that is coming from react use context

47
00:03:25,640 --> 00:03:28,320
and then I need to pass in my product context.

48
00:03:28,370 --> 00:03:30,900
Now I have access to those three things.

49
00:03:31,010 --> 00:03:37,550
And first we're gonna do the same logic like we did before where if it is loading then we're going to

50
00:03:37,550 --> 00:03:39,140
display our loading component.

51
00:03:39,560 --> 00:03:46,910
So if loading is true then let's render return and then we're going to look for loading I need to set

52
00:03:46,910 --> 00:03:53,540
this up as a component and then of course once I have my product then I would want to return my list

53
00:03:54,020 --> 00:04:00,290
and again eventually we're gonna set up a product list that only renders featured but feature is an

54
00:04:00,290 --> 00:04:01,230
empty array.

55
00:04:01,430 --> 00:04:04,720
So why don't we just start out with all the product.

56
00:04:04,760 --> 00:04:10,510
So I'm going to say all right there's gonna be a return and from return we're gonna go with product

57
00:04:10,510 --> 00:04:11,110
list.

58
00:04:11,140 --> 00:04:16,730
Now in this case since it is a prob I would want a different title I wouldn't want our product known

59
00:04:16,800 --> 00:04:18,520
as a feature product.

60
00:04:18,520 --> 00:04:24,790
So we're going to save feature product and then again we still have the products prop which eventually

61
00:04:24,790 --> 00:04:25,960
is going to be featured.

62
00:04:25,960 --> 00:04:30,540
But again I know I said this seventy seven times since it is an empty array.

63
00:04:30,670 --> 00:04:36,660
I find it more useful if we just passing the product currently just for the time being.

64
00:04:36,820 --> 00:04:42,580
So let's passing the product let's close out our list and then in a home page we're gonna see all the

65
00:04:42,580 --> 00:04:43,470
product.

66
00:04:43,480 --> 00:04:49,060
So now let's start working on the feature product if we're gonna head over to the context I can see

67
00:04:49,420 --> 00:04:56,530
that I haven't used my set feature and the way I would want to do that is once I get my response data

68
00:04:56,530 --> 00:05:05,560
back then I would want to loop over it and just get me the products that have featured set to true and

69
00:05:05,560 --> 00:05:11,050
you could set up functionality right here right here within the context but I just find it a bit more

70
00:05:11,050 --> 00:05:13,660
useful if we're gonna do it within helpers.

71
00:05:13,660 --> 00:05:18,280
So first of all within the helpers we're gonna set up a function and we're going to call this function

72
00:05:18,280 --> 00:05:21,580
feature products and we're going to export it right away.

73
00:05:21,580 --> 00:05:26,770
So export function and the reason why I'm not using export default because there might be some other

74
00:05:26,770 --> 00:05:27,800
functions here.

75
00:05:27,910 --> 00:05:32,060
So let's write featured product.

76
00:05:32,240 --> 00:05:33,090
Product.

77
00:05:33,270 --> 00:05:37,710
And then this particular function is gonna get one parameter.

78
00:05:37,770 --> 00:05:39,180
I'm gonna name this data.

79
00:05:39,270 --> 00:05:40,740
You can name this array.

80
00:05:40,740 --> 00:05:42,090
You can name this product.

81
00:05:42,090 --> 00:05:43,310
It doesn't really matter.

82
00:05:43,380 --> 00:05:51,750
And then it is going to return only the products that have item featured more featured properties set

83
00:05:51,750 --> 00:05:52,560
to true.

84
00:05:52,560 --> 00:05:58,410
So I'm going to say return not return but return then data.

85
00:05:58,410 --> 00:06:00,730
So we're looping over our array.

86
00:06:00,900 --> 00:06:03,030
Then we're going to use a filter method.

87
00:06:03,180 --> 00:06:09,450
And then again we have our callback function where we set up each and every item and I'm gonna name

88
00:06:09,450 --> 00:06:11,010
my parameter item.

89
00:06:11,010 --> 00:06:13,170
So as you can name just whoever you like.

90
00:06:13,170 --> 00:06:18,180
And then I'm only gonna return that item if the feature of properties is true.

91
00:06:18,210 --> 00:06:25,900
So if item that feature is equal to true then we're going to return that particular item.

92
00:06:26,100 --> 00:06:30,390
If the feature property is not true then the item is not going to get returned.

93
00:06:30,780 --> 00:06:36,060
So essentially we're gonna trim our array where we have initially several items which are currently

94
00:06:36,060 --> 00:06:37,370
displayed on average.

95
00:06:37,380 --> 00:06:42,550
What we're looking for less items now we're going to head over to a product context and we're going

96
00:06:42,550 --> 00:06:44,640
to import that particular function.

97
00:06:44,640 --> 00:06:46,490
So we're going to look for import.

98
00:06:46,590 --> 00:06:47,880
Now it is a name the import.

99
00:06:48,270 --> 00:06:54,540
So we have featured products and then it is coming again from Eutelsat.

100
00:06:55,000 --> 00:06:59,430
So we can head over to a utility folder and then we're looking for the helpers.

101
00:06:59,710 --> 00:07:02,090
So that's where this function is coming from.

102
00:07:02,230 --> 00:07:07,780
And then right when we get our data before even we set up the product.

103
00:07:07,780 --> 00:07:14,260
Let me run a feature product on my response data and then I'm going to set up some kind of variable

104
00:07:14,590 --> 00:07:19,180
and I'm going to call this feature but again there's no name clash because we're doing this within a

105
00:07:19,180 --> 00:07:20,000
function.

106
00:07:20,020 --> 00:07:23,710
So even though we have a state value feature it doesn't really matter.

107
00:07:23,710 --> 00:07:29,820
And then we're going to set this equal to a response data that is passed through feature product.

108
00:07:29,830 --> 00:07:35,210
So we have our feature product function and then within the function we need to pass in the.

109
00:07:35,230 --> 00:07:35,660
All right.

110
00:07:35,950 --> 00:07:38,320
So we're going to go with response data.

111
00:07:38,320 --> 00:07:43,080
That is the array that we're passing in and now we're getting back our feature product.

112
00:07:43,090 --> 00:07:46,920
So right after the set product we're gonna run our set feature.

113
00:07:47,230 --> 00:07:56,610
So set featured and then we press in whatever values we have within the featured variable so featured

114
00:07:56,940 --> 00:07:58,080
like so.

115
00:07:58,170 --> 00:08:04,110
And then of course once we run our set featured then now we're setting a feature and state value to

116
00:08:04,110 --> 00:08:08,670
whatever product that have that feature property of true.

117
00:08:08,700 --> 00:08:14,160
And now if we're gonna head over back to feature products instead of accessing the products we're going

118
00:08:14,160 --> 00:08:15,210
to access the feature.

119
00:08:15,420 --> 00:08:17,010
So now I can just delete the products.

120
00:08:17,010 --> 00:08:23,770
I can see that my functionality work but instead of passing an all product into my product list that

121
00:08:23,780 --> 00:08:30,080
is going to loop over my array and passing featured which should get me three or four items.

122
00:08:30,210 --> 00:08:31,340
Let me see.

123
00:08:31,380 --> 00:08:31,740
Yep.

124
00:08:31,800 --> 00:08:34,410
I should have three or four items.

125
00:08:34,410 --> 00:08:35,900
Let's head over back.

126
00:08:35,940 --> 00:08:41,490
This is the project we're working on and then we're going to check our homepage and we have four items.

127
00:08:41,490 --> 00:08:48,420
So each and every item has a feature properly set to true you could have set the functionality differently.

128
00:08:48,420 --> 00:08:51,410
It was my preference to use the product list.

129
00:08:51,600 --> 00:08:52,320
You could have done it.

130
00:08:52,320 --> 00:08:52,950
Of course.

131
00:08:53,010 --> 00:08:54,280
Million different ways.

132
00:08:54,360 --> 00:08:59,420
But I just like the fact that I don't have to deal two times with looping over some kind of error.

133
00:08:59,760 --> 00:09:05,110
So in this case again it doesn't really matter what array we're passing in product list is always going

134
00:09:05,110 --> 00:09:10,390
to do the same thing it is going to grab the title whatever title as well as the array and then it's

135
00:09:10,410 --> 00:09:13,730
going to loop over the array and then render each and every product.

136
00:09:13,890 --> 00:09:15,270
Could you have done it differently.

137
00:09:15,270 --> 00:09:21,210
Of course you could but this was my preference of how to solve the issue where if I need to render the

138
00:09:21,210 --> 00:09:26,910
list two times I'm just going to set up some kind of component that just grabbed that list and then

139
00:09:26,910 --> 00:09:30,870
renders it wherever we are displaying that component.