1
00:00:01,440 --> 00:00:06,450
Welcome back, ladies and gentlemen, today we are going to do we are going to work on the flight controller,

2
00:00:06,720 --> 00:00:12,450
but before doing that, I have done a couple of mistakes by my side, and that is not cool.

3
00:00:12,450 --> 00:00:14,130
So I will try to fix them.

4
00:00:14,450 --> 00:00:21,330
So first things first, let's go to the models and let's go to the movie.

5
00:00:21,780 --> 00:00:30,390
So here we need to add this, that here so we are not getting the year actually from the API.

6
00:00:31,290 --> 00:00:35,490
And that is something that I told you that I'm going to miss a couple of things in here.

7
00:00:35,580 --> 00:00:39,660
I discovered that we're going to need it, and that's why it's here now.

8
00:00:39,720 --> 00:00:41,310
OK, that's pretty much done.

9
00:00:41,720 --> 00:00:49,200
Now, what I want to do is also in the cart view instead of sorry, not in a, you know, like view,

10
00:00:49,650 --> 00:00:57,920
instead of displaying like model, we should say, displaying model here, everything should be OK here.

11
00:00:57,930 --> 00:01:04,470
We missing one more actual function in this function will be for displaying the ABS.

12
00:01:04,530 --> 00:01:04,980
Sorry.

13
00:01:05,580 --> 00:01:06,660
Let me just close this one.

14
00:01:06,900 --> 00:01:11,580
This function will be for displaying this here, the number in that circle.

15
00:01:11,730 --> 00:01:22,650
OK, so I'm going to do this so I'm going to say export const display like number and that will be equal

16
00:01:22,650 --> 00:01:26,280
to the Leicht number that we're going to past the dysfunction.

17
00:01:26,890 --> 00:01:29,470
And so you don't need to worry about this one.

18
00:01:30,120 --> 00:01:36,350
Now I have a couple of Mistick mistakes here consed and that's it.

19
00:01:36,360 --> 00:01:39,210
Now display like no here.

20
00:01:39,210 --> 00:01:49,620
I'm going to use the class names that like Circle and this we haven't created yet, but we will do just

21
00:01:49,620 --> 00:01:50,040
shortly.

22
00:01:50,160 --> 00:01:57,960
So I want to set the text content to the like the number that we are just passing on top here and that's

23
00:01:57,960 --> 00:01:58,460
pretty much it.

24
00:01:58,740 --> 00:01:59,490
So simple.

25
00:01:59,760 --> 00:02:07,140
We need just to create this like circle in the we need to write it actually in this here now like circle

26
00:02:07,140 --> 00:02:09,840
that document dot query selector.

27
00:02:10,000 --> 00:02:15,450
And here I'm going to say like not Daksh circle.

28
00:02:15,780 --> 00:02:16,100
Nice.

29
00:02:16,100 --> 00:02:25,710
So this is coming from the C if I click inspect here it is like a circle so I want to change this text

30
00:02:25,710 --> 00:02:26,220
content.

31
00:02:26,460 --> 00:02:26,910
Zero.

32
00:02:26,910 --> 00:02:27,540
I want to change.

33
00:02:27,540 --> 00:02:32,010
If we have five liked movies then should be the number.

34
00:02:32,010 --> 00:02:32,850
Should be five here.

35
00:02:33,190 --> 00:02:33,680
Very good.

36
00:02:34,020 --> 00:02:35,550
Now we're done with that part.

37
00:02:36,000 --> 00:02:38,990
So we fixed up or we added some things.

38
00:02:39,000 --> 00:02:40,740
Now let's go back to the index.

39
00:02:41,880 --> 00:02:43,530
Things first things first.

40
00:02:43,530 --> 00:02:44,250
Things we need to do.

41
00:02:44,250 --> 00:02:50,400
We just import this car actually like we need to imported from the models right now.

42
00:02:50,400 --> 00:02:57,120
The second thing that we need to import is the view and just change this like view.

43
00:02:57,330 --> 00:03:00,280
And everything is pretty much the same after that.

44
00:03:00,740 --> 00:03:10,800
OK, now here we are going to create another object for the like right inside these data.

45
00:03:11,340 --> 00:03:11,670
Cool.

46
00:03:11,730 --> 00:03:17,160
Well, what we need to do is actually to create a controller here.

47
00:03:17,850 --> 00:03:22,830
So after the card controller, we need to add like a controller.

48
00:03:24,720 --> 00:03:30,630
No, also, we need to add the event listener now loop what is happening here.

49
00:03:30,720 --> 00:03:32,820
So this lecture is pretty much hard to explain.

50
00:03:33,270 --> 00:03:33,660
Why?

51
00:03:33,810 --> 00:03:41,070
Because the event listener on this button is actually here and this button we are just going to need

52
00:03:41,070 --> 00:03:48,630
to target down here now here actually where we are targeting at the tickets to card here, we need to

53
00:03:48,630 --> 00:03:50,340
say like a movie.

54
00:03:51,150 --> 00:03:51,510
Right?

55
00:03:51,690 --> 00:03:53,700
So that is where we need to talk.

56
00:03:53,700 --> 00:03:55,560
And I'm going to copy and paste this one.

57
00:03:56,160 --> 00:03:59,700
But here we need to change a couple of things.

58
00:03:59,700 --> 00:04:03,750
The first thing that I want to change is the main content.

59
00:04:03,840 --> 00:04:06,210
So I'm going to inspect it.

60
00:04:08,630 --> 00:04:13,060
And here is the main content, right, social likes.

61
00:04:13,220 --> 00:04:17,240
OK, so copy that class and want to talk about class in.

62
00:04:17,600 --> 00:04:18,010
Oops.

63
00:04:21,320 --> 00:04:23,720
For some reason, it didn't copied, OK?

64
00:04:23,780 --> 00:04:30,610
And every child of that class right now, we should be able to do it here.

65
00:04:30,620 --> 00:04:32,870
I will say, like controller.

66
00:04:34,550 --> 00:04:36,900
Now, that is pretty much it.

67
00:04:36,920 --> 00:04:43,700
So if these Target matches those classes here with a child, that means that here that is click and

68
00:04:43,700 --> 00:04:47,570
we need to go back to the flight controller right now.

69
00:04:47,570 --> 00:04:51,400
Here I will say consed like controller.

70
00:04:51,680 --> 00:04:53,980
It will not take any parameters here.

71
00:04:55,760 --> 00:04:57,680
Make sure that you do semicolon there.

72
00:04:57,950 --> 00:05:02,570
OK, now here we need to do a couple of changes.

73
00:05:03,140 --> 00:05:10,640
But before that I want to add to clarify one more problem that I think I do explain quite well in the

74
00:05:10,640 --> 00:05:11,370
previous lecture.

75
00:05:11,870 --> 00:05:19,580
Now, when we go back to the like for you here, we do have this, like, status display like right

76
00:05:20,090 --> 00:05:28,550
now that will we will use when we click this button actually to be full heart with the red color or

77
00:05:28,550 --> 00:05:31,660
when I click it again that it will be like this.

78
00:05:31,670 --> 00:05:33,980
So this is empty heart.

79
00:05:34,220 --> 00:05:38,760
Now, that is done with this function.

80
00:05:38,830 --> 00:05:44,000
Now, this function needs to add the class and said this actually with full heart.

81
00:05:44,420 --> 00:05:54,800
But here I notice one thing that we have done a mistake and it should be icon heart and icon heart.

82
00:05:54,800 --> 00:05:56,180
So we need to change a little bit.

83
00:05:56,180 --> 00:05:58,910
The classes now where these classes is.

84
00:05:59,000 --> 00:06:02,430
I did the explaining because we didn't have a need so far.

85
00:06:02,430 --> 00:06:08,710
For now, this button here is actually displayed by the movie View, and we need to go back to the movie

86
00:06:08,720 --> 00:06:12,070
View and find Icon Heart.

87
00:06:12,680 --> 00:06:13,250
Here it is.

88
00:06:13,760 --> 00:06:18,550
This is the icon heart that we are just clicking on right now here.

89
00:06:18,560 --> 00:06:25,790
We need to add that class in order to target this this one later and without that icon heart.

90
00:06:26,220 --> 00:06:31,730
And also we will need to change this display movie because at the moment it's only taking a movie.

91
00:06:31,760 --> 00:06:33,220
It doesn't take the likes.

92
00:06:34,440 --> 00:06:36,410
So we need to parse that like as well.

93
00:06:36,410 --> 00:06:43,220
And then we're going to check, OK, if the like is or if if the light is already there, then I want

94
00:06:43,220 --> 00:06:45,950
to change this class to I cannot.

95
00:06:46,190 --> 00:06:49,560
And or if the like is not there, we're just going to leave this one.

96
00:06:49,730 --> 00:06:51,800
So we're going to use the ternary operator here.

97
00:06:52,040 --> 00:06:54,560
But we will do that just a little bit later.

98
00:06:54,890 --> 00:06:55,020
Right.

99
00:06:55,130 --> 00:07:02,990
And I don't like the way this ladies and gentlemen, the markup looks really this really bothers me,

100
00:07:02,990 --> 00:07:08,420
but it's so big and I really, really don't want to look at like this.

101
00:07:08,460 --> 00:07:08,780
Right.

102
00:07:08,930 --> 00:07:12,500
So make sure that you fix things like that because it's not natural.

103
00:07:12,500 --> 00:07:13,160
It's not good.

104
00:07:14,040 --> 00:07:18,380
OK, so I'm going to close this now.

105
00:07:18,380 --> 00:07:21,350
We are set to go with the index.

106
00:07:21,350 --> 00:07:21,590
Right.

107
00:07:21,590 --> 00:07:21,940
Sorry.

108
00:07:23,360 --> 00:07:31,430
Now, here, first thing that we need to do is actually to create the data that like.

109
00:07:31,430 --> 00:07:31,700
Right.

110
00:07:31,700 --> 00:07:37,730
Because we're going to check if it's different than data that like means if it's not, they're just

111
00:07:37,730 --> 00:07:43,310
created that life will be equal to the new you like.

112
00:07:43,610 --> 00:07:43,990
Right.

113
00:07:44,090 --> 00:07:47,300
So that will create empty life because we don't have anything in the constructor.

114
00:07:47,300 --> 00:07:48,880
That's why we're not passing anything here.

115
00:07:49,250 --> 00:07:49,630
Nice.

116
00:07:50,270 --> 00:07:51,230
So what's next.

117
00:07:51,650 --> 00:07:57,850
So next is actually to check to get the movie ID right.

118
00:07:58,130 --> 00:08:08,330
This actually idea I want this I.D. to grab it to a concert in the costumes called Leicht I d and I

119
00:08:08,390 --> 00:08:11,090
need to make this better like that.

120
00:08:11,420 --> 00:08:16,910
Now here I'm going to be able to access by the movie that I am The Bee.

121
00:08:17,540 --> 00:08:18,860
I'd just like that.

122
00:08:19,250 --> 00:08:22,070
Right, so now it's going to be stored there.

123
00:08:22,070 --> 00:08:22,460
Cool.

124
00:08:22,460 --> 00:08:29,330
We don't have any problems and I'm going to check if this movie is already being liked because I don't

125
00:08:29,330 --> 00:08:31,760
know actually if it's this movie's been like or not.

126
00:08:32,180 --> 00:08:39,770
Now here I'm going to say if and inside I'm going to say if this is different, then DataDot.

127
00:08:42,020 --> 00:08:53,840
Like that chick movie, like status, remember, we do have this function, but it really bothers me

128
00:08:54,050 --> 00:08:55,350
because it's not providing me.

129
00:08:55,640 --> 00:08:58,090
So like we passing like that.

130
00:08:58,200 --> 00:08:59,870
So he's going to check now.

131
00:08:59,870 --> 00:09:04,310
If it's not there, then we can add an item.

132
00:09:04,310 --> 00:09:06,830
And I like to you like object.

133
00:09:07,010 --> 00:09:07,310
Right.

134
00:09:07,570 --> 00:09:09,470
So we're going to add item here.

135
00:09:09,830 --> 00:09:18,120
And actually, let's open the light controller and I'm going to copy this ad like because I'm going

136
00:09:18,120 --> 00:09:20,390
to forget what's happening there now.

137
00:09:20,600 --> 00:09:24,680
Data that like not at like the movie.

138
00:09:24,950 --> 00:09:35,080
And this is getting these ideas from data, that movie that I am giving it right now.

139
00:09:35,090 --> 00:09:36,500
The other one is movie.

140
00:09:36,710 --> 00:09:38,030
Sorry, data.

141
00:09:38,030 --> 00:09:38,840
That movie.

142
00:09:38,840 --> 00:09:39,720
The poster.

143
00:09:40,040 --> 00:09:40,470
Cool.

144
00:09:40,850 --> 00:09:44,300
Now we got the title data, that movie, that title.

145
00:09:44,300 --> 00:09:44,990
And here it comes.

146
00:09:44,990 --> 00:09:52,130
The year before we didn't have the year in the the other controller, the movie controller data that

147
00:09:52,130 --> 00:09:53,360
movie that year.

148
00:09:55,400 --> 00:09:55,880
Whoops.

149
00:09:57,830 --> 00:10:03,280
And data that I'm DBI data, that movie that I am reading.

150
00:10:03,440 --> 00:10:03,970
So cool.

151
00:10:04,370 --> 00:10:10,460
Now we'll be able to we don't need that bracket over there.

152
00:10:10,460 --> 00:10:10,760
Right.

153
00:10:10,780 --> 00:10:11,980
I was confused what's happening.

154
00:10:12,230 --> 00:10:14,840
So make sure that you don't have that record, otherwise it will run.

155
00:10:15,020 --> 00:10:17,810
We will run into problems and we will know what is happening.

156
00:10:18,350 --> 00:10:22,730
OK, no, the thing is that we would like to display now the like.

157
00:10:22,730 --> 00:10:23,240
No.

158
00:10:23,270 --> 00:10:31,310
So if we already put something in the like now the number will be increased and we have we have a functions

159
00:10:31,310 --> 00:10:31,730
for that.

160
00:10:31,760 --> 00:10:41,410
OK, now the next thing is to display the like on modem note.

161
00:10:41,570 --> 00:10:50,540
So we will see here like view dot the display like no, very good in here.

162
00:10:50,540 --> 00:10:59,150
I'm going to pass the data that like that numbers I think was number of likes right.

163
00:11:00,140 --> 00:11:00,670
Here it is.

164
00:11:01,310 --> 00:11:07,630
And that will return the length of the area and it should be as a function.

165
00:11:07,880 --> 00:11:08,250
Cool.

166
00:11:09,240 --> 00:11:11,870
Now let's see what's happening here.

167
00:11:12,000 --> 00:11:16,070
If I refresh this one, if I click on that button.

168
00:11:17,630 --> 00:11:20,320
Ladies and gentlemen, we have a number, right?

169
00:11:20,540 --> 00:11:21,120
That's cool.

170
00:11:21,260 --> 00:11:22,940
So we have one only nice.

171
00:11:23,030 --> 00:11:25,340
If I'd add another one, it will be two.

172
00:11:25,580 --> 00:11:26,830
So that is working.

173
00:11:26,840 --> 00:11:31,850
Now, let's display something inside for Dad.

174
00:11:32,210 --> 00:11:40,880
First, we need to store all the likes of the movie that we like inside a constant call like you can

175
00:11:40,880 --> 00:11:41,740
call whatever you want.

176
00:11:41,900 --> 00:11:47,340
So data that likes that show instead of list is likes.

177
00:11:47,510 --> 00:11:47,870
Right?

178
00:11:48,050 --> 00:11:53,150
So that method will return the entire array of the elex.

179
00:11:53,330 --> 00:11:56,900
Right now we do have this one so we can look through this.

180
00:11:57,170 --> 00:12:00,980
So like we're going to loop we do for each method.

181
00:12:01,370 --> 00:12:03,650
So I have the access to the current element.

182
00:12:03,650 --> 00:12:04,040
Right.

183
00:12:04,280 --> 00:12:12,890
And what I can do, I'm going to call the like view that display instead of like, no, I should be

184
00:12:12,890 --> 00:12:13,640
like Motal.

185
00:12:14,120 --> 00:12:14,690
Cool.

186
00:12:14,870 --> 00:12:16,280
And I'm going to pass the element.

187
00:12:17,720 --> 00:12:18,320
All good.

188
00:12:19,970 --> 00:12:20,810
Let's save it.

189
00:12:20,810 --> 00:12:21,710
Let's see what's happening.

190
00:12:21,710 --> 00:12:31,880
So if I like it one more, if I go here, something's not right, something is not working and it's

191
00:12:31,880 --> 00:12:35,060
like instead of like some looping through something that doesn't exist.

192
00:12:35,390 --> 00:12:37,250
OK, now I get that error.

193
00:12:37,430 --> 00:12:38,410
You got to fix that one.

194
00:12:38,930 --> 00:12:41,900
So movie just going to click this one.

195
00:12:41,930 --> 00:12:42,980
I'm going to like that one.

196
00:12:43,340 --> 00:12:44,450
I'm going to click this one.

197
00:12:44,480 --> 00:12:45,470
I'm going to like this one.

198
00:12:45,470 --> 00:12:50,180
So I have to now again, we do have some problem.

199
00:12:50,840 --> 00:12:53,300
OK, let me just cancel.

200
00:12:55,190 --> 00:13:03,980
I need to cancel, lock the data that like so I want to see what's happening here.

201
00:13:04,530 --> 00:13:04,970
Right.

202
00:13:05,570 --> 00:13:08,660
And I'm doing a couple of mistakes here.

203
00:13:10,370 --> 00:13:13,730
One and this one too.

204
00:13:14,580 --> 00:13:16,520
Let's go to the console and see what's happening.

205
00:13:16,850 --> 00:13:20,000
So data lags is undefined, right?

206
00:13:20,490 --> 00:13:21,410
Why is this?

207
00:13:23,620 --> 00:13:33,340
And are the likes where it is, of course, that is undefined because it's like not DataDot likes.

208
00:13:36,570 --> 00:13:40,330
No, I will add one, here it is now it's working.

209
00:13:40,350 --> 00:13:43,700
Ladies and gentlemen, it's adding something nice.

210
00:13:43,710 --> 00:13:45,150
So I'm going to have one more.

211
00:13:45,900 --> 00:13:49,690
Actually, I don't have one more because I need to search it, but I'm going to open it.

212
00:13:49,860 --> 00:13:50,590
And here it is.

213
00:13:51,030 --> 00:13:57,870
So if I had movies, other movies, and if I go here at this one, I go here at this.

214
00:13:57,930 --> 00:13:59,420
Actually, we have added that one.

215
00:14:00,780 --> 00:14:01,530
Now we have three.

216
00:14:01,920 --> 00:14:07,290
OK, well, why we do have this result in our.

217
00:14:08,470 --> 00:14:11,400
Let me just show you our console is I like having a three.

218
00:14:11,550 --> 00:14:14,440
Same is the number on top three in three here.

219
00:14:14,580 --> 00:14:16,350
So why are we having this duplication?

220
00:14:16,680 --> 00:14:20,430
Well, that is because we need to reset the model back to normal.

221
00:14:20,520 --> 00:14:25,210
And we do have function for resetting like model.

222
00:14:25,240 --> 00:14:26,170
So how are we going to do it?

223
00:14:26,370 --> 00:14:35,800
So here I'm going to say, like you that reset like model like that, just simply like that.

224
00:14:36,210 --> 00:14:38,490
Now, I'm going to go back to the movie.

225
00:14:38,730 --> 00:14:42,300
I'm going to add the Scary Movie and I'm going to add El Camino.

226
00:14:42,690 --> 00:14:44,460
And now this button is staying like that.

227
00:14:44,460 --> 00:14:46,590
It's annoying very much.

228
00:14:47,160 --> 00:14:48,830
And it really is only two, right?

229
00:14:48,930 --> 00:14:54,330
There is no duplication because we're adding, adding, adding the same movies all over again now.

230
00:14:54,370 --> 00:14:54,580
Good.

231
00:14:54,600 --> 00:14:55,020
We did.

232
00:14:55,020 --> 00:14:57,360
We set that one back to normal.

233
00:14:58,500 --> 00:15:05,340
Now here we can check the status of this bad boy here of this icon so we can check the status.

234
00:15:05,370 --> 00:15:11,820
So what I'm going to do now here is actually after the likes.

235
00:15:12,090 --> 00:15:13,530
I'm going to check the status.

236
00:15:16,500 --> 00:15:18,630
All of the like

237
00:15:21,610 --> 00:15:22,020
media.

238
00:15:22,700 --> 00:15:26,160
OK, so what I'm going to do now, I'm going to say consed check.

239
00:15:28,480 --> 00:15:36,500
It's like, no, this will be able to store data like check.

240
00:15:37,450 --> 00:15:43,500
So again, I'm going to use that check movies like status and I'm going to pass the data like that.

241
00:15:43,510 --> 00:15:49,510
I'd go now check is like and here she becomes.

242
00:15:49,630 --> 00:15:52,100
I'm sorry about it now.

243
00:15:52,240 --> 00:15:53,320
That is pretty much done.

244
00:15:53,330 --> 00:15:58,450
So here is going to say, OK, true or false, it's going to give us that option.

245
00:15:59,020 --> 00:16:00,540
But what now?

246
00:16:00,850 --> 00:16:12,250
So I can just go here and I can say, like you that display, like I can call the function that we created

247
00:16:12,250 --> 00:16:19,480
for that button and I can send the check is like, cool.

248
00:16:19,870 --> 00:16:27,090
But the way we said that, this one, just with what it is in it, is actually it's a like view.

249
00:16:28,660 --> 00:16:35,320
So the way we set this one first, we are setting the icon hard, actually.

250
00:16:35,350 --> 00:16:38,360
And again, here we do have the icon heart.

251
00:16:38,680 --> 00:16:43,000
Um, let's just see something, you know, here.

252
00:16:43,000 --> 00:16:48,790
What it will do if laxly does is true, it will go here and it will get this wonderful icon.

253
00:16:48,790 --> 00:16:49,040
Right.

254
00:16:49,180 --> 00:16:50,290
So that's the intention.

255
00:16:50,530 --> 00:16:56,440
But if the like state is true, if the Lexton is not true, it will go here and get the empty heart.

256
00:16:57,340 --> 00:17:03,790
Now, for that reason to work, we need to just put here exclamation mark, meaning that if it's true,

257
00:17:03,790 --> 00:17:05,980
it will not it will make it not true.

258
00:17:06,670 --> 00:17:08,930
And that is pretty much it.

259
00:17:09,310 --> 00:17:17,440
Now, this will not again work because our movie, your movie controller, where it is movie controller,

260
00:17:17,740 --> 00:17:20,970
the movie controller, we need to pass here something else.

261
00:17:21,280 --> 00:17:29,320
So I will make a comma here and I will say data that like that check check movie like status.

262
00:17:29,320 --> 00:17:33,970
And I'm going to pass the idea because remember, we do have that idea when we were creating the movie.

263
00:17:34,570 --> 00:17:41,170
And again, this will not work because we are checking for the like with that movie controller, but

264
00:17:41,170 --> 00:17:45,830
actual data that like it's empty, it's not being even created.

265
00:17:46,390 --> 00:17:46,740
Right.

266
00:17:46,930 --> 00:17:49,530
This one here does not contain the like object.

267
00:17:49,780 --> 00:17:59,980
So we can avoid that just for temporarily seeing DataDot like equal new like just like that outside

268
00:18:00,160 --> 00:18:01,270
of the functions.

269
00:18:02,300 --> 00:18:05,350
Now let's see what will happen.

270
00:18:05,350 --> 00:18:06,220
No movie.

271
00:18:06,520 --> 00:18:10,000
Actually, we need to create a lot more in order for this to work.

272
00:18:10,750 --> 00:18:13,900
So now if I press it like this, here it is.

273
00:18:13,900 --> 00:18:16,600
It's changing, but it's not reverting back.

274
00:18:16,600 --> 00:18:16,930
Why?

275
00:18:16,930 --> 00:18:21,220
Because we are not using the the other option.

276
00:18:21,220 --> 00:18:27,220
We are checking if what was here is we checking

277
00:18:29,770 --> 00:18:31,270
we checking for not like movies.

278
00:18:31,270 --> 00:18:31,590
Right.

279
00:18:31,600 --> 00:18:36,760
And what about if the movies are being already liked so we can use the same thing.

280
00:18:39,280 --> 00:18:40,720
We can use the same thing here.

281
00:18:46,180 --> 00:18:52,720
So we can use the same logic that we created if data is liked or not like, but before that, we need

282
00:18:52,720 --> 00:19:02,110
to go back to the movie you here and because here we need to pass another argument called like, remember,

283
00:19:02,110 --> 00:19:03,090
we passed that one.

284
00:19:03,850 --> 00:19:07,210
Now here we need to find.

285
00:19:07,240 --> 00:19:07,900
I cannot.

286
00:19:11,120 --> 00:19:13,850
And we need to use actually the ternary operator here.

287
00:19:14,000 --> 00:19:21,560
OK, so if that icon is actually liked, we need to just use something else.

288
00:19:21,800 --> 00:19:24,050
So I'm going to cut this one from here.

289
00:19:24,940 --> 00:19:28,090
And as I told you, I'm going to be going to use the ternary operator.

290
00:19:28,280 --> 00:19:30,050
And what does this ternary operator.

291
00:19:30,080 --> 00:19:33,980
It will allow us to create in one line something very powerful.

292
00:19:34,370 --> 00:19:35,930
Now, dollar sign.

293
00:19:36,580 --> 00:19:46,400
And I'm going to say here, like so if like means if it's true, then I want to have icon heart.

294
00:19:48,770 --> 00:19:55,640
Else I want to have Eichen Heart Dash.

295
00:19:56,010 --> 00:19:59,550
Oh, and that is pretty much it.

296
00:19:59,900 --> 00:20:01,220
Now we do have the class.

297
00:20:01,430 --> 00:20:03,100
Everything is working.

298
00:20:03,470 --> 00:20:03,900
Good, good.

299
00:20:04,700 --> 00:20:05,790
So save this one.

300
00:20:06,920 --> 00:20:07,790
Go back here.

301
00:20:08,570 --> 00:20:10,090
It's working, but it's not working.

302
00:20:10,100 --> 00:20:15,770
When we click again now that it's easily fixed with this condition here.

303
00:20:16,520 --> 00:20:22,520
Now, what we what we need to have in this condition is pretty much seen what we have here.

304
00:20:22,520 --> 00:20:24,440
Just a couple of modifications.

305
00:20:24,680 --> 00:20:30,620
OK, the first things I want to delete, because when we click again, I want to disappear.

306
00:20:30,630 --> 00:20:32,660
I want this object here to be deleted.

307
00:20:32,840 --> 00:20:39,440
So what we can do is data that like and we can use that delete method that we created.

308
00:20:42,050 --> 00:20:44,630
So delete like movie and I'm going to pass inside here.

309
00:20:44,930 --> 00:20:51,450
Liked it right from that one on top that we just created.

310
00:20:51,500 --> 00:20:51,850
Good.

311
00:20:52,190 --> 00:20:58,960
Now that will delete it from delete like the movie, but also we need to delete it from the UI.

312
00:20:59,150 --> 00:21:04,310
So like view the display like no.

313
00:21:05,870 --> 00:21:13,220
And I will say data that like that number of likes and that ladies and gentlemen will decrease this

314
00:21:13,220 --> 00:21:13,370
one.

315
00:21:13,370 --> 00:21:16,380
So if it was one it will go back to zero.

316
00:21:16,820 --> 00:21:22,790
OK, so we also need to check the status like this.

317
00:21:23,390 --> 00:21:30,380
But here now we're not going to check if it's not like we got to check the the other way.

318
00:21:30,530 --> 00:21:30,930
Right.

319
00:21:31,310 --> 00:21:33,860
So if it's true, then it will change to something else.

320
00:21:34,490 --> 00:21:35,680
OK, that is good.

321
00:21:35,700 --> 00:21:41,540
And we need to display here is we need to copy the same same thing and put it

322
00:21:44,570 --> 00:21:44,990
in.

323
00:21:45,200 --> 00:21:49,790
That wasn't so good in.

324
00:21:49,800 --> 00:21:50,770
Let's test this out.

325
00:21:51,260 --> 00:21:51,980
So save it.

326
00:21:52,400 --> 00:21:53,270
Go back here.

327
00:21:53,570 --> 00:21:54,740
I'm going to like the movie.

328
00:21:55,250 --> 00:21:55,910
It's there.

329
00:21:55,910 --> 00:21:58,520
I'm going to unlike the movie, it's not there anymore.

330
00:21:58,520 --> 00:21:59,480
I'm going to like it again.

331
00:21:59,750 --> 00:22:00,440
It's there.

332
00:22:00,810 --> 00:22:02,450
And let's see if it's changing.

333
00:22:02,690 --> 00:22:04,370
So if I open.

334
00:22:04,370 --> 00:22:04,790
Sorry.

335
00:22:05,720 --> 00:22:06,860
So I now need to close this.

336
00:22:06,860 --> 00:22:12,110
Probably so now here if I click it I will have the movie right now.

337
00:22:12,110 --> 00:22:16,010
If I unlike the movie, if I go back it's going to be empty.

338
00:22:16,340 --> 00:22:19,240
OK, let's do something else.

339
00:22:19,250 --> 00:22:25,430
So this is the movie that I'm going to like the Scary Movie and I'm going to go to the next page and

340
00:22:25,430 --> 00:22:29,600
this B movie I'm going to like now here I do have the three.

341
00:22:30,290 --> 00:22:31,520
But look what's happening here.

342
00:22:31,520 --> 00:22:38,420
If I go back to the first one and if I click it here, it will automatically know that we already have

343
00:22:38,420 --> 00:22:38,940
liked it.

344
00:22:39,020 --> 00:22:39,470
This.

345
00:22:39,650 --> 00:22:40,130
Why?

346
00:22:40,310 --> 00:22:42,280
Because that is coming from the movie.

347
00:22:42,340 --> 00:22:45,950
You remember we just from the movie controller.

348
00:22:45,950 --> 00:22:50,480
We passed that one here and we initially set that one to be like that.

349
00:22:50,480 --> 00:22:54,690
But because we haven't browser, because the browser is not refreshed.

350
00:22:54,690 --> 00:22:58,340
So if I refresh now, everything will be gone and probably I will end up.

351
00:22:58,610 --> 00:22:59,900
Yeah, everything will be gone.

352
00:23:00,050 --> 00:23:03,620
You don't have anything like now that will be for the next lecture.

353
00:23:03,860 --> 00:23:11,150
So when I do browser refresh, I want something to stay in to be stored locally in the local storage.

354
00:23:11,300 --> 00:23:17,930
So when we store that one, so regardless of what we refresh and we're going to do to things, we're

355
00:23:17,930 --> 00:23:25,250
going to store this here, this, and pretty much it will know what we have liked and what we have in

356
00:23:25,250 --> 00:23:29,390
the car, and that is going to be more powerful than we have it right now.

357
00:23:29,540 --> 00:23:32,450
So that is pretty much everything that for this lecture.

358
00:23:32,660 --> 00:23:34,820
So it was super, super long, super.

359
00:23:35,240 --> 00:23:35,840
It was.

360
00:23:35,840 --> 00:23:38,540
It is really complex, but it is what it is.

361
00:23:38,810 --> 00:23:46,070
So I just want you to understand and if it's not turning out for you, just the final version and see

362
00:23:46,070 --> 00:23:54,020
if you have done a mistake, because only small mistake with like one s here, it will not work.

363
00:23:54,410 --> 00:23:56,000
Do you understand what I'm trying to say?

364
00:23:56,330 --> 00:23:57,860
So that is pretty much it.

365
00:23:58,490 --> 00:24:01,010
And I will see you in the next lecture.