1
00:00:02,230 --> 00:00:08,440
So now that we can view all products, the details of a single product and delete a product and add a product,

2
00:00:08,440 --> 00:00:11,240
of course we want to be able to edit a product too.

3
00:00:11,350 --> 00:00:13,570
This is again an awesome time for you

4
00:00:13,660 --> 00:00:16,900
to practice this because we'll only use things we did thus far

5
00:00:17,020 --> 00:00:22,650
after a short pause which you can use to pause the video, we can of course continue together.

6
00:00:22,670 --> 00:00:25,550
So were you successful?

7
00:00:25,550 --> 00:00:28,250
Let's do this together. Now for editing,

8
00:00:28,250 --> 00:00:32,090
we start on the edit products.js page or on that file

9
00:00:32,090 --> 00:00:37,610
and first of all, we need to ensure that initially, we will load the detailed data for the product that

10
00:00:37,610 --> 00:00:39,470
should be edited correctly.

11
00:00:39,470 --> 00:00:42,690
Now we get that code to load such data in the product.js

12
00:00:42,710 --> 00:00:49,200
file where we already load some product detail data, so we can just copy that entire code here essentially

13
00:00:49,820 --> 00:00:54,110
and yes, you could of course refactor this to outsource it into one file,

14
00:00:54,140 --> 00:01:00,200
I'll go with the more verbose approach here to make this really clear where I'm using what and now

15
00:01:00,260 --> 00:01:01,820
I'm getting access to the collection,

16
00:01:01,820 --> 00:01:08,790
I'm finding the right product here, convert it to an array because I have a cursor here, get my product,

17
00:01:08,810 --> 00:01:13,980
convert the native types and then I just need to make sure I set my state correctly,

18
00:01:14,210 --> 00:01:17,430
so the error handler is all right,

19
00:01:17,600 --> 00:01:18,860
we can leave it as it is

20
00:01:18,990 --> 00:01:24,330
but here I want to ensure that I set my state like this, I set isLoading to false

21
00:01:24,440 --> 00:01:31,130
and then I retrieve my product data, that toString conversion here is not required anymore but the rest

22
00:01:31,250 --> 00:01:32,520
should be fine.

23
00:01:32,960 --> 00:01:36,310
Now we can get rid of that axios code down there

24
00:01:37,980 --> 00:01:41,770
and we can save this file.

25
00:01:41,860 --> 00:01:45,300
Now if I click on edit, yes this works,

26
00:01:45,320 --> 00:01:47,600
it fills out the blanks for us.

27
00:01:47,600 --> 00:01:49,270
So now we are loading the data,

28
00:01:49,280 --> 00:01:52,740
now we just have to make sure that the update product button works

29
00:01:52,940 --> 00:01:59,470
and for that, we of course need to work on this place where we send a patch request with axios.

30
00:01:59,550 --> 00:02:03,680
This is not what we'll do anymore and hence we can now also remove the axios import

31
00:02:03,680 --> 00:02:10,090
finally, instead we'll do almost the same we did when we insert a product. So we can copy that code or

32
00:02:10,190 --> 00:02:12,630
to be precise since we reuse that part,

33
00:02:12,630 --> 00:02:14,450
we can also just move it out of there

34
00:02:14,690 --> 00:02:20,300
but then we can copy this code, move it into the edit case here

35
00:02:20,410 --> 00:02:24,190
but there of course I won't insert one product but I'll update one.

36
00:02:24,250 --> 00:02:28,240
The first argument therefore is the selector, which product to update

37
00:02:28,330 --> 00:02:34,750
and here I want to update the product with the right ID obviously. So I'll select the product where the

38
00:02:34,750 --> 00:02:39,370
ID is correct, where the ID and now I need my bson type,

39
00:02:39,550 --> 00:02:44,090
so where I have bson objectid where the ID matches my objectid here.

40
00:02:44,230 --> 00:02:50,230
Now what is my ID? Well I can get this from the props match params ID

41
00:02:50,230 --> 00:02:53,970
and that is how I extract my ID in componentDidMount too, right,

42
00:02:53,980 --> 00:02:55,690
this is how I get the ID there

43
00:02:58,330 --> 00:03:00,680
and this is how I can get the ID down there.

44
00:03:02,140 --> 00:03:07,360
This gets stored in the request and it should so that I can handle it in the same way I handle the insertion

45
00:03:07,360 --> 00:03:08,420
of a product

46
00:03:08,740 --> 00:03:10,380
and now the page reloads

47
00:03:10,690 --> 00:03:16,020
and if we now change the price for example and I click update product, it changed here too.

48
00:03:16,240 --> 00:03:22,540
So now we get all the crud functionality added and we are now handling it fully with mongodb stitch

49
00:03:22,870 --> 00:03:25,620
and still in a super secure way

50
00:03:25,780 --> 00:03:31,480
but of course, the next step is that we now add users and not this anonymous access which allows every

51
00:03:31,480 --> 00:03:36,480
visitor of our page to do everything. That might be what we want for some parts of the page

52
00:03:36,580 --> 00:03:41,830
but let's say for some parts or in our example for everything, we actually want to lock it down to real

53
00:03:41,830 --> 00:03:42,610
users and

54
00:03:42,680 --> 00:03:44,590
this is something we'll work on now.