1
00:00:00,150 --> 00:00:00,600
Beautiful.

2
00:00:00,780 --> 00:00:02,440
We've got home page in place.

3
00:00:02,610 --> 00:00:09,660
So now let's worry about the products and for this project, I did set up the API where I'm sharing

4
00:00:09,840 --> 00:00:10,650
the product.

5
00:00:11,010 --> 00:00:17,310
So of course, we'll have to fetch them first and then we can display them in a feature product as well

6
00:00:17,310 --> 00:00:19,410
as the product page.

7
00:00:19,830 --> 00:00:27,090
If you want to take a look at the API, the endpoints that we have, you just need to navigate to utils

8
00:00:27,390 --> 00:00:27,660
here.

9
00:00:27,660 --> 00:00:32,980
And by the way, Miklós, everything, so I don't have too much stuff open.

10
00:00:33,390 --> 00:00:39,570
So again, we're going to go to utils, then we're looking for Konstanz and scroll all the way down

11
00:00:39,930 --> 00:00:42,420
and in there you'll find two URLs.

12
00:00:42,720 --> 00:00:48,660
One end point is going to be for all the products and the second one will be for specific product.

13
00:00:49,260 --> 00:00:53,590
So for all the product, of course, we'll get an array with object.

14
00:00:53,790 --> 00:00:55,080
So those are going to be objects.

15
00:00:55,080 --> 00:01:00,490
But if you want more info, then of course we'll have to look for a single product.

16
00:01:00,780 --> 00:01:07,940
So let's start with all the products and navigate to a bigger screen copy and paste the URL and order

17
00:01:07,950 --> 00:01:08,190
share.

18
00:01:08,190 --> 00:01:11,400
Like I said, we have array of products.

19
00:01:11,790 --> 00:01:18,480
Now, at the moment, as I'm recording this, I believe I have 17, but the plan is to add more products

20
00:01:18,840 --> 00:01:22,110
and I'm going to zoom in just so we can see a bit better.

21
00:01:23,000 --> 00:01:30,290
And notice for every product in this end point, we are getting the idea, we are getting the name price

22
00:01:30,530 --> 00:01:32,060
and I'll talk about it why it is.

23
00:01:32,060 --> 00:01:32,790
And and.

24
00:01:33,560 --> 00:01:36,100
And of course, we also get the image.

25
00:01:36,110 --> 00:01:38,310
We've got the array of colors.

26
00:01:38,630 --> 00:01:41,130
So what are the possible colors that we can have?

27
00:01:41,390 --> 00:01:47,990
We have company, some small description and of course, the category, as well as whether the shipping

28
00:01:48,200 --> 00:01:49,040
is free.

29
00:01:49,370 --> 00:01:54,710
So if the shipping is true, that means that the shipping is free for this product.

30
00:01:55,040 --> 00:01:57,610
And also some products have this featured one.

31
00:01:58,010 --> 00:02:03,200
So, of course, if we take a look at the complete project, the ones that are displaying here have

32
00:02:03,200 --> 00:02:05,860
this feature set to true.

33
00:02:06,260 --> 00:02:13,040
Now, the way I set up the API, if the feature property is not on an object and of course, that feature

34
00:02:13,310 --> 00:02:14,160
is false.

35
00:02:14,180 --> 00:02:17,720
So the product is not featured as well as the shipping.

36
00:02:18,080 --> 00:02:24,340
Now, if you want to take a look at this single product, then of course you just need to grab this

37
00:02:24,350 --> 00:02:24,830
euro.

38
00:02:25,310 --> 00:02:31,730
So this is going to be a bit different where again, we go the same route, of course, API, dot com,

39
00:02:31,730 --> 00:02:35,270
react, store, single product, then questionmark.

40
00:02:35,270 --> 00:02:41,690
And then we have the ad and then the plan is going to be following where of course, dynamically in

41
00:02:41,690 --> 00:02:49,940
our application we'll pass this thing into our end point and then of course, we'll get more info about

42
00:02:49,940 --> 00:02:50,480
the product.

43
00:02:50,660 --> 00:02:56,390
So notice this is the same product or in this case, I'm just sharing a little bit of info.

44
00:02:56,660 --> 00:03:03,080
And then once I look for that specific product using this endpoint, of course, I get way more info

45
00:03:03,080 --> 00:03:03,590
because.

46
00:03:04,840 --> 00:03:08,780
If we navigate to a single product, you can see that there's more stuff there.

47
00:03:08,950 --> 00:03:12,910
There's more images, there's stars and all that good stuff.

48
00:03:13,330 --> 00:03:19,780
Now, first, let's test out how we would set this up and kind of get on the same page and then we'll

49
00:03:19,780 --> 00:03:20,890
take a deep dive.

50
00:03:21,340 --> 00:03:25,810
So first, let's understand when we would want to of those products.

51
00:03:26,290 --> 00:03:30,370
Well, I would want to showcase them in homepage.

52
00:03:30,370 --> 00:03:30,820
Correct.

53
00:03:31,390 --> 00:03:33,040
As well as the product page.

54
00:03:33,610 --> 00:03:34,930
So those are the two places.

55
00:03:35,470 --> 00:03:40,050
And technically, you can make an argument that I could set up use effect in both places.

56
00:03:40,660 --> 00:03:44,520
But what's the point of doing that if we're fetching those products twice?

57
00:03:45,160 --> 00:03:49,420
So we might as well just set up a user effect in our product context.

58
00:03:49,630 --> 00:03:50,050
Correct.

59
00:03:50,650 --> 00:03:52,090
And just push them one time.

60
00:03:52,750 --> 00:03:54,650
And that's exactly what we're going to do.

61
00:03:55,030 --> 00:04:01,780
So after these open sidebar and close sidebar, which again, I mentioned, I just jumped in here because

62
00:04:02,080 --> 00:04:06,370
I thought that it's an overkill to create another extra context.

63
00:04:06,760 --> 00:04:09,050
I would want to create my products.

64
00:04:09,100 --> 00:04:13,410
Now, don't worry, we will update our function in NextRadio for now.

65
00:04:13,720 --> 00:04:18,220
I just want to see whether I'm able to access the product.

66
00:04:18,550 --> 00:04:21,280
So if I get back the euro, we are in good shape.

67
00:04:21,730 --> 00:04:24,540
So in this project, I'm going to use axios again.

68
00:04:24,560 --> 00:04:25,150
You don't have to.

69
00:04:25,150 --> 00:04:26,860
Technically, you can use API.

70
00:04:27,670 --> 00:04:34,440
I'm just using it so you would get comfortable with Axios because it's a pretty nifty Ajax library,

71
00:04:34,900 --> 00:04:40,750
so like previously I'm just going to come up with some kind of function when I call this fetch product,

72
00:04:40,960 --> 00:04:41,980
it's going to be a sink think.

73
00:04:42,400 --> 00:04:42,610
Right.

74
00:04:42,710 --> 00:04:43,270
I know that.

75
00:04:43,570 --> 00:04:46,300
And in this function, I'll pass in the wall.

76
00:04:46,600 --> 00:04:48,250
And as I say, I don't notice here.

77
00:04:48,580 --> 00:04:50,590
I'm importing products.

78
00:04:50,590 --> 00:04:56,580
You are all from the constants, the one that I just showed you and I'm just giving it an alias.

79
00:04:57,070 --> 00:04:59,020
It starts off as products euro.

80
00:04:59,230 --> 00:05:01,780
And then I just say, well, I'm going to call this.

81
00:05:01,780 --> 00:05:03,340
You are in this file.

82
00:05:03,550 --> 00:05:07,570
That's all I'm doing over here and inside of this function.

83
00:05:07,780 --> 00:05:09,280
Like I said, we're going to use axios.

84
00:05:09,550 --> 00:05:15,110
And for now, I just want to get back that array and then we'll build around that there.

85
00:05:15,430 --> 00:05:18,340
So for now, let's just go with Consed and I'll call.

86
00:05:18,340 --> 00:05:22,990
This response is equal and we're going to go with a wait.

87
00:05:22,990 --> 00:05:29,770
Of course we already have pictures by default it's get but we can go with doGet and then we'll pass

88
00:05:29,770 --> 00:05:32,560
in the URL that we're getting as a primer.

89
00:05:32,710 --> 00:05:36,910
And then like I said, I'm going to set up usufruct in my context.

90
00:05:36,940 --> 00:05:37,360
Why?

91
00:05:37,570 --> 00:05:41,640
Well, because then I can fetch it once and then I'm just going to distribute it.

92
00:05:41,890 --> 00:05:48,580
There's going to be featured ones that will go to the homepage to this sucker over here and then all

93
00:05:48,580 --> 00:05:49,230
the products.

94
00:05:49,540 --> 00:05:55,660
So regardless whether the product has feature, true or false, will be dumped in the product page.

95
00:05:56,320 --> 00:05:57,750
And I have my callback function.

96
00:05:57,760 --> 00:06:00,160
Of course I will just invoke it once.

97
00:06:00,370 --> 00:06:05,530
So I'll have empty dependency array and let's just go with the response.

98
00:06:05,800 --> 00:06:09,400
And for now I'll just cancel it and say what is the response?

99
00:06:09,730 --> 00:06:12,340
And let's just invoke such products over here.

100
00:06:12,640 --> 00:06:18,130
Now, what I would want to pass in, of course, is this you are correct, since my function is looking

101
00:06:18,130 --> 00:06:18,630
for that.

102
00:06:18,640 --> 00:06:25,210
So I'm just going to say you are l we invoke it and now we want to navigate to the bigger screen.

103
00:06:25,660 --> 00:06:30,740
And I just want to check what I see in a console if I have my beautiful.

104
00:06:31,030 --> 00:06:32,230
So now I have the object.

105
00:06:32,350 --> 00:06:32,870
Awesome.

106
00:06:32,920 --> 00:06:35,740
So this is what is coming back from the Axios.

107
00:06:36,040 --> 00:06:41,080
I remember with Axios our data was in the data property.

108
00:06:41,290 --> 00:06:46,320
So I can see right now my data is an array with all my products.

109
00:06:46,840 --> 00:06:52,860
And is this is something that you say awesome, we are ready to move on to the next step.