1
00:00:00,230 --> 00:00:00,740
All right, guys.

2
00:00:00,740 --> 00:00:03,890
So now we're able to get our products.

3
00:00:03,890 --> 00:00:06,770
I want to now be able to add a new product.

4
00:00:06,770 --> 00:00:09,560
So we're going to work on the back end first.

5
00:00:09,560 --> 00:00:11,480
So let's jump into back end.

6
00:00:11,480 --> 00:00:17,690
And if we go into our products controller, all we have right now is get products and get product by

7
00:00:17,690 --> 00:00:18,050
ID.

8
00:00:18,260 --> 00:00:20,330
So we want to create a new endpoint.

9
00:00:20,330 --> 00:00:22,670
I'm just going to copy this first one.

10
00:00:23,680 --> 00:00:29,140
And let's go right here and then let's change this to, let's say, create.

11
00:00:31,420 --> 00:00:34,540
We'll say create a product.

12
00:00:34,720 --> 00:00:39,250
And it's going to be of course, it's going to be a post request.

13
00:00:40,510 --> 00:00:47,260
And it's going to be API products and then the access is going to be private and admin.

14
00:00:48,060 --> 00:00:52,740
And we'll change the name of this to, let's say, create.

15
00:00:53,700 --> 00:00:54,900
Product.

16
00:00:58,140 --> 00:00:58,650
Okay.

17
00:00:58,650 --> 00:01:00,180
And then let's see.

18
00:01:00,860 --> 00:01:02,440
We're going to get rid of.

19
00:01:02,450 --> 00:01:06,650
Let's just get rid of this stuff here and oh, wait, what am I doing?

20
00:01:06,650 --> 00:01:08,090
This should be const.

21
00:01:10,280 --> 00:01:15,530
Now, the way this is going to work is when we click create product, it's going to create it right

22
00:01:15,530 --> 00:01:18,260
away with just some sample content.

23
00:01:18,260 --> 00:01:22,100
So you'll click create product and then you'll see it in the list.

24
00:01:22,100 --> 00:01:25,850
Then you can go and you can edit it and update the fields.

25
00:01:25,850 --> 00:01:32,990
So we're going to create that product, let's say const product, and we're going to set that to a new

26
00:01:32,990 --> 00:01:34,190
product.

27
00:01:34,430 --> 00:01:38,090
Okay, Using the model, you should have the model being brought in.

28
00:01:38,390 --> 00:01:42,020
And in this object is where we want to put our fields.

29
00:01:42,020 --> 00:01:47,750
So we're going to have a sample name for the name, the price set to zero.

30
00:01:47,780 --> 00:01:50,090
The user, of course, is the logged in user.

31
00:01:50,120 --> 00:01:54,050
The image is going to come from images sample Jpeg.

32
00:01:54,530 --> 00:01:54,950
Okay.

33
00:01:54,950 --> 00:02:03,140
So basically that's going to be in front end public images and you should have this sample Jpeg and

34
00:02:03,170 --> 00:02:09,400
of course you can change that to whatever you want and then the next thing is going to be the brand.

35
00:02:09,410 --> 00:02:17,250
So we'll say sample brand, sample category count in stock will be zero, number reviews will be zero,

36
00:02:17,370 --> 00:02:23,040
the description will just say sample description and that should do it.

37
00:02:23,040 --> 00:02:26,640
So now underneath we created that product variable.

38
00:02:26,640 --> 00:02:33,480
We want to save it and we want to save the actual product into this variable.

39
00:02:33,480 --> 00:02:38,400
Then we're going to respond with that with a status of 201, which means something was created.

40
00:02:38,820 --> 00:02:42,840
Okay, so now we can go ahead and export that, let's say, create product.

41
00:02:43,750 --> 00:02:46,540
And we need to also create the route.

42
00:02:46,540 --> 00:02:50,470
So let's go into routes and then product routes.

43
00:02:50,740 --> 00:02:55,720
And from here we want to bring the middleware in because we haven't done that yet.

44
00:02:55,720 --> 00:03:05,350
So let's say import, protect and admin from our middleware, our auth middleware, and then let's see,

45
00:03:05,350 --> 00:03:07,480
we're going to add a new route.

46
00:03:07,870 --> 00:03:13,000
So it's actually going to be just a slash, which is slash API products.

47
00:03:13,000 --> 00:03:15,370
So we have get.

48
00:03:15,370 --> 00:03:20,320
So let's add post onto this because that's it's a post request that we're looking for.

49
00:03:20,320 --> 00:03:24,670
We're going to add the Protect middleware and we're going to add the admin middleware.

50
00:03:24,670 --> 00:03:28,360
And then we want the create product which we need to bring in.

51
00:03:28,360 --> 00:03:31,990
So in the import, let's add create product.

52
00:03:33,480 --> 00:03:34,950
And that should do it.

53
00:03:36,270 --> 00:03:44,460
So now if we make a post request, we should be able to create a new product and it will just contain

54
00:03:44,460 --> 00:03:45,650
the sample data.

55
00:03:45,660 --> 00:03:47,970
So now we can go to our front end.

56
00:03:48,820 --> 00:03:50,260
And let's go to our slice.

57
00:03:50,260 --> 00:03:57,280
So sauce slices and then products API slice and we're going to create a mutation.

58
00:03:57,280 --> 00:04:07,960
So let's go under the last query here and let's call this create product, set that to a mutation and

59
00:04:07,960 --> 00:04:14,380
we have a query with a actually we don't we're not passing in any data because again, it's just going

60
00:04:14,380 --> 00:04:18,130
to create that sample data and then we can go ahead and edit it.

61
00:04:18,130 --> 00:04:20,140
So we don't need to pass anything in.

62
00:04:20,170 --> 00:04:24,580
We just want to hit the products URL with a method of post.

63
00:04:24,580 --> 00:04:31,900
And I'm also going to add invalidate tags and set that to product.

64
00:04:32,450 --> 00:04:38,390
Because what this will do is it will stop it from being cached so that we have fresh data.

65
00:04:39,230 --> 00:04:39,690
Okay.

66
00:04:39,710 --> 00:04:45,020
So that we don't have to like re re if we don't put this, we'll have to reload the page after we click

67
00:04:45,020 --> 00:04:46,330
create new product.

68
00:04:46,340 --> 00:04:49,820
So now let's export that.

69
00:04:49,820 --> 00:04:54,140
So we're going to say use create product mutation.

70
00:04:55,520 --> 00:04:58,880
And now we'll go into our product list screen.

71
00:04:59,520 --> 00:05:02,760
So screens, admin, product list.

72
00:05:02,940 --> 00:05:08,670
And then from here, we want to bring in along with the get product query.

73
00:05:08,670 --> 00:05:17,130
We want to bring in use product or create product mutation and then we'll get what we need from it.

74
00:05:18,120 --> 00:05:22,680
Say const and put some brackets from our mutation.

75
00:05:23,320 --> 00:05:31,840
And the name of the function we call is going to be create product and we'll also get is loading.

76
00:05:33,530 --> 00:05:38,960
But we're going to rename that to Loading Create.

77
00:05:40,610 --> 00:05:41,060
Okay.

78
00:05:41,060 --> 00:05:42,710
And then we need.

79
00:05:43,980 --> 00:05:44,880
Let's see.

80
00:05:44,910 --> 00:05:48,000
So on the button we have, which is where is it?

81
00:05:49,130 --> 00:05:49,610
Right here.

82
00:05:49,610 --> 00:05:53,730
So this button right here, we're going to add a click handler, too.

83
00:05:53,750 --> 00:05:55,910
So let's say on click.

84
00:05:56,680 --> 00:06:02,980
And when we click this, we're going to call a function called create product handler.

85
00:06:04,040 --> 00:06:06,260
And we'll add that up here.

86
00:06:10,800 --> 00:06:15,960
And no, we don't want to do that because all that stuff is going to be added automatically.

87
00:06:16,260 --> 00:06:20,850
So what we do want to do first is make this a synchronous.

88
00:06:20,970 --> 00:06:25,380
And I'm going to just do a confirm since.

89
00:06:26,520 --> 00:06:32,400
Since we're well, we're not deleting it, but since it's just a button we push and it automatically

90
00:06:32,400 --> 00:06:34,830
creates like it doesn't take us to a form or anything.

91
00:06:34,830 --> 00:06:39,300
I just want to have a confirm that they want to add a new product.

92
00:06:39,300 --> 00:06:45,090
So let's say Window dot confirm is just a better user experience.

93
00:06:45,090 --> 00:06:47,700
I think So we'll say, Are you?

94
00:06:48,570 --> 00:06:48,930
We'll say.

95
00:06:48,960 --> 00:06:50,220
Are you sure?

96
00:06:51,250 --> 00:06:53,560
You want to create a new product?

97
00:06:54,280 --> 00:06:54,700
Okay.

98
00:06:54,700 --> 00:06:56,680
And then in here, we'll do a try.

99
00:06:56,710 --> 00:06:57,640
Catch.

100
00:06:59,730 --> 00:07:05,310
And inside the try, we're going to await on our create product.

101
00:07:08,520 --> 00:07:14,070
And we don't have to we don't have to pass anything in because that gets added in the back end.

102
00:07:14,070 --> 00:07:20,700
And then we just want to refetch and we can get refetch from our use Getproducts query up here, we'll

103
00:07:20,700 --> 00:07:22,050
say Refetch.

104
00:07:22,800 --> 00:07:24,630
And then if there's an error.

105
00:07:25,370 --> 00:07:28,430
So if there's an error, we're just going to do our toast.

106
00:07:28,610 --> 00:07:29,780
Say, toast, Dot.

107
00:07:29,810 --> 00:07:30,260
Oops.

108
00:07:30,260 --> 00:07:31,470
Did I not bring in?

109
00:07:31,490 --> 00:07:31,820
No.

110
00:07:31,820 --> 00:07:32,910
We need to bring that in.

111
00:07:32,930 --> 00:07:34,130
So import.

112
00:07:36,900 --> 00:07:40,470
Toast from from.

113
00:07:42,520 --> 00:07:43,810
What is going on here?

114
00:07:43,840 --> 00:07:45,070
Reactos defy.

115
00:07:45,310 --> 00:07:47,590
And then we're going to call Toast.

116
00:07:48,340 --> 00:07:51,310
And just pass in our message.

117
00:07:51,310 --> 00:07:55,690
And I believe it should be let's make this error.

118
00:07:56,230 --> 00:08:07,690
So I believe this should be e r dot data dot message or error dot error.

119
00:08:11,480 --> 00:08:12,890
And I think that should do it.

120
00:08:12,890 --> 00:08:14,150
So let's save that.

121
00:08:14,880 --> 00:08:15,380
Let's see.

122
00:08:15,380 --> 00:08:16,540
What's this for?

123
00:08:16,580 --> 00:08:19,190
Times is defined but never used.

124
00:08:19,490 --> 00:08:20,180
Loading.

125
00:08:20,180 --> 00:08:20,650
Create.

126
00:08:20,660 --> 00:08:22,790
Okay, so the loading create.

127
00:08:23,270 --> 00:08:24,530
I'm going to put that.

128
00:08:25,850 --> 00:08:26,800
Let's see.

129
00:08:26,810 --> 00:08:28,220
We're going to put that right above.

130
00:08:28,220 --> 00:08:29,510
This is loading.

131
00:08:31,640 --> 00:08:35,419
So we'll just say if loading create is true, then show a loader.

132
00:08:37,340 --> 00:08:38,360
And I think that's it.

133
00:08:38,360 --> 00:08:42,500
So let's save and let's come over here and let's click Create product.

134
00:08:42,530 --> 00:08:45,170
It says, Are you sure you want to create a new product?

135
00:08:45,170 --> 00:08:46,130
I'll click okay.

136
00:08:46,130 --> 00:08:50,060
And now you can see we get a new product with all the sample data.

137
00:08:51,390 --> 00:08:51,750
Good.

138
00:08:51,750 --> 00:08:54,060
So I think that should do it for this video.

139
00:08:54,060 --> 00:09:00,330
In the next one, we're going to make it so that we can then edit the data for this product.