1
00:00:02,220 --> 00:00:05,530
Let's make sure we can also edit products. Now

2
00:00:05,760 --> 00:00:11,430
as always, I'll copy my code to get access to the products collection and for editing,

3
00:00:11,460 --> 00:00:14,750
I have actually two steps which I need to execute.

4
00:00:14,760 --> 00:00:20,430
First of all, I need to get the product, that should already work because I reuse the logic I use for getting

5
00:00:20,430 --> 00:00:25,950
it for the detail page and hence indeed the form here is pre-populated with the product data.

6
00:00:25,950 --> 00:00:31,580
Now when we click that button, a request will be sent to dispatch route here and there,

7
00:00:31,590 --> 00:00:37,250
I still need to add some code in this place to store the updated product in the database.

8
00:00:37,470 --> 00:00:44,250
So I still get access to the products collection here but then I can call update one here to update one

9
00:00:44,250 --> 00:00:51,300
product because I know I will only need to update one and I'll identify that product by the ID which again

10
00:00:51,390 --> 00:00:53,820
is encoded in the request url.

11
00:00:54,090 --> 00:01:02,500
So again I'll create a new objectid object and I pass my request params ID here, just as before,

12
00:01:02,880 --> 00:01:06,530
so now this finds me the product I want to update.

13
00:01:06,540 --> 00:01:14,150
Now you learned how you can update it and I will simply use $set here as a key name to define

14
00:01:14,150 --> 00:01:14,630
the logic

15
00:01:14,640 --> 00:01:23,370
I want to apply to update the product and I will update it by basically setting updated product because

16
00:01:23,370 --> 00:01:31,190
here, I describe all the changes that should be required and we can confirm this by going into the shell

17
00:01:31,250 --> 00:01:33,380
where I am connected to my database.

18
00:01:33,380 --> 00:01:35,060
Here this is how the product is stored,

19
00:01:35,060 --> 00:01:42,700
we have a name, description, price and image and that is exactly what I set here, name, description, price

20
00:01:42,700 --> 00:01:43,450
and image.

21
00:01:43,480 --> 00:01:50,060
So I set new values which are parsed from the incoming request for all these fields inside of the

22
00:01:50,060 --> 00:01:50,620
document

23
00:01:50,620 --> 00:01:52,690
I passed to set.

24
00:01:52,690 --> 00:01:55,450
Now one thing I need to change however is here,

25
00:01:55,630 --> 00:02:01,910
the product price should again be handled with decimal 128 from string

26
00:02:02,050 --> 00:02:06,320
and for that, I first of all need to convert the price to a string like this.

27
00:02:07,380 --> 00:02:15,180
So now I have all the logic I need to update a product, update one then also returns a promise. So

28
00:02:15,180 --> 00:02:20,390
we can reuse that well-known error handling code which I have here,

29
00:02:20,420 --> 00:02:25,570
so let's copy that over into our catch function down there and in the then block,

30
00:02:26,020 --> 00:02:30,890
I get a result which I could output but I know at this point that we were successful,

31
00:02:30,900 --> 00:02:34,540
so here I'll just return product updated and the ID,

32
00:02:34,650 --> 00:02:40,110
well that is something I can get from my request params because I already use that ID for finding the

33
00:02:40,110 --> 00:02:41,130
product.

34
00:02:41,340 --> 00:02:51,570
With that out of the way, we can restart our backend server and now let's try changing the product,

35
00:02:51,610 --> 00:02:56,110
let's add a couple of exclamation marks and let's change the price. If I click update product

36
00:02:56,120 --> 00:03:02,210
now, here we don't see that, on the backend I didn't get an error though,

37
00:03:02,340 --> 00:03:05,620
now let's look into our database through the shell

38
00:03:06,110 --> 00:03:12,830
and indeed here we see something strange, a nested updated product was added with the updated data.

39
00:03:12,830 --> 00:03:14,110
Now what's happening here?

40
00:03:16,420 --> 00:03:25,120
Well the way I wrote my update code here, this is basically translated to this by Javascript,

41
00:03:25,120 --> 00:03:31,330
so I'm passing an object to set where I instruct it to basically add a new field called updated product

42
00:03:31,780 --> 00:03:33,610
with all that data.

43
00:03:34,090 --> 00:03:42,230
So what I indeed want to do is I want to set set equal to updated product because updated product already

44
00:03:42,320 --> 00:03:45,450
is an object describing the entire change,

45
00:03:45,680 --> 00:03:47,250
so this is what I want to do.

46
00:03:48,680 --> 00:03:50,270
Now to fix this manually,

47
00:03:50,670 --> 00:04:01,110
I'll quickly go into the shell, take the object id of the product where I mess this up and then use

48
00:04:01,290 --> 00:04:02,490
update one here by

49
00:04:04,800 --> 00:04:12,570
calling update one like this, finding the product for this ID and then I can use $unset as

50
00:04:12,570 --> 00:04:19,780
you learned to pass the key name which is updated product and set this to an empty string.

51
00:04:21,370 --> 00:04:27,340
And now if I find all the products again, this was cleaned up and now with the code also fixed here, I just

52
00:04:27,340 --> 00:04:29,040
need to restart my server

53
00:04:31,490 --> 00:04:37,000
and now if we edit this again, add a couple of exclamation marks and change the price and I click update

54
00:04:37,070 --> 00:04:37,790
product,

55
00:04:37,790 --> 00:04:39,370
now this looks much better

56
00:04:39,500 --> 00:04:46,640
and now if we also inspect this in our shell connected to our database, here of course we see there is no

57
00:04:46,640 --> 00:04:47,410
redundant data

58
00:04:47,410 --> 00:04:49,580
now, this was updated correctly.

59
00:04:49,640 --> 00:04:55,190
So this is how we can update the data and how we should make sure that we well update it correctly I

60
00:04:55,190 --> 00:04:55,790
guess.

61
00:04:55,790 --> 00:04:59,300
Now one thing is missing and that is how we can delete a product.

62
00:04:59,300 --> 00:05:03,980
Now I'll do this in this same lecture because it's really simple and of course feel free to pause and

63
00:05:03,980 --> 00:05:04,880
do this on your own,

64
00:05:04,880 --> 00:05:06,650
it's a great practice.

65
00:05:07,520 --> 00:05:10,700
We do it of course in this delete router method

66
00:05:11,200 --> 00:05:15,450
and we do it by first of all getting access to the products collection again,

67
00:05:16,910 --> 00:05:26,070
like that, then we can call delete one here and again, we will identify the product by creating a new

68
00:05:26,130 --> 00:05:32,000
objectId object to which I pass request params ID because we do extract the ID here too,

69
00:05:32,010 --> 00:05:34,390
it will be part of the url

70
00:05:35,190 --> 00:05:46,320
and then we have the then and the catch block, for errors we can use our well-known error handler and for

71
00:05:46,350 --> 00:05:52,470
the success block here that we were successful, I'll move this response in there. And that should be all,

72
00:05:52,590 --> 00:05:57,360
that should be all the code we need to delete a product from our products collection.

73
00:05:57,660 --> 00:06:05,090
So as before, let's switch to our terminal where the backend server runs, quit it and restart it due to our

74
00:06:05,100 --> 00:06:08,980
change and let's then simply hit delete.

75
00:06:09,900 --> 00:06:11,620
Now was that successful?

76
00:06:11,850 --> 00:06:12,990
Let's reload the page,

77
00:06:14,350 --> 00:06:20,030
looks like it was. So the fact that it did update is just a little error in the react code,

78
00:06:20,110 --> 00:06:26,200
you can fix it by going to that products.js file in the product folder in the pages folder in the source

79
00:06:26,200 --> 00:06:26,810
folder

80
00:06:28,380 --> 00:06:36,820
and there, grab all the code you find in the componentDidMount, copy it, then add a new function between

81
00:06:36,820 --> 00:06:44,630
render and product delete handler which you can call fetch data, created like this

82
00:06:44,630 --> 00:06:49,750
with this syntax, paste the code you copied in there and then inside componentDidMount,

83
00:06:49,760 --> 00:06:55,520
you can call this fetch data like that and then you copy that call and also execute it here in the

84
00:06:55,520 --> 00:06:56,160
then block

85
00:06:56,240 --> 00:07:00,070
once something was deleted. With this tiny change made,

86
00:07:00,350 --> 00:07:05,520
if you reload the react app and you delete the earrings, now this say page is updated.

87
00:07:05,540 --> 00:07:07,570
So now we can add products, fetch them,

88
00:07:07,610 --> 00:07:13,460
fetch a single product and also delete products and indeed if we go to the mongo shell and we look into

89
00:07:13,460 --> 00:07:14,300
the database,

90
00:07:14,300 --> 00:07:16,880
nothing is in there because we deleted it all.

91
00:07:16,880 --> 00:07:23,870
Now let me show you how you could add pagination before we also add user authentication to our application

92
00:07:23,990 --> 00:07:26,730
so that I can explain what's important there.