1
00:00:00,810 --> 00:00:03,810
This is going to be product images.

2
00:00:06,540 --> 00:00:10,650
And the root will be in the admin we will create.

3
00:00:12,840 --> 00:00:14,280
Product Images

4
00:00:17,670 --> 00:00:19,860
RFC save.

5
00:00:23,340 --> 00:00:24,780
Product images.

6
00:00:24,780 --> 00:00:26,040
It is auto imported?

7
00:00:26,220 --> 00:00:27,300
I think so.

8
00:00:27,300 --> 00:00:27,900
Yeah, it is.

9
00:00:28,350 --> 00:00:30,510
If I open the this.

10
00:00:31,410 --> 00:00:33,090
Okay, we have something wrong here.

11
00:00:33,090 --> 00:00:40,560
And again I did RC instead I want to do Rafi Right.

12
00:00:41,340 --> 00:00:49,230
So let's go again inside admin panel in the edit and manage image.

13
00:00:49,230 --> 00:00:54,870
So yeah, this is where we will manage the images of our product.

14
00:00:54,870 --> 00:00:59,400
So whenever we will create a product, you see we have an image option.

15
00:00:59,400 --> 00:01:03,750
So this is to add the product image, only single image.

16
00:01:04,080 --> 00:01:08,130
And in the edit we can add multiple images, right?

17
00:01:08,130 --> 00:01:09,960
We can actually make a new plate, all the images.

18
00:01:09,960 --> 00:01:12,420
So this is where we will render all the images.

19
00:01:12,450 --> 00:01:17,460
We can delete each images or we can add more images, right?

20
00:01:17,460 --> 00:01:18,510
So let's create this.

21
00:01:18,870 --> 00:01:23,910
So inside this view, we will simply do style and let's spread the default style.

22
00:01:23,910 --> 00:01:28,200
So default size, it is all imported, right?

23
00:01:28,470 --> 00:01:31,860
And now we will change the background color to color five.

24
00:01:31,860 --> 00:01:35,670
So colors dot color, five regular, basically.

25
00:01:35,670 --> 00:01:36,090
Yeah.

26
00:01:39,750 --> 00:01:41,790
And after this, we will add a header.

27
00:01:46,410 --> 00:01:47,700
Make sure to add back button.

28
00:01:47,700 --> 00:01:48,930
So back will be true.

29
00:01:49,640 --> 00:01:50,070
Yeah.

30
00:01:51,000 --> 00:01:54,570
And let's copy heading from any other let's say new product.

31
00:01:54,570 --> 00:01:55,770
Let's copy the heading.

32
00:02:03,080 --> 00:02:07,630
And we need to import the foam heading side.

33
00:02:07,640 --> 00:02:08,180
Right.

34
00:02:08,690 --> 00:02:10,220
If I'll go again in the management.

35
00:02:10,220 --> 00:02:11,300
So here.

36
00:02:12,500 --> 00:02:17,210
Edit manage images and we can see new product.

37
00:02:17,210 --> 00:02:21,980
So let's change this to images or you can say product images.

38
00:02:21,980 --> 00:02:22,910
So it's up to you.

39
00:02:23,150 --> 00:02:25,070
I'm going to leave this two images.

40
00:02:25,070 --> 00:02:25,580
Now.

41
00:02:25,580 --> 00:02:27,020
I will add a scroll view here.

42
00:02:27,590 --> 00:02:29,090
So this is the scroll wheel.

43
00:02:29,420 --> 00:02:30,980
Let's add margin bottom.

44
00:02:31,490 --> 00:02:33,230
This is going to be 20.

45
00:02:38,030 --> 00:02:39,170
Let's close the terminal.

46
00:02:39,410 --> 00:02:42,980
And inside this, we will add a view here, first of all.

47
00:02:42,980 --> 00:02:43,550
So

48
00:02:48,800 --> 00:02:52,700
this will be the background, color and colors.

49
00:02:54,470 --> 00:02:55,550
Note color to

50
00:02:59,330 --> 00:03:00,680
padding will be 40.

51
00:03:02,030 --> 00:03:06,110
Minimum height will be 400.

52
00:03:06,110 --> 00:03:06,680
Right.

53
00:03:07,010 --> 00:03:10,610
You can see the view right now.

54
00:03:10,610 --> 00:03:12,920
Inside this view, we will render all the images.

55
00:03:12,920 --> 00:03:13,580
Right.

56
00:03:14,450 --> 00:03:20,120
So let's create a temporary variable called images and set images.

57
00:03:20,120 --> 00:03:23,270
So this will be a variable from you just set.

58
00:03:26,150 --> 00:03:28,730
And if I'm not wrong, we have already sent this.

59
00:03:29,030 --> 00:03:30,800
Let me check.

60
00:03:34,490 --> 00:03:34,760
Okay.

61
00:03:34,760 --> 00:03:36,080
We are already sending the images.

62
00:03:36,260 --> 00:03:36,470
Right.

63
00:03:36,470 --> 00:03:38,420
So there's no need of doing that.

64
00:03:38,870 --> 00:03:39,950
We will have root.

65
00:03:41,570 --> 00:03:51,210
Let's do a control over root dot params and let's see what we will get if we have images error.

66
00:03:51,260 --> 00:03:54,020
So let's do

67
00:03:57,470 --> 00:04:01,460
cause images is equal to user state

68
00:04:04,760 --> 00:04:11,830
root dot params dot images and we'll copy paste for the id.

69
00:04:11,840 --> 00:04:15,950
So this is going to be ID dot ID, right.

70
00:04:15,950 --> 00:04:17,660
So this is the idea of product.

71
00:04:17,660 --> 00:04:24,200
Remember, because we are in the update section of a product, right.

72
00:04:26,930 --> 00:04:29,890
So we'll map on this image area.

73
00:04:29,930 --> 00:04:30,550
Right.

74
00:04:33,830 --> 00:04:35,900
And we will do a map

75
00:04:39,110 --> 00:04:43,100
and we will return a component called image Card.

76
00:04:46,310 --> 00:04:48,190
We'll create this component in a minute.

77
00:04:48,200 --> 00:04:52,100
But for now, let's create a file simply inside this.

78
00:04:52,100 --> 00:05:00,980
Let's create a file image card as our and for this time, save this, close this and let's do our auto

79
00:05:00,980 --> 00:05:01,640
import.

80
00:05:02,520 --> 00:05:02,690
Okay.

81
00:05:02,690 --> 00:05:03,860
We have to do it manually.

82
00:05:06,950 --> 00:05:07,730
Image card.

83
00:05:07,730 --> 00:05:09,500
And this is also image card.

84
00:05:09,500 --> 00:05:09,920
Yeah.

85
00:05:10,940 --> 00:05:14,930
So we will simply do a map while passing through things.

86
00:05:15,560 --> 00:05:18,970
So this is going to be image URL.

87
00:05:19,340 --> 00:05:26,210
I mean, I wrote you URL and the ID will be I don't I don't underscore ID.

88
00:05:26,360 --> 00:05:28,640
Remember, this is the idea of image, not product.

89
00:05:28,640 --> 00:05:28,870
Right?

90
00:05:28,880 --> 00:05:35,000
So that's why we are doing either to underscore ID, we will also pass a delete handler.

91
00:05:35,000 --> 00:05:42,100
So let's create a delete handler and we will also pass a key of course keys mandatory.

92
00:05:42,110 --> 00:05:43,280
I want underscore ID.

93
00:05:43,280 --> 00:05:44,510
I think this will be the key.

94
00:05:45,200 --> 00:05:45,710
Yeah.

95
00:05:45,980 --> 00:05:51,410
And of course it is not showing any error because error is empty, so it's not mapping actually.

96
00:05:52,220 --> 00:05:55,490
So we will create some images in a minute.

97
00:05:55,490 --> 00:05:59,870
But let's come to the bottom of the section after this scroll view.

98
00:05:59,870 --> 00:06:02,210
We will add a view here.

99
00:06:02,210 --> 00:06:07,340
So this is view with some styling.

100
00:06:10,640 --> 00:06:12,800
So styling will be padding 20

101
00:06:16,010 --> 00:06:19,190
border radius, 20, border radius ten.

102
00:06:19,790 --> 00:06:26,090
And then the background color, this will be colors, dot color, three.

103
00:06:28,340 --> 00:06:32,240
You can see in the bottom right after this, we will add an image.

104
00:06:32,240 --> 00:06:34,370
So let's import image from React Native.

105
00:06:36,070 --> 00:06:36,650
Right.

106
00:06:37,460 --> 00:06:39,410
Let's give this some property.

107
00:06:39,800 --> 00:06:42,050
First of all, is tile okay?

108
00:06:42,050 --> 00:06:43,370
I think it is not imported.

109
00:06:43,370 --> 00:06:44,750
So from React native.

110
00:06:47,210 --> 00:06:50,870
Okay, let's import manually image.

111
00:06:50,870 --> 00:06:51,380
Yeah.

112
00:06:51,830 --> 00:06:53,230
Let's give this some property.

113
00:06:53,240 --> 00:06:54,440
First of all is styling.

114
00:06:54,950 --> 00:07:02,510
So this tile, this will be very straightforward background color first.

115
00:07:02,510 --> 00:07:04,050
So this will be the color too.

116
00:07:04,070 --> 00:07:07,430
So color dot color two width hundred.

117
00:07:08,840 --> 00:07:09,800
Height hundred.

118
00:07:12,490 --> 00:07:12,820
Alina.

119
00:07:12,880 --> 00:07:17,400
Well, this is going to be center resize mode.

120
00:07:17,410 --> 00:07:21,490
This is going to be also center, of course, not center.

121
00:07:21,520 --> 00:07:23,830
This is going to be contain.

122
00:07:23,830 --> 00:07:24,460
Right.

123
00:07:25,900 --> 00:07:27,250
And one more thing.

124
00:07:27,250 --> 00:07:28,220
We need to pass this over.

125
00:07:28,240 --> 00:07:34,690
So source, this is going to be UI will be image.

126
00:07:34,690 --> 00:07:37,150
So we'll create a variable.

127
00:07:39,780 --> 00:07:41,310
This is the variable image.

128
00:07:41,310 --> 00:07:43,140
So this will be the URI, right?

129
00:07:43,770 --> 00:07:45,720
After the image, we will add another view.

130
00:07:49,050 --> 00:07:53,800
In this view, we will say style, flight direction.

131
00:07:55,110 --> 00:07:58,890
A row flight direction is a row and justify content.

132
00:07:58,890 --> 00:08:07,560
This will be center because in this view will first add touchable opacity.

133
00:08:08,460 --> 00:08:09,270
Touchable opacity.

134
00:08:09,270 --> 00:08:10,680
Let's import from React Native.

135
00:08:11,380 --> 00:08:16,590
Right inside this we will have an icon of the dot icon.

136
00:08:16,590 --> 00:08:20,790
Let's use of that icon first.

137
00:08:20,790 --> 00:08:21,750
Pass the icon name.

138
00:08:21,750 --> 00:08:22,440
So icon.

139
00:08:22,440 --> 00:08:25,770
This will be the icon off camera.

140
00:08:27,390 --> 00:08:32,100
So we can also copy this from the new right.

141
00:08:32,100 --> 00:08:37,440
So this is our looks quite similar right Also change the color to

142
00:08:40,560 --> 00:08:49,620
black color three and also styling background color colors or color to.

143
00:08:52,860 --> 00:08:53,120
Right.

144
00:08:53,160 --> 00:08:55,140
And also, let's add some margin.

145
00:08:55,890 --> 00:08:56,970
Margin is ten.

146
00:08:58,260 --> 00:09:01,410
And on the opacity, let's pass some information on press

147
00:09:04,890 --> 00:09:05,520
navigation.

148
00:09:05,520 --> 00:09:06,720
Let's take navigation.

149
00:09:13,620 --> 00:09:14,670
We have taken navigation.

150
00:09:14,670 --> 00:09:15,120
Now.

151
00:09:15,120 --> 00:09:22,830
Let's do navigation, dot navigate navigation, dot navigation, dot navigate.

152
00:09:22,830 --> 00:09:29,430
And we will navigate this to camera while passing update product, Update product.

153
00:09:29,430 --> 00:09:30,420
This will be true.

154
00:09:32,250 --> 00:09:32,550
Okay.

155
00:09:32,580 --> 00:09:35,550
Make sure to pass in as option as object.

156
00:09:35,550 --> 00:09:36,090
Right.

157
00:09:37,230 --> 00:09:39,330
So I am not clicking, I'm just holding.

158
00:09:39,330 --> 00:09:42,690
So we will also reduce the table opacity effect.

159
00:09:42,690 --> 00:09:45,890
So active opacity, this will be 0.9 or eight.

160
00:09:45,900 --> 00:09:47,100
So let's try.

161
00:09:48,240 --> 00:09:49,890
Yeah, this is exactly what we want.

162
00:09:49,920 --> 00:09:50,160
Right.

163
00:09:50,160 --> 00:09:56,730
I'm holding again, I wasn't clicking because if I click it will react to the camera page.

164
00:09:58,530 --> 00:09:59,010
Yeah.

165
00:09:59,460 --> 00:10:06,810
So let's come out of this view and now let's create a button here from the paper.

166
00:10:06,810 --> 00:10:07,500
This is add.

167
00:10:07,500 --> 00:10:10,650
Simply add now pass some properties.

168
00:10:10,650 --> 00:10:15,600
So first, so the button will have the background color,

169
00:10:18,480 --> 00:10:25,860
color, dot color, one red color, of course, padding six and text color change the text color to

170
00:10:25,860 --> 00:10:28,980
white, obviously colors dot color two.

171
00:10:29,700 --> 00:10:30,310
Yeah.

172
00:10:30,390 --> 00:10:32,340
And also let's add two things.

173
00:10:33,270 --> 00:10:36,420
Loading will have loading of visually and on press.

174
00:10:36,420 --> 00:10:37,050
We'll have

175
00:10:40,410 --> 00:10:41,850
on price will have some handler.

176
00:10:41,850 --> 00:10:47,340
Let's simply pass the summit handler because we don't need to pass any argument.

177
00:10:47,340 --> 00:10:50,010
And we will also do one more thing that.

178
00:10:52,030 --> 00:10:53,110
We will disable the button.

179
00:10:53,110 --> 00:11:00,670
If you make change, we will create a image change variable will disable the button if image change

180
00:11:01,330 --> 00:11:02,290
is not true.

181
00:11:02,500 --> 00:11:03,100
All right.

182
00:11:03,100 --> 00:11:06,390
So will only allow if image is changed.

183
00:11:06,400 --> 00:11:07,090
Right.

184
00:11:07,540 --> 00:11:10,420
So if image does not change, then we will disable the button.

185
00:11:10,420 --> 00:11:11,020
Right.

186
00:11:11,230 --> 00:11:12,580
So let's create the variable.

187
00:11:13,340 --> 00:11:15,340
Let's go to the top.

188
00:11:16,510 --> 00:11:17,410
Here we have images.

189
00:11:17,590 --> 00:11:18,090
Right.

190
00:11:19,900 --> 00:11:26,760
And change the ID to product ID because we will use the ID keyword to reference the image ID.

191
00:11:26,770 --> 00:11:29,770
So the ID here is product ID, right.

192
00:11:31,390 --> 00:11:35,260
And then we will have an image insert image.

193
00:11:36,940 --> 00:11:39,580
So I will remove the image from bottom.

194
00:11:39,580 --> 00:11:43,240
This is initially is you can say null.

195
00:11:45,700 --> 00:11:47,020
Let's remove from the bottom.

196
00:11:47,020 --> 00:11:48,160
So this is the image.

197
00:11:48,160 --> 00:11:51,730
And then we will have a variable called image change.

198
00:11:51,730 --> 00:11:57,010
Image change insert image change

199
00:11:59,860 --> 00:12:00,520
user set.

200
00:12:00,520 --> 00:12:02,270
Initially it is false, right?

201
00:12:02,290 --> 00:12:05,910
If I'll say you can see we we don't have any loading here.

202
00:12:05,920 --> 00:12:06,450
Yeah.

203
00:12:06,880 --> 00:12:08,320
So let's create a loading.

204
00:12:09,040 --> 00:12:16,810
If I'll do loading is equal to true and I'll go again in the update product and inside my images.

205
00:12:17,680 --> 00:12:19,300
Okay, let's create a summit handler.

206
00:12:27,500 --> 00:12:28,100
Again.

207
00:12:28,850 --> 00:12:29,930
Go here, go here.

208
00:12:29,930 --> 00:12:33,710
EDIT You see manage images and it is loading.

209
00:12:33,710 --> 00:12:35,270
So let's change this to false.

210
00:12:36,800 --> 00:12:38,540
Yeah, this all looks.

211
00:12:39,590 --> 00:12:44,090
Also we need to create a delete handler console log.

212
00:12:46,550 --> 00:12:50,800
This image ID will console.log the image ID and bottom.

213
00:12:50,930 --> 00:12:52,670
We will add a product ID.

214
00:12:53,330 --> 00:12:56,150
Product ID with the product ID?

215
00:12:56,150 --> 00:12:57,320
Yeah, just like that.

216
00:12:58,310 --> 00:13:02,690
Now let's create the image card component because we can't see anything.

217
00:13:02,690 --> 00:13:02,900
Right?

218
00:13:02,900 --> 00:13:03,560
Of course.

219
00:13:03,560 --> 00:13:09,170
So we have sent these three things, right?

220
00:13:09,170 --> 00:13:19,610
Let's open the image card handler and inside this we have source ID and delete the three things RC ID

221
00:13:19,610 --> 00:13:20,870
and delete handler.

222
00:13:23,570 --> 00:13:24,650
Let's use them.

223
00:13:24,980 --> 00:13:31,490
So first of all, of course this is going to be a view, so we will add some styling.

224
00:13:31,490 --> 00:13:33,800
So let's create a variable.

225
00:13:33,800 --> 00:13:38,720
Of course, account style is equal to a weight.

226
00:13:38,750 --> 00:13:39,710
Not of course not.

227
00:13:39,710 --> 00:13:41,840
A weight is equal to a stylesheet.

228
00:13:42,080 --> 00:13:47,870
It is a temporary dot create and we'll use a word container.

229
00:13:47,870 --> 00:13:49,460
Let's pass all the information.

230
00:13:49,460 --> 00:14:00,200
So background color, this is going to be colors, dot color to white color and elevation will be five

231
00:14:00,500 --> 00:14:02,150
and margin will be ten.

232
00:14:06,190 --> 00:14:07,810
Banning will be 15.

233
00:14:10,900 --> 00:14:12,480
Online items will be sent to

234
00:14:15,910 --> 00:14:16,510
border.

235
00:14:16,540 --> 00:14:17,470
This will be ten.

236
00:14:19,600 --> 00:14:21,460
Height will be 300.

237
00:14:22,210 --> 00:14:24,580
And let's pass this information.

238
00:14:25,780 --> 00:14:27,820
Let's use this style in here.

239
00:14:27,820 --> 00:14:30,010
So styles dot container.

240
00:14:32,460 --> 00:14:33,160
All right.

241
00:14:35,000 --> 00:14:37,610
So this will have a container and then image.

242
00:14:37,610 --> 00:14:40,500
So let's import our image from React Native.

243
00:14:40,520 --> 00:14:41,390
It is not importing.

244
00:14:41,390 --> 00:14:44,480
Let's import manually image.

245
00:14:46,370 --> 00:14:49,460
Now, inside this image, first of all, we need to pass the source.

246
00:14:49,460 --> 00:14:54,830
So source will be the URI, which will be the SRI, which we have taken from the above.

247
00:14:55,130 --> 00:14:57,710
And inside this we will add some styling.

248
00:14:57,710 --> 00:14:59,390
So which will be 100%.

249
00:15:03,180 --> 00:15:07,690
Height will be 80% and the resize mode.

250
00:15:07,710 --> 00:15:10,910
This will be the contain three things.

251
00:15:10,920 --> 00:15:11,400
Okay.

252
00:15:11,670 --> 00:15:17,520
Now, after this image, we will simply add a touchable opacity opacity.

253
00:15:17,520 --> 00:15:19,470
So let's import touchable opacity.

254
00:15:19,620 --> 00:15:22,830
Inside this we will have outer of the icon.

255
00:15:25,980 --> 00:15:34,650
Inside this we will add the size 30 I can delete will have a style called background, and the background

256
00:15:34,650 --> 00:15:36,750
color will be the color one.

257
00:15:36,750 --> 00:15:37,050
Right.

258
00:15:37,050 --> 00:15:42,540
So if I'll say you can't see anything of course is still so basically this is for delete deleting product

259
00:15:42,540 --> 00:15:45,300
and we will also use delete handler here on press.

260
00:15:45,300 --> 00:15:50,160
We will call the delete handler while passing the ID idea of the image basically.

261
00:15:50,160 --> 00:15:50,610
Right.

262
00:15:50,610 --> 00:15:54,450
So now we have already created this image guard.

263
00:15:55,260 --> 00:15:57,240
Now open the product, update product.

264
00:16:00,860 --> 00:16:07,510
And last passed the array in in the many images we have taken the empty array.

265
00:16:07,520 --> 00:16:09,170
So let's add some object.

266
00:16:09,470 --> 00:16:11,030
I will create this array above.

267
00:16:11,030 --> 00:16:16,700
So if the property and value same, then simply we need to pass the images and we will create the array

268
00:16:16,700 --> 00:16:17,360
on the top.

269
00:16:17,360 --> 00:16:19,760
So MDF basically.

270
00:16:21,020 --> 00:16:22,930
So let's imagine this is the images.

271
00:16:22,940 --> 00:16:25,520
So this is the image that we are passing.

272
00:16:25,940 --> 00:16:27,530
Now let's add some property.

273
00:16:28,790 --> 00:16:35,180
So I'll copy a URL image URL from, let's say if I'll open the cart in the top.

274
00:16:35,180 --> 00:16:36,440
We have this image, right?

275
00:16:37,190 --> 00:16:38,510
Let's take this image.

276
00:16:42,180 --> 00:16:43,110
I will copy this.

277
00:16:43,110 --> 00:16:45,390
And remember in the images are what we have.

278
00:16:45,510 --> 00:16:51,000
We have three things You are l and the idea of image basically two things, right?

279
00:16:54,260 --> 00:16:56,480
So you all will be this that I have copied.

280
00:16:56,480 --> 00:16:57,800
And another thing will be the ID.

281
00:16:57,830 --> 00:17:01,340
Underscore ID basically that MongoDB will generate for us.

282
00:17:01,340 --> 00:17:07,820
So this is the first copy paste second and change the ID simply that manage images.

283
00:17:07,820 --> 00:17:09,950
And you can see we have two images here, right?

284
00:17:09,950 --> 00:17:11,420
You can clearly see both of them.

285
00:17:12,110 --> 00:17:14,990
So this is how all of our images will look.

286
00:17:14,990 --> 00:17:16,700
We can see all the images of product.

287
00:17:16,700 --> 00:17:18,350
We can delete any images, right?

288
00:17:18,470 --> 00:17:24,710
If I click this, nothing will happen because in the product images we have created this image handler

289
00:17:25,010 --> 00:17:26,120
delete basically.

290
00:17:26,390 --> 00:17:32,000
So after clicking this it should have printed the idea of both.

291
00:17:32,000 --> 00:17:33,350
So yeah, image id in product.

292
00:17:33,590 --> 00:17:34,340
So it is working.

293
00:17:34,340 --> 00:17:39,170
If I'll delete this one, then you can see the ID and the image of this product.

294
00:17:39,170 --> 00:17:39,350
Right?

295
00:17:39,350 --> 00:17:40,820
So it is working fine correctly.

296
00:17:41,630 --> 00:17:44,090
So everything is working as we expected.

297
00:17:44,270 --> 00:17:44,840
Right.

298
00:17:44,840 --> 00:17:51,140
And we will create this now because this is the only thing that is remaining to change the camera,

299
00:17:51,140 --> 00:17:52,310
basic camera route.

300
00:17:52,310 --> 00:17:54,290
So let's do this.

301
00:17:54,860 --> 00:17:56,090
And one more thing here.

302
00:17:56,090 --> 00:18:00,740
We have used the image and in the new product, if you go in the new product, we have used the avatar.

303
00:18:00,740 --> 00:18:02,090
So it's up to you, your choice.

304
00:18:02,660 --> 00:18:08,660
You can also use the image here because of course, the product image will be in the square, Right?

305
00:18:08,660 --> 00:18:09,710
So it's up to you.

306
00:18:09,980 --> 00:18:10,250
Now.

307
00:18:10,250 --> 00:18:13,520
You must be wondering when we will use these two.

308
00:18:13,730 --> 00:18:16,100
We will use them in the use effects.

309
00:18:16,100 --> 00:18:16,500
Okay.

310
00:18:16,520 --> 00:18:17,900
So I'll show you in a minute.

311
00:18:17,930 --> 00:18:20,120
Let's now create the camera component.