1
00:00:00,000 --> 00:00:03,000
So to finish this section

2
00:00:03,000 --> 00:00:08,000
and to learn a bit more about data mutations with NextJS,

3
00:00:08,000 --> 00:00:10,000
I wanna make this like button here work

4
00:00:10,000 --> 00:00:13,000
so that for a given post I can click it,

5
00:00:13,000 --> 00:00:17,000
and well, this post will get marked as liked by me.

6
00:00:18,000 --> 00:00:20,000
Now for that in the database,

7
00:00:20,000 --> 00:00:24,000
I actually already got a likes table

8
00:00:24,000 --> 00:00:28,000
that is set up when the database file is created

9
00:00:28,000 --> 00:00:32,000
where I'll in the end store a user ID/post ID combination

10
00:00:33,000 --> 00:00:37,000
so that every user can like every post exactly once.

11
00:00:37,000 --> 00:00:40,000
And of course they can also unlike it.

12
00:00:40,000 --> 00:00:45,000
Now when selecting all posts, I got some query in there

13
00:00:45,000 --> 00:00:48,000
where in the end I find out whether a post is being liked

14
00:00:48,000 --> 00:00:53,000
by a specific user by checking whether the user

15
00:00:53,000 --> 00:00:57,000
with their ID likes a post with a given ID.

16
00:00:57,000 --> 00:01:01,000
And here I always assume that it's the user with ID two

17
00:01:01,000 --> 00:01:05,000
because I can't make that user specific at this point

18
00:01:05,000 --> 00:01:07,000
because we got no way of switching users

19
00:01:07,000 --> 00:01:10,000
or logging in with users.

20
00:01:10,000 --> 00:01:12,000
That's why in this section we assumed

21
00:01:12,000 --> 00:01:17,000
that posts are always created by a user with ID one,

22
00:01:18,000 --> 00:01:22,000
and vice versa, I always assume that it's always the user

23
00:01:22,000 --> 00:01:26,000
with the ID two that may be liking a post here

24
00:01:26,000 --> 00:01:29,000
so that it's a different user that's now logged in

25
00:01:29,000 --> 00:01:32,000
that can view the posts and that can like the posts.

26
00:01:32,000 --> 00:01:35,000
That's why this is hard coded like this here

27
00:01:35,000 --> 00:01:36,000
as mentioned multiple times.

28
00:01:36,000 --> 00:01:40,000
Later you will learn how to actually work with users

29
00:01:40,000 --> 00:01:42,000
and how to log in and so on.

30
00:01:42,000 --> 00:01:44,000
But that's the logic here.

31
00:01:44,000 --> 00:01:45,000
And in the end here,

32
00:01:45,000 --> 00:01:49,000
I then create a new IsLiked property on the retrieved data

33
00:01:49,000 --> 00:01:51,000
that is either true or false.

34
00:01:51,000 --> 00:01:54,000
In the end, depending on whether a given user

35
00:01:54,000 --> 00:01:58,000
has created a like entry in that likes table

36
00:01:58,000 --> 00:02:00,000
for a given post.

37
00:02:00,000 --> 00:02:04,000
And those like entries are created or removed

38
00:02:04,000 --> 00:02:09,000
with help of this updatePostLikeStatus function here,

39
00:02:09,000 --> 00:02:12,000
where I find out whether a given user with a given ID,

40
00:02:13,000 --> 00:02:16,000
which will be ID two here in this application

41
00:02:16,000 --> 00:02:18,000
is liking a post or not.

42
00:02:18,000 --> 00:02:21,000
So whether a user has an entry in that likes table or not,

43
00:02:21,000 --> 00:02:24,000
and if they don't have one, I insert one.

44
00:02:24,000 --> 00:02:26,000
If they did have one I delete it

45
00:02:26,000 --> 00:02:28,000
whenever this button is pressed.

46
00:02:28,000 --> 00:02:30,000
That's the plan.

47
00:02:31,000 --> 00:02:34,000
Now to bring that plan to life,

48
00:02:34,000 --> 00:02:38,000
we of course have to bring that button to life,

49
00:02:38,000 --> 00:02:42,000
and for that we should go to that posts.js file

50
00:02:42,000 --> 00:02:43,000
in the components folder

51
00:02:43,000 --> 00:02:46,000
where I have a post component

52
00:02:46,000 --> 00:02:49,000
because it's in there where I'm outputting my post items

53
00:02:49,000 --> 00:02:51,000
and where I have this like button.

54
00:02:52,000 --> 00:02:54,000
And the goal now is to make sure

55
00:02:54,000 --> 00:02:56,000
that whenever the like button is pressed,

56
00:02:56,000 --> 00:02:59,000
we actually trigger some code

57
00:02:59,000 --> 00:03:04,000
that creates a new post user ID entry in the likes table

58
00:03:04,000 --> 00:03:05,000
or removes it

59
00:03:05,000 --> 00:03:09,000
with help of this updatePostLikeStatus function

60
00:03:09,000 --> 00:03:10,000
I just showed you.

61
00:03:11,000 --> 00:03:14,000
Now how can we make this work?

62
00:03:14,000 --> 00:03:18,000
Well, we can make it work with help of a new Server Action

63
00:03:18,000 --> 00:03:21,000
because in the end when that button is pressed,

64
00:03:21,000 --> 00:03:23,000
we also wanna submit some data to the Server

65
00:03:23,000 --> 00:03:25,000
and we wanna update the database.

66
00:03:25,000 --> 00:03:29,000
So again, it's in the end another form submission

67
00:03:29,000 --> 00:03:31,000
we're dealing with here.

68
00:03:31,000 --> 00:03:34,000
Therefore, we could create a Server Action here

69
00:03:34,000 --> 00:03:37,000
or do it in that separate actions file

70
00:03:37,000 --> 00:03:38,000
which we created earlier.

71
00:03:38,000 --> 00:03:41,000
And that's indeed what I'll do here.

72
00:03:41,000 --> 00:03:45,000
So in that actions folder, in the posts.js file there,

73
00:03:45,000 --> 00:03:48,000
I'll export a new async function

74
00:03:48,000 --> 00:03:52,000
called togglePostLike status.

75
00:03:53,000 --> 00:03:56,000
And I expect to get the ID of the post

76
00:03:56,000 --> 00:03:59,000
for which I wanna change the like status.

77
00:04:00,000 --> 00:04:05,000
And I then wanna call this update post like status function.

78
00:04:07,000 --> 00:04:10,000
So this function which will update the database.

79
00:04:11,000 --> 00:04:14,000
Now this function wants a post ID and a user id.

80
00:04:14,000 --> 00:04:15,000
And as I mentioned before,

81
00:04:15,000 --> 00:04:19,000
here I'll hardcode the user ID to two,

82
00:04:19,000 --> 00:04:22,000
so to that user with the ID two,

83
00:04:23,000 --> 00:04:25,000
but of course the post ID should be

84
00:04:25,000 --> 00:04:28,000
the post ID we're receiving as a argument here.

85
00:04:30,000 --> 00:04:32,000
And that's then essentially all.

86
00:04:33,000 --> 00:04:36,000
Back in the post component here,

87
00:04:36,000 --> 00:04:39,000
I'd therefore now wanna trigger that Server Action

88
00:04:39,000 --> 00:04:42,000
that we just added whenever this like button is pressed.

89
00:04:42,000 --> 00:04:44,000
And there are two ways of doing that.

90
00:04:45,000 --> 00:04:46,000
One way of doing it

91
00:04:46,000 --> 00:04:49,000
would be to go to the actual button element

92
00:04:49,000 --> 00:04:51,000
which is defined in the like button.

93
00:04:51,000 --> 00:04:52,000
And it turns out

94
00:04:52,000 --> 00:04:56,000
that there you can indeed set a form action prop,

95
00:04:56,000 --> 00:05:00,000
which also accepts such a form action as a value.

96
00:05:00,000 --> 00:05:04,000
So we could accept this action as a input here

97
00:05:04,000 --> 00:05:06,000
and bind that to this button.

98
00:05:07,000 --> 00:05:09,000
And then in the post component,

99
00:05:09,000 --> 00:05:14,000
we could pass the action prop to the like button.

100
00:05:14,000 --> 00:05:17,000
And the value I wanna pass here should of course be

101
00:05:17,000 --> 00:05:21,000
that togglePostLikeStatus action we just worked on,

102
00:05:23,000 --> 00:05:27,000
which therefore is imported from that actions folder

103
00:05:27,000 --> 00:05:28,000
and the posts file there.

104
00:05:30,000 --> 00:05:32,000
That would be one way of making it work

105
00:05:32,000 --> 00:05:36,000
because you can not just use Server Actions

106
00:05:36,000 --> 00:05:39,000
as a value for the action prop on a form,

107
00:05:39,000 --> 00:05:43,000
but also instead as a value for the form action prop

108
00:05:43,000 --> 00:05:44,000
on a button.

109
00:05:44,000 --> 00:05:45,000
That's one way of using them.

110
00:05:46,000 --> 00:05:49,000
However, that's not what I'll do here,

111
00:05:49,000 --> 00:05:50,000
even though it would work fine.

112
00:05:52,000 --> 00:05:56,000
Instead I'll simply wrap this like button with a form here.

113
00:05:56,000 --> 00:05:59,000
Because there's nothing wrong with doing that.

114
00:05:59,000 --> 00:06:02,000
And I'll then set this action prop

115
00:06:02,000 --> 00:06:03,000
directly here on the form.

116
00:06:05,000 --> 00:06:07,000
So that's in the end, the same approach I used

117
00:06:07,000 --> 00:06:09,000
for the new post page form.

118
00:06:11,000 --> 00:06:13,000
With that, whenever this button is pressed,

119
00:06:13,000 --> 00:06:15,000
it will be this action, this function

120
00:06:15,000 --> 00:06:16,000
that will be triggered.

121
00:06:18,000 --> 00:06:22,000
Now theoretically that's all we need to do.

122
00:06:22,000 --> 00:06:25,000
However, if we save everything and I reload here,

123
00:06:25,000 --> 00:06:30,000
and I click this button, it stays in that unliked mode.

124
00:06:30,000 --> 00:06:33,000
Now to some extent that makes sense

125
00:06:33,000 --> 00:06:35,000
because we haven't added any logic here

126
00:06:35,000 --> 00:06:39,000
anywhere in our markup that would change the appearance

127
00:06:39,000 --> 00:06:42,000
of that button or of that icon in that button

128
00:06:42,000 --> 00:06:45,000
depending on whether the post is liked or not.

129
00:06:45,000 --> 00:06:47,000
So we should change that,

130
00:06:48,000 --> 00:06:50,000
and we can change that by adding a class here,

131
00:06:50,000 --> 00:06:54,000
a CSS class to that form or to that div, doesn't matter,

132
00:06:54,000 --> 00:06:58,000
but it should be on some parent element of this like button.

133
00:06:58,000 --> 00:07:01,000
And here I want to add a class conditionally

134
00:07:01,000 --> 00:07:05,000
based on whether that post is liked or not.

135
00:07:05,000 --> 00:07:09,000
And this isLiked property will exist on the posts

136
00:07:09,000 --> 00:07:12,000
that are retrieved from the database

137
00:07:12,000 --> 00:07:15,000
because in my code where I am retrieving posts

138
00:07:15,000 --> 00:07:19,000
from the database, I do define this isLiked property

139
00:07:19,000 --> 00:07:21,000
based on whether the user with the ID two

140
00:07:21,000 --> 00:07:23,000
does like that post or not.

141
00:07:26,000 --> 00:07:28,000
So this isLiked property exists,

142
00:07:28,000 --> 00:07:31,000
and it will be true if the user does like that post

143
00:07:31,000 --> 00:07:32,000
and false otherwise.

144
00:07:33,000 --> 00:07:38,000
So if the post is liked, I wanna add a class of liked

145
00:07:38,000 --> 00:07:42,000
to that form element and otherwise I won't add any class.

146
00:07:43,000 --> 00:07:45,000
And in the global styles

147
00:07:45,000 --> 00:07:48,000
that were part of the starting project, there is a rule

148
00:07:48,000 --> 00:07:51,000
that makes the button change its appearance

149
00:07:51,000 --> 00:07:55,000
if it is inside of an element that has the liked class.

150
00:07:56,000 --> 00:07:59,000
So with that, if I save that and reload this page,

151
00:07:59,000 --> 00:08:01,000
we still don't see anything.

152
00:08:03,000 --> 00:08:06,000
Well, we can't see anything here

153
00:08:06,000 --> 00:08:08,000
because you must keep in mind

154
00:08:08,000 --> 00:08:13,000
that the togglePostLikeStatus function here wants a post ID,

155
00:08:15,000 --> 00:08:18,000
which it then forwards to update postLikedStatus.

156
00:08:20,000 --> 00:08:21,000
However, at the moment,

157
00:08:21,000 --> 00:08:24,000
I am using it as a action for this form.

158
00:08:24,000 --> 00:08:25,000
And therefore what does it get?

159
00:08:25,000 --> 00:08:30,000
It gets such a foreign data object, not the post ID.

160
00:08:30,000 --> 00:08:33,000
Therefore, what we need to do here

161
00:08:33,000 --> 00:08:37,000
and what NextJS and React allow us to do

162
00:08:37,000 --> 00:08:42,000
is we must add some extra data that will be submitted

163
00:08:42,000 --> 00:08:45,000
to that function when it's triggered by React.

164
00:08:45,000 --> 00:08:48,000
And we can do this by calling the bind method

165
00:08:48,000 --> 00:08:50,000
on that function object.

166
00:08:51,000 --> 00:08:54,000
Now that's a standard Java script method.

167
00:08:54,000 --> 00:08:57,000
You can call on function objects to,

168
00:08:57,000 --> 00:09:00,000
you could say, pre-configure that function

169
00:09:00,000 --> 00:09:04,000
to define some values that will be passed

170
00:09:04,000 --> 00:09:08,000
to the function in the future when it's executed.

171
00:09:09,000 --> 00:09:11,000
Bind then takes two arguments.

172
00:09:11,000 --> 00:09:12,000
The first one defines

173
00:09:13,000 --> 00:09:17,000
what the this keyword inside of this function will refer to.

174
00:09:17,000 --> 00:09:18,000
And that doesn't matter to us here,

175
00:09:18,000 --> 00:09:20,000
therefore I'll just set it to null.

176
00:09:20,000 --> 00:09:23,000
But the second argument you pass to bind

177
00:09:23,000 --> 00:09:27,000
will then become the new first argument

178
00:09:27,000 --> 00:09:31,000
when that function is eventually executed in the future.

179
00:09:31,000 --> 00:09:34,000
And in my case here, that should be the post ID.

180
00:09:36,000 --> 00:09:40,000
So that's a way of pre-configuring which data will be passed

181
00:09:40,000 --> 00:09:45,000
to this function in the future when it's executed by React.

182
00:09:45,000 --> 00:09:49,000
Now if you would still need to get access to the form data,

183
00:09:49,000 --> 00:09:51,000
you could still do that by simply accepting it

184
00:09:51,000 --> 00:09:53,000
as a second argument here.

185
00:09:54,000 --> 00:09:58,000
So any arguments you bind with help of the bind method

186
00:09:58,000 --> 00:10:00,000
will be provided as first arguments,

187
00:10:00,000 --> 00:10:02,000
and then the default arguments

188
00:10:02,000 --> 00:10:06,000
which would've received otherwise will come thereafter.

189
00:10:06,000 --> 00:10:08,000
But here, I don't need the form data,

190
00:10:08,000 --> 00:10:09,000
so I'll just ignore it.

191
00:10:11,000 --> 00:10:13,000
But with that, we'll now pass that post ID

192
00:10:13,000 --> 00:10:17,000
to this togglePostLikeStatus Server Action.

193
00:10:17,000 --> 00:10:19,000
And therefore now indeed

194
00:10:19,000 --> 00:10:22,000
that user ID like combination should be stored.

195
00:10:24,000 --> 00:10:27,000
So again, if you save everything and you reload,

196
00:10:27,000 --> 00:10:29,000
if you click here, nothing happens.

197
00:10:29,000 --> 00:10:33,000
But now if you reload the page,

198
00:10:33,000 --> 00:10:36,000
this should be marked as liked, and this should prove

199
00:10:36,000 --> 00:10:41,000
that indeed the user did like this item here.

200
00:10:41,000 --> 00:10:43,000
It just doesn't update instantly.

201
00:10:43,000 --> 00:10:45,000
The same is true for unliking it.

202
00:10:45,000 --> 00:10:50,000
If I click this, which I did, it stays in that liked mode

203
00:10:50,000 --> 00:10:52,000
until I reload.

204
00:10:52,000 --> 00:10:56,000
And that's of course not the best user experience.

205
00:10:56,000 --> 00:10:58,000
So what can we do about it?