1
00:00:00,200 --> 00:00:04,370
So now we're going to create the product detail screen, which is going to be if we click on one of

2
00:00:04,370 --> 00:00:08,870
these and you'll see that the route is product slash and then whatever the ID.

3
00:00:09,170 --> 00:00:19,940
So first thing we'll do is create a new screen and let's call this product screen dot JS X, and we're

4
00:00:19,940 --> 00:00:27,470
going to just map out a component and we're going to need to get the ID from the URL so we can get that

5
00:00:27,470 --> 00:00:32,060
with a hook called use params and that's from React router Dom.

6
00:00:32,060 --> 00:00:37,250
So let's say import use params from React router dom.

7
00:00:37,250 --> 00:00:39,710
We're also going to bring in our products.

8
00:00:39,800 --> 00:00:44,750
So let's import products from and then dot dot slash products.

9
00:00:45,050 --> 00:00:49,330
Okay, so we have our product screen, we're going to get the ID from the URL.

10
00:00:49,340 --> 00:01:01,410
So first off, let's do const and yeah, so basically we can destructure any anything from the, the

11
00:01:01,410 --> 00:01:02,280
params.

12
00:01:02,280 --> 00:01:08,010
So we're going to have an ID, but I'm actually going to rename it to product ID like that.

13
00:01:08,370 --> 00:01:09,030
Okay.

14
00:01:09,030 --> 00:01:16,890
Actually let's put a space there and then let's fetch the product based on that ID because remember

15
00:01:16,890 --> 00:01:19,080
we're just dealing with hardcoded data right now.

16
00:01:19,080 --> 00:01:20,610
We're just dealing with an array.

17
00:01:20,610 --> 00:01:23,820
So what we can do is use find.

18
00:01:23,820 --> 00:01:29,220
So we're taking our products array coming from products dot JS, we're going to find and say where the

19
00:01:29,220 --> 00:01:36,180
product underscore ID equals the ID that's in the URL, then give me that product and put it into this

20
00:01:36,180 --> 00:01:37,140
variable.

21
00:01:37,290 --> 00:01:45,720
And for now we can just do a console log of product and yeah, we'll just do that for now.

22
00:01:45,720 --> 00:01:47,970
So let's save and then let's create a route.

23
00:01:47,970 --> 00:01:54,180
So we're going to go into our Index.js I'm going to copy down home screen and we're going to change

24
00:01:54,180 --> 00:01:55,350
that to.

25
00:01:56,490 --> 00:01:57,990
Product screen.

26
00:01:59,130 --> 00:02:07,050
So right here, say import product, screen, and then let's take this route, copy it down.

27
00:02:07,050 --> 00:02:11,460
Except I want to get rid of the index equals True, because it's not the index.

28
00:02:12,170 --> 00:02:17,750
And the path for the path, let's do slash product.

29
00:02:17,780 --> 00:02:22,070
Now we have the ID as well, so we need to have that as a placeholder.

30
00:02:22,070 --> 00:02:24,530
So it's going to be colon ID, Okay.

31
00:02:24,560 --> 00:02:28,790
And then we're going to make this the product screen.

32
00:02:28,790 --> 00:02:30,070
So let's save that.

33
00:02:30,080 --> 00:02:37,490
Let's come over here, click on one of these and you can see product screen if I open my console.

34
00:02:38,410 --> 00:02:39,070
There it is.

35
00:02:39,070 --> 00:02:45,490
So we have our Bluetooth or our AirPods, whatever they're called.

36
00:02:46,150 --> 00:02:46,480
All right.

37
00:02:46,510 --> 00:02:49,330
Now, obviously, we want to display it nice and neat here.

38
00:02:49,330 --> 00:02:54,850
So we're going to come back to our product screen and we're going to add the output.

39
00:02:54,850 --> 00:03:00,270
So let's get rid of the console log and then let's see, we're going to come down here.

40
00:03:00,280 --> 00:03:03,610
Let's just make that a fragment, get rid of that.

41
00:03:03,610 --> 00:03:07,330
And I want to have a back, a back button or a back link.

42
00:03:07,330 --> 00:03:09,730
So I'm also going to bring in link.

43
00:03:10,340 --> 00:03:12,860
So let's say import link.

44
00:03:14,190 --> 00:03:20,910
And then I'm also going to bring in the some stuff from Bootstrap or React Bootstrap.

45
00:03:20,910 --> 00:03:22,200
So let's do that.

46
00:03:22,230 --> 00:03:25,440
We'll say import row.

47
00:03:26,920 --> 00:03:28,990
Uh, ro call.

48
00:03:29,870 --> 00:03:31,910
Actually, I think that's all the stuff we need there.

49
00:03:31,910 --> 00:03:36,020
So roll call, image list, group card and button.

50
00:03:36,230 --> 00:03:42,410
And then I'm also going to import the rating component that we just created in the last video.

51
00:03:43,280 --> 00:03:47,330
So now let's come down here and let's create our backlink.

52
00:03:47,450 --> 00:03:48,560
Okay, so we have a link.

53
00:03:48,620 --> 00:03:52,010
Got a class of BTN, BTN light margin.

54
00:03:52,010 --> 00:03:53,300
Why three?

55
00:03:53,330 --> 00:03:56,330
So if we take a look, we now have a go back button.

56
00:03:57,170 --> 00:04:00,800
Okay, so now under that, let's do a row.

57
00:04:02,360 --> 00:04:04,250
So close that up.

58
00:04:05,560 --> 00:04:08,650
And in the row, we're going to have a column.

59
00:04:11,510 --> 00:04:11,960
Okay.

60
00:04:11,960 --> 00:04:18,529
Actually, we're going to have three columns on the details page, so let's do call again.

61
00:04:19,070 --> 00:04:20,839
And then one more time.

62
00:04:21,769 --> 00:04:23,060
So we have.

63
00:04:23,660 --> 00:04:24,980
633.

64
00:04:24,980 --> 00:04:27,890
I actually want to change that, though, to five.

65
00:04:29,000 --> 00:04:31,190
So the 12 is the total, right?

66
00:04:31,190 --> 00:04:32,990
You have 12 columns going across.

67
00:04:32,990 --> 00:04:35,120
The first one I want to take five.

68
00:04:35,150 --> 00:04:40,490
Second one I want to be four, that's nine and then three, which was 12.

69
00:04:40,880 --> 00:04:41,130
Okay.

70
00:04:41,310 --> 00:04:43,220
I know you guys know addition.

71
00:04:43,550 --> 00:04:46,100
So the first one is going to be the image.

72
00:04:46,100 --> 00:04:51,560
So we're using the React bootstrap image component source is going to be the product image.

73
00:04:51,560 --> 00:04:52,640
All it will be the name.

74
00:04:52,640 --> 00:04:57,680
We're also making it fluid so it can get smaller, so it's responsive.

75
00:04:57,680 --> 00:05:02,570
And then we're going to have the name along with the rating and all that.

76
00:05:02,570 --> 00:05:04,610
We're going to put that into a list group.

77
00:05:04,610 --> 00:05:09,740
So let's say list group variant flush, let's close that list group.

78
00:05:09,860 --> 00:05:17,420
And then inside there we'll have a list group item with the title, not the title, the name close that

79
00:05:17,420 --> 00:05:18,650
list group item.

80
00:05:18,860 --> 00:05:21,860
Then we'll have another item that's going to be the rating.

81
00:05:21,860 --> 00:05:26,420
So for that we're going to say the value is going to be product rating.

82
00:05:26,450 --> 00:05:33,480
The text is going to be again the number of reviews and then just the text reviews and then let's close

83
00:05:33,480 --> 00:05:35,700
up the list group item.

84
00:05:35,850 --> 00:05:42,120
And then for the price, that will be another list group item, we'll just say price and then whatever

85
00:05:42,150 --> 00:05:43,380
that price is.

86
00:05:43,380 --> 00:05:46,620
So if we save it at this point, it should look like this.

87
00:05:47,100 --> 00:05:48,990
Okay, which looks pretty decent.

88
00:05:48,990 --> 00:05:56,520
And then the third column, basically this is going to be where we have the again, we're going to show

89
00:05:56,520 --> 00:05:57,090
the price.

90
00:05:57,090 --> 00:06:00,300
We're also going to show if it's in stock and how many is in stock.

91
00:06:00,330 --> 00:06:03,270
We'll also have the add to cart button here.

92
00:06:03,270 --> 00:06:06,090
So let's wrap all that in a card.

93
00:06:07,040 --> 00:06:13,430
Okay, so we have our card and then inside the card we're going to have another list group and then

94
00:06:13,430 --> 00:06:14,630
a list group item.

95
00:06:14,630 --> 00:06:17,960
And the first item we're actually going to put this in a row.

96
00:06:17,990 --> 00:06:20,360
It's going to be the price in the column.

97
00:06:20,360 --> 00:06:26,060
And then in another column we're going to have I'm sorry, the heading or title, whatever you want

98
00:06:26,060 --> 00:06:31,310
to call it, is in the first column, then the actual price, then we'll close the row, then we'll

99
00:06:31,310 --> 00:06:33,320
close the list item.

100
00:06:34,380 --> 00:06:34,770
All right.

101
00:06:34,770 --> 00:06:35,850
And then the list.

102
00:06:36,700 --> 00:06:38,020
Did we close the list group?

103
00:06:38,350 --> 00:06:38,920
No, we didn't.

104
00:06:38,950 --> 00:06:40,450
We need to close that.

105
00:06:42,800 --> 00:06:43,180
Um.

106
00:06:44,900 --> 00:06:45,560
There we go.

107
00:06:46,990 --> 00:06:48,940
All right, So let's just see what that looks like.

108
00:06:48,940 --> 00:06:50,440
So we have the price.

109
00:06:50,440 --> 00:06:53,770
So now we're going to have another list group item.

110
00:06:53,770 --> 00:06:55,810
So let's go underneath that.

111
00:06:55,810 --> 00:06:57,580
And actually, you know what?

112
00:06:57,580 --> 00:07:00,160
I'm just going to copy this list group item.

113
00:07:02,240 --> 00:07:06,730
And this one instead of price, this is going to be the status.

114
00:07:06,740 --> 00:07:09,650
So for the heading, I'll say status.

115
00:07:09,650 --> 00:07:15,140
And then for this, this is actually going to be a ternary.

116
00:07:15,140 --> 00:07:20,390
So we're going to say if the product dot and then we have count in stock.

117
00:07:20,390 --> 00:07:20,660
Right.

118
00:07:20,660 --> 00:07:28,760
And we're going to say if that is greater than zero, then we're going to have the text in stock as

119
00:07:28,760 --> 00:07:29,900
the status.

120
00:07:30,230 --> 00:07:30,710
Okay.

121
00:07:30,830 --> 00:07:34,730
Else so else we're going to say out of.

122
00:07:36,500 --> 00:07:37,700
Out of stock.

123
00:07:39,480 --> 00:07:42,210
Okay, so this particular item is in stock.

124
00:07:42,210 --> 00:07:44,370
We just want to get rid of that money sign.

125
00:07:45,750 --> 00:07:46,080
All right.

126
00:07:46,080 --> 00:07:47,160
So that's the status.

127
00:07:47,160 --> 00:07:50,040
And then we're just going to have the add to cart button.

128
00:07:50,040 --> 00:07:52,920
So that's also going to be in a list group item.

129
00:07:52,920 --> 00:07:57,000
So let's go under this one and let's say list group item.

130
00:07:57,000 --> 00:07:58,140
Let's close it.

131
00:07:59,540 --> 00:08:01,730
And then we're going to have our button.

132
00:08:03,130 --> 00:08:08,920
And it'll have a class name of BTN block, a type of button disabled.

133
00:08:08,920 --> 00:08:14,440
So basically we're going to say if the count is if the stock, if it's not in stock, then it's going

134
00:08:14,440 --> 00:08:19,210
to be a disabled button because obviously you can't add it to Cart if we don't have it.

135
00:08:19,480 --> 00:08:19,830
All right.

136
00:08:19,840 --> 00:08:22,950
And then the text in the button will just say add to cart.

137
00:08:22,960 --> 00:08:24,640
So let's save that.

138
00:08:25,030 --> 00:08:26,200
And there we go.

139
00:08:26,200 --> 00:08:29,950
So that's our details page and we'll add more to this later on.

140
00:08:29,950 --> 00:08:33,460
But this is just, you know, basic actually, you know what?

141
00:08:33,460 --> 00:08:38,320
We don't have the description, so the description is going to go under the price.

142
00:08:38,320 --> 00:08:40,600
So right here we have.

143
00:08:41,480 --> 00:08:41,990
Let's see.

144
00:08:41,990 --> 00:08:43,490
We have our list group.

145
00:08:44,840 --> 00:08:45,860
No, that's the.

146
00:08:46,010 --> 00:08:49,160
So the price is actually here twice.

147
00:08:50,720 --> 00:08:52,220
The first one.

148
00:08:52,490 --> 00:08:57,590
I guess we don't really need that, but I'm just going to keep that there just because I had it initially

149
00:08:57,590 --> 00:08:59,420
and then the description.

150
00:09:00,980 --> 00:09:01,760
There we go.

151
00:09:03,270 --> 00:09:06,640
Right now if we go to one that is not in stock.

152
00:09:06,910 --> 00:09:07,360
Let's see.

153
00:09:07,360 --> 00:09:08,630
Let's look at our data.

154
00:09:08,650 --> 00:09:11,050
So if we look at our products JS.

155
00:09:12,400 --> 00:09:13,000
In stock.

156
00:09:13,030 --> 00:09:15,310
Ten, seven, five.

157
00:09:16,360 --> 00:09:16,990
Um.

158
00:09:18,160 --> 00:09:20,680
11 seven.

159
00:09:20,680 --> 00:09:23,320
So right here, the echo dot isn't in stock.

160
00:09:23,320 --> 00:09:27,580
So if I click on that, you'll see the Add to cart is now disabled.

161
00:09:29,420 --> 00:09:33,200
Okay, So we have our details page, our details screen.

162
00:09:33,200 --> 00:09:39,890
So now we're actually going to jump into the back end in the next video and we want to serve these from

163
00:09:39,890 --> 00:09:40,640
the API.

164
00:09:40,670 --> 00:09:42,950
We're not going to get into the database just yet.

165
00:09:43,340 --> 00:09:51,230
It will still be from a file, but we'll have an endpoint in our back end, our express back end to

166
00:09:51,230 --> 00:09:53,030
hit and then fetch the data.