1
00:00:01,140 --> 00:00:10,180
In this video, we are going to implement profile details update and that is a full name or the email

2
00:00:10,200 --> 00:00:10,980
field.

3
00:00:11,100 --> 00:00:18,720
So what are the procedures or the process going to be the same as we did for the profile and the cover

4
00:00:18,720 --> 00:00:20,790
image, but slightly different.

5
00:00:20,800 --> 00:00:22,140
So let's have a look.

6
00:00:22,350 --> 00:00:30,390
The first step is that when I click on this icon, I want to render a form, but on the form I want

7
00:00:30,390 --> 00:00:34,310
to populate the existing data into the form.

8
00:00:34,320 --> 00:00:36,720
So how are you going to achieve this?

9
00:00:36,720 --> 00:00:41,520
Because of that, we are going to make a request to two endpoints.

10
00:00:41,640 --> 00:00:46,230
One endpoint is going to find details about a user.

11
00:00:46,340 --> 00:00:52,730
The second point is going to make the actual HTTP request to update the details.

12
00:00:52,740 --> 00:00:54,000
So let's have a look.

13
00:00:54,120 --> 00:01:02,970
Lucky for us, we have the form inside the views and users and this is a form called update user and

14
00:01:02,970 --> 00:01:10,650
we have a route that renders the form if you go to route users and let's have a look.

15
00:01:10,740 --> 00:01:15,720
This is a route that renders the update user form.

16
00:01:15,840 --> 00:01:23,760
But what we are going to do here is that we want to fetch the user in question and then send the details

17
00:01:23,760 --> 00:01:26,850
to the template so that we can populate.

18
00:01:26,970 --> 00:01:34,140
But what we have right now, there is no way we can do it unless we make use of model and make the logic

19
00:01:34,140 --> 00:01:35,640
inside our route.

20
00:01:36,000 --> 00:01:42,930
But based on our implementation that is using MVC design pattern, we need to have the business logic

21
00:01:42,930 --> 00:01:44,850
inside the controller.

22
00:01:44,880 --> 00:01:47,880
Because of that, we are going to use this one.

23
00:01:47,880 --> 00:01:56,160
So our comment, this one and next is let's go to the users, controller and controllers users and here

24
00:01:56,160 --> 00:01:56,790
we go.

25
00:01:56,790 --> 00:02:06,090
So what we want is about user details and here we go For this one we can find the user by ID in the

26
00:02:06,090 --> 00:02:13,410
params, and after the user is being found we are going to render the update form and pass the user

27
00:02:13,410 --> 00:02:15,180
found into the template.

28
00:02:15,180 --> 00:02:16,410
So here we go.

29
00:02:16,440 --> 00:02:21,120
We are going to make use of race, then render.

30
00:02:23,650 --> 00:02:27,310
Then the form is uses for a slash.

31
00:02:27,340 --> 00:02:28,760
Let's have a look at it.

32
00:02:28,780 --> 00:02:33,430
Well, which is update user and I'm going to pass it here.

33
00:02:33,880 --> 00:02:41,620
The next step is the payload, meaning the user, and here is a user and I'll pass it to the template

34
00:02:41,620 --> 00:02:42,510
as that.

35
00:02:42,520 --> 00:02:48,340
So now when this form being rendered, we have the user inside the form.

36
00:02:48,640 --> 00:02:52,900
Before we get into that, let's have a way to display this form.

37
00:02:52,900 --> 00:02:54,970
So let's go to the profile.

38
00:02:57,350 --> 00:02:59,660
Uses and profile.

39
00:02:59,750 --> 00:03:03,170
Then let's locate the icon, which is this.

40
00:03:03,170 --> 00:03:05,300
So we're going to use the same format.

41
00:03:05,300 --> 00:03:06,950
I'm going to copy this one.

42
00:03:07,160 --> 00:03:14,990
And then inside this P tag, I'm going to place it here and use this icon instead of this camera.

43
00:03:17,250 --> 00:03:21,450
Then the next step is the endpoint to render the form.

44
00:03:21,720 --> 00:03:26,760
It's not upload cover photo, but instead let's have a look.

45
00:03:27,210 --> 00:03:29,700
It's called updates user form.

46
00:03:29,700 --> 00:03:32,580
So I'm going to replace with this one.

47
00:03:35,020 --> 00:03:35,830
Perfect.

48
00:03:36,130 --> 00:03:37,330
So let's check it out.

49
00:03:37,330 --> 00:03:41,770
When I click on this icon, let's see where I need to refresh it.

50
00:03:43,050 --> 00:03:44,740
And click on that.

51
00:03:44,760 --> 00:03:53,340
Where we got this error simply because for the API to be called we need a valid MongoDB ID, meaning

52
00:03:53,340 --> 00:03:56,580
that the user that we want to update.

53
00:03:56,820 --> 00:04:02,140
But upon calling the API, we didn't pass in the ID of the user.

54
00:04:02,160 --> 00:04:07,770
So let's get back to the profile and then the link for the form, which is this one.

55
00:04:07,770 --> 00:04:15,510
So here we need to pass in the ID of the user and lucky for us we have the user here so you can make

56
00:04:15,510 --> 00:04:18,320
use of user underscore ID.

57
00:04:18,329 --> 00:04:28,710
So here I'm going to be forward slash and then the syntax here and equal to user underscore ID.

58
00:04:29,650 --> 00:04:30,430
Perfect.

59
00:04:31,770 --> 00:04:32,640
Save it.

60
00:04:32,640 --> 00:04:37,530
And let's refresh the page and let's click on this icon.

61
00:04:38,390 --> 00:04:45,180
And now we have something by the path that so much money that we are not doing something right about

62
00:04:45,180 --> 00:04:45,900
the path.

63
00:04:45,920 --> 00:04:47,690
So let's have a look.

64
00:04:47,720 --> 00:04:55,820
Well, the path is not update user form, but instead it's going to be forward slash and then the ID

65
00:04:55,850 --> 00:04:56,930
of the user.

66
00:04:56,960 --> 00:05:01,910
If you check the route, you can see that we are using the ID here.

67
00:05:01,940 --> 00:05:04,250
So let's try again.

68
00:05:04,670 --> 00:05:06,260
Click on the icon.

69
00:05:07,680 --> 00:05:10,140
You can see that it worked fine.

70
00:05:10,140 --> 00:05:13,620
But instead of this, we need to retain the form.

71
00:05:13,620 --> 00:05:16,140
So I think we are doing something wrong.

72
00:05:16,140 --> 00:05:20,130
So let's look at the code and this is a controller.

73
00:05:20,760 --> 00:05:27,090
The problem is that we are returning the JSON data and then also returning the templates.

74
00:05:27,090 --> 00:05:28,740
So let's remove this one.

75
00:05:30,310 --> 00:05:37,750
Now let's save it and let's get back to the profile, refresh it, and let's click on this icon.

76
00:05:38,080 --> 00:05:46,000
And we have the form and we can see that we have the user ID in the params, meaning that the user is

77
00:05:46,000 --> 00:05:46,810
being fetched.

78
00:05:46,810 --> 00:05:50,680
Again, we have this user inside this template.

79
00:05:50,680 --> 00:05:53,500
So how are we going to populate that?

80
00:05:53,500 --> 00:05:59,140
So let's get back to the update form of the user, which is this.

81
00:05:59,260 --> 00:06:04,000
So here we are going to use an attribute called value.

82
00:06:04,000 --> 00:06:06,490
So let's look at the name.

83
00:06:06,490 --> 00:06:14,080
If I make use of value attribute and pass in this value as Emmanuel, this won't be available inside

84
00:06:14,080 --> 00:06:15,190
the input field.

85
00:06:15,190 --> 00:06:16,990
So let's refresh it.

86
00:06:16,990 --> 00:06:19,750
And indeed I have Emmanuel.

87
00:06:19,780 --> 00:06:25,930
So what I'm going to do is that instead of as manually typing the value here, we are going to make

88
00:06:25,930 --> 00:06:29,860
use of the value we pass into the template as user.

89
00:06:29,860 --> 00:06:32,200
So let me remove this one.

90
00:06:33,050 --> 00:06:41,050
And make use of edges and equal to user and then dot full name.

91
00:06:42,810 --> 00:06:43,550
Perfect.

92
00:06:43,560 --> 00:06:46,140
Let's save it and let's have a look.

93
00:06:46,840 --> 00:06:50,200
And we have Ben the next one going to be the email.

94
00:06:50,200 --> 00:06:59,500
So our copy this one and for the email and I'm going to put it here and change this one to email.

95
00:06:59,710 --> 00:07:04,960
So for update, we are not going to allow the user to update the password.

96
00:07:04,960 --> 00:07:09,730
We have a specific route to do that, so I'm going to remove this one.

97
00:07:12,110 --> 00:07:15,800
Likewise this link or already have an account.

98
00:07:15,800 --> 00:07:21,380
So let me remove the one or so and change this one to update user.

99
00:07:22,400 --> 00:07:25,700
All right, So now we are all set.

100
00:07:25,970 --> 00:07:28,660
So let's refresh it and let's have a look.

101
00:07:28,670 --> 00:07:34,780
And indeed, we have it where I think we are doing something right here.

102
00:07:34,790 --> 00:07:37,010
So let's look at the value.

103
00:07:37,010 --> 00:07:41,840
Is this where I need to have the double code here?

104
00:07:44,550 --> 00:07:46,770
All right, so let's have a look.

105
00:07:47,490 --> 00:07:48,030
All right.

106
00:07:48,030 --> 00:07:49,260
It worked fine.

107
00:07:49,290 --> 00:07:54,780
The next step is when I click on this one, definitely is going to update this user.

108
00:07:54,780 --> 00:08:00,340
So let me change this one to Ben two and then Ben to Jimmy dot com.

109
00:08:00,360 --> 00:08:03,060
And let's have a look at the endpoint.

110
00:08:03,060 --> 00:08:07,170
Well, for the update where we are not using the right endpoint.

111
00:08:07,170 --> 00:08:12,720
So let's get back to the users and let's have the endpoint for the update, which is this.

112
00:08:12,720 --> 00:08:21,990
So going to be update four slash the user ID, and for this we can avoid using the ID because we have

113
00:08:21,990 --> 00:08:23,370
the log in user.

114
00:08:23,460 --> 00:08:27,990
So let me locate the update controller, which is this.

115
00:08:28,230 --> 00:08:37,169
So for this we can make use of the log in user ID so we can remove this one and make use of rec dot

116
00:08:37,169 --> 00:08:38,100
session.

117
00:08:38,929 --> 00:08:41,539
Dart user of.

118
00:08:42,840 --> 00:08:46,120
And this one would present the ID of the user.

119
00:08:46,140 --> 00:08:50,100
So for this I can do away with the ID in the params.

120
00:08:50,130 --> 00:08:57,570
Likewise, the user details we can use the ID of the user inside the controller to avoid using the ID

121
00:08:57,570 --> 00:08:58,760
in the param.

122
00:08:59,010 --> 00:08:59,910
All right.

123
00:08:59,910 --> 00:09:07,170
So with this one we need to modify the route a little bit because we have made changes to our controller.

124
00:09:07,260 --> 00:09:14,040
So for this I'm going to do away with the ID, so let's locate the form, which is this one.

125
00:09:14,040 --> 00:09:17,580
So now is going to be as API.

126
00:09:18,430 --> 00:09:22,600
Version one users and then update.

127
00:09:22,600 --> 00:09:30,950
And because we are waiting to make an update and our client side doesn't support the HTTP method, kaput.

128
00:09:30,970 --> 00:09:34,140
That's why we have the method override package.

129
00:09:34,150 --> 00:09:38,890
So here I'm going to use the query string, and that's called method.

130
00:09:39,780 --> 00:09:43,120
The method I want to use is called put method.

131
00:09:43,140 --> 00:09:49,980
So now we all set the next one going to be the name for this one going to be the full name.

132
00:09:51,530 --> 00:09:53,480
And then the email.

133
00:09:53,480 --> 00:09:55,730
So I think this one remains the same.

134
00:09:55,730 --> 00:09:56,280
So.

135
00:09:56,300 --> 00:09:57,830
Moment of truth.

136
00:09:57,920 --> 00:10:04,220
Before we made the request, let's locate the controller in case we are redirecting after success.

137
00:10:04,430 --> 00:10:06,470
And we are not redirecting.

138
00:10:06,470 --> 00:10:08,390
So let's screw up.

139
00:10:08,390 --> 00:10:18,440
We have the same code inside the profile image upload so I can go ahead and use this one redirect and

140
00:10:18,440 --> 00:10:21,950
let me scroll here to update for success.

141
00:10:21,950 --> 00:10:24,380
I'm going to remove this one and paste that.

142
00:10:24,500 --> 00:10:29,750
And in case we have an error, let's also render the same page.

143
00:10:29,750 --> 00:10:32,150
So I'm going to be as screw up.

144
00:10:32,810 --> 00:10:34,940
And this is a render template.

145
00:10:34,940 --> 00:10:41,990
So I'll come down here and for the update user, I'm going to remove this one.

146
00:10:42,740 --> 00:10:44,050
And pays that.

147
00:10:44,060 --> 00:10:54,560
So for the templates, I'm going to render the update user templates going to be as update user perfect.

148
00:10:54,560 --> 00:11:01,250
And for the response, I'm not going to send the user updated, so I'm going to remove this one and

149
00:11:01,250 --> 00:11:03,080
we are good to go.

150
00:11:03,380 --> 00:11:08,330
The next one going to be the in case the email is being taken.

151
00:11:08,330 --> 00:11:14,390
So I'm going to copy this one and paste it here.

152
00:11:15,750 --> 00:11:19,860
And then I'll pass in the message as email is taken.

153
00:11:22,680 --> 00:11:25,560
All right, so now we can check it out.

154
00:11:25,560 --> 00:11:29,550
So let me go to profile and see if we are all set.

155
00:11:31,220 --> 00:11:33,200
Let me click on this icon.

156
00:11:33,410 --> 00:11:37,130
Let me change this one to Ben, to an email to.

157
00:11:38,410 --> 00:11:40,340
Well, we have an error.

158
00:11:40,360 --> 00:11:45,310
The problem might be that there is no user in the template.

159
00:11:45,310 --> 00:11:50,670
So let's locate the update user, which is this one.

160
00:11:50,680 --> 00:11:55,060
Here we are returning the template with this message.

161
00:11:55,060 --> 00:11:59,260
So we need to pass a user by default is empty.

162
00:11:59,680 --> 00:12:03,430
And let's scroll down in case we have an error.

163
00:12:03,430 --> 00:12:09,730
Let's also send the user and pass in empty so this one will fix the problem.

164
00:12:09,730 --> 00:12:19,000
So let me go back to profile and click on the icon and submit and you can see that it would fine.

165
00:12:19,300 --> 00:12:21,010
So let me refresh it.

166
00:12:22,720 --> 00:12:24,790
And let's go to profile.

167
00:12:25,490 --> 00:12:31,490
And you can see that it has updated the user with empty details.

168
00:12:31,490 --> 00:12:33,620
So we need to avoid this one.

169
00:12:33,620 --> 00:12:38,630
So let's get back to the controller for updating, which is this.

170
00:12:39,600 --> 00:12:44,730
So before updating, we are going to check if there is no full name.

171
00:12:47,110 --> 00:12:47,890
Or.

172
00:12:48,840 --> 00:12:50,820
There is no email.

173
00:12:52,600 --> 00:12:55,750
Then we are going to send this error.

174
00:12:55,750 --> 00:12:59,380
So I'm going to copy this one and paste it here.

175
00:12:59,620 --> 00:13:05,440
So here we say that please provide details.

176
00:13:07,070 --> 00:13:10,080
All right, So now we'd be good to go.

177
00:13:10,100 --> 00:13:18,200
So if I go to profile and click on this pencil icon For the meantime, let me add Ben, and then email

178
00:13:18,200 --> 00:13:20,780
us Ben at gmail.com.

179
00:13:22,240 --> 00:13:23,080
Update.

180
00:13:25,040 --> 00:13:27,350
And you can see that it's fine.

181
00:13:27,470 --> 00:13:36,400
If I click the icon again and remove this fails and hit send, you can see that I'm still on the page.

182
00:13:36,410 --> 00:13:39,800
So let's go ahead and then display the error message.

183
00:13:39,840 --> 00:13:42,860
Going to be the same as the log in and register.

184
00:13:42,860 --> 00:13:48,500
So I will come to register and let me locate the error, which is this one.

185
00:13:48,500 --> 00:13:49,640
I'll copy that.

186
00:13:49,640 --> 00:13:54,410
And inside the update I'm going to replace with this one.

187
00:13:54,410 --> 00:13:56,750
And here we go.

188
00:13:57,020 --> 00:14:04,130
Now, if I refresh it, I'm going to see the error message as please provide our details and indeed

189
00:14:04,130 --> 00:14:05,060
we have it.

190
00:14:05,240 --> 00:14:08,480
So if I provide, then.

191
00:14:09,420 --> 00:14:18,360
And email us Ben at gmail.com and update while email is taking.

192
00:14:23,020 --> 00:14:25,100
And we have it.

193
00:14:25,120 --> 00:14:26,160
All right, guys.

194
00:14:26,180 --> 00:14:30,100
So now we can update the user details.