Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,070 --> 00:00:05,470
Now, as a final step in this application,
2
00:00:05,470 --> 00:00:09,760
I wanna come back to this button in the header,
3
00:00:09,760 --> 00:00:12,040
to this HeaderCartButton.
4
00:00:12,040 --> 00:00:14,290
Everything works in this application,
5
00:00:14,290 --> 00:00:17,350
but I wanna play a little animation on this button
6
00:00:17,350 --> 00:00:20,200
whenever we add an item to the cart,
7
00:00:20,200 --> 00:00:22,150
or also when we remove an item,
8
00:00:22,150 --> 00:00:25,133
so whenever the amount of items in the cart changes.
9
00:00:26,200 --> 00:00:29,730
And for this, I already prepared something in the CSS file
10
00:00:29,730 --> 00:00:32,170
which I provided to you earlier.
11
00:00:32,170 --> 00:00:34,460
I set up a little CSS animation here
12
00:00:34,460 --> 00:00:37,823
which makes the button bump and change its scale.
13
00:00:38,780 --> 00:00:41,840
Now, we just need to make sure that this class,
14
00:00:41,840 --> 00:00:43,520
which starts this animation,
15
00:00:43,520 --> 00:00:46,433
this CSS class is added to the button.
16
00:00:47,340 --> 00:00:51,680
And for this, here I'll add a little const btnClasses,
17
00:00:53,810 --> 00:00:56,980
and I'll simply set this equal to a string
18
00:00:56,980 --> 00:01:00,270
using the template literal notation with back ticks
19
00:01:00,270 --> 00:01:02,430
instead of single quotes.
20
00:01:02,430 --> 00:01:05,553
And here, I will always add classes.button.
21
00:01:06,590 --> 00:01:11,100
But then, conditionally, I wanna add the animation class.
22
00:01:11,100 --> 00:01:13,840
Now, to show you how it works, I will add it right away,
23
00:01:13,840 --> 00:01:16,440
not conditionally but always for the moment.
24
00:01:16,440 --> 00:01:18,543
And that's the bump class.
25
00:01:19,850 --> 00:01:22,120
And now, here, for a class name on the button,
26
00:01:22,120 --> 00:01:25,223
I set this equal to btnClasses.
27
00:01:26,470 --> 00:01:27,327
If you save that and reload,
28
00:01:27,327 --> 00:01:29,810
you'll see this bump animation here.
29
00:01:29,810 --> 00:01:32,700
It only plays one, but later it should play
30
00:01:32,700 --> 00:01:34,713
whenever this cart changes.
31
00:01:35,800 --> 00:01:38,883
To make that happen, we can utilize useEffect.
32
00:01:40,220 --> 00:01:43,720
We haven't used it thus far in this application
33
00:01:43,720 --> 00:01:48,530
because we had no traditional side effect up to this point,
34
00:01:48,530 --> 00:01:52,610
no local storage access, nothing like this.
35
00:01:52,610 --> 00:01:54,540
Of course, you could add such features,
36
00:01:54,540 --> 00:01:56,190
but here we simply don't have it.
37
00:01:57,040 --> 00:01:59,900
Therefore, here I will utilize useEffect
38
00:01:59,900 --> 00:02:01,740
to play this animation.
39
00:02:01,740 --> 00:02:03,960
And therefore, here in the HeaderCartButton,
40
00:02:03,960 --> 00:02:05,707
I'll import useEffect,
41
00:02:07,190 --> 00:02:12,190
and then call useEffect here in this component function.
42
00:02:12,490 --> 00:02:15,020
Now, we pass our effect function to that
43
00:02:15,020 --> 00:02:17,693
and then our array of dependencies as you learned.
44
00:02:18,990 --> 00:02:20,900
Now here, in this effect function,
45
00:02:20,900 --> 00:02:24,220
I wanna do one simple thing in the end.
46
00:02:24,220 --> 00:02:25,790
I wanna change my btnClasses
47
00:02:25,790 --> 00:02:29,480
to include the bump animation class,
48
00:02:29,480 --> 00:02:33,610
and then I wanna set a timer which removes that class again
49
00:02:33,610 --> 00:02:38,230
so that when it's added again in the future, it again plays.
50
00:02:38,230 --> 00:02:41,560
So therefore, I will also import useState
51
00:02:41,560 --> 00:02:43,700
because we'll need to reevaluate
52
00:02:43,700 --> 00:02:45,520
and re-render this component
53
00:02:45,520 --> 00:02:49,053
when that animation class is added conditionally.
54
00:02:50,010 --> 00:02:51,513
So here, I'll call useState,
55
00:02:52,480 --> 00:02:56,210
set this to false initially because this will control
56
00:02:56,210 --> 00:02:58,960
whether or not the button should be animated,
57
00:02:58,960 --> 00:03:01,720
and I'll name it btnIsHighlighted,
58
00:03:05,310 --> 00:03:08,653
and setBtnIsHighlighted.
59
00:03:09,540 --> 00:03:12,480
Of course, the state names are up to you.
60
00:03:12,480 --> 00:03:16,912
Here, in useEffect, I'll then call setBtnIsHighlighted
61
00:03:16,912 --> 00:03:18,123
and set this to true.
62
00:03:20,970 --> 00:03:24,833
Then, as a next step, here for my btnClasses,
63
00:03:25,932 --> 00:03:28,570
I will not always add the bump class,
64
00:03:28,570 --> 00:03:32,160
but I'll check if btnIsHighlighted is true.
65
00:03:32,160 --> 00:03:35,130
And if that's the case, classes.bump is added,
66
00:03:35,130 --> 00:03:37,070
otherwise an empty string is added,
67
00:03:37,070 --> 00:03:40,223
so no extra CSS class is added then.
68
00:03:41,480 --> 00:03:44,170
And I do this here because, since I'm updating the state,
69
00:03:44,170 --> 00:03:47,790
the whole component will re-execute when that state changes.
70
00:03:47,790 --> 00:03:49,700
So this line will also change again,
71
00:03:49,700 --> 00:03:53,020
and the updated classes will be picked up down there.
72
00:03:53,020 --> 00:03:55,200
Now, of course, I don't always
73
00:03:55,200 --> 00:03:57,760
wanna change the state though.
74
00:03:57,760 --> 00:04:02,220
I only wanna change it if my items changed
75
00:04:02,220 --> 00:04:05,290
and if the length is greater than zero,
76
00:04:05,290 --> 00:04:08,853
so if there is at least one item in the cart, let's say.
77
00:04:10,120 --> 00:04:15,120
Hence, here I will check if cartCtx.items.length
78
00:04:15,670 --> 00:04:19,160
is equal to zero, in which case here I'll just return
79
00:04:19,160 --> 00:04:22,450
so that the rest of this effect function doesn't execute.
80
00:04:22,450 --> 00:04:24,060
Because this should only execute
81
00:04:24,060 --> 00:04:26,663
if we have at least one item in the cart, let's say.
82
00:04:27,620 --> 00:04:30,350
Now, we need to add this as a dependency.
83
00:04:30,350 --> 00:04:32,950
But if I add cart context like this,
84
00:04:32,950 --> 00:04:35,990
this effect would rerun whenever anything
85
00:04:35,990 --> 00:04:37,890
about my cart context changes.
86
00:04:37,890 --> 00:04:39,563
And that's not what I want here.
87
00:04:40,690 --> 00:04:44,780
Therefore, I'll use object de-structuring
88
00:04:44,780 --> 00:04:49,780
to pull out the items, to get them out of my cart
89
00:04:49,800 --> 00:04:52,940
so that here I can just refer to items
90
00:04:52,940 --> 00:04:56,670
and pass items as a dependency,
91
00:04:56,670 --> 00:04:59,970
so that not the entire context, but only the items array
92
00:04:59,970 --> 00:05:02,473
is a dependency for this effect function.
93
00:05:03,380 --> 00:05:07,120
Of course, we can also pull this out a little bit earlier.
94
00:05:07,120 --> 00:05:11,023
And, for example, also then refer to just items here.
95
00:05:14,330 --> 00:05:17,140
Now, if we save this, if I reload,
96
00:05:17,140 --> 00:05:20,630
if I click add, watch the button in the top-right corner.
97
00:05:20,630 --> 00:05:25,000
It now bumps, but only the first time I add something.
98
00:05:25,000 --> 00:05:28,430
The reason for that is that then this class is added,
99
00:05:28,430 --> 00:05:30,920
but since it's currently never removed,
100
00:05:30,920 --> 00:05:32,640
thereafter, it never changes
101
00:05:32,640 --> 00:05:35,190
because the animation is actually only played
102
00:05:35,190 --> 00:05:38,360
when this class is added for the first time.
103
00:05:38,360 --> 00:05:40,960
Therefore, we should also remove the class
104
00:05:40,960 --> 00:05:42,830
after the animation finished.
105
00:05:42,830 --> 00:05:45,083
And I'll do that by setting a timer here.
106
00:05:45,980 --> 00:05:50,110
I'll set a timer which fires after 300 milliseconds
107
00:05:50,110 --> 00:05:53,790
because that's the duration of this animation here.
108
00:05:53,790 --> 00:05:56,170
I played over 300 milliseconds,
109
00:05:56,170 --> 00:06:00,550
so after that duration, I trigger a function
110
00:06:00,550 --> 00:06:04,220
where I set btnIsHighlighted back to false.
111
00:06:04,220 --> 00:06:05,730
And if that's false,
112
00:06:05,730 --> 00:06:09,060
this here will ensure that an empty string is added
113
00:06:09,060 --> 00:06:12,720
to the classes string instead of the bump class.
114
00:06:12,720 --> 00:06:16,203
So that will remove that CSS class from the render to DOM.
115
00:06:18,070 --> 00:06:20,910
Now, I also wanna add a cleanup function
116
00:06:20,910 --> 00:06:23,500
where I clear that timer
117
00:06:23,500 --> 00:06:26,023
in case that component should be removed.
118
00:06:27,030 --> 00:06:29,270
This can't happen in this application,
119
00:06:29,270 --> 00:06:30,970
the button is always there,
120
00:06:30,970 --> 00:06:34,070
but it's still a good practice to clean up any timers
121
00:06:34,070 --> 00:06:37,440
or any other side effects that might be ongoing
122
00:06:37,440 --> 00:06:40,390
because you started them in useEffect.
123
00:06:40,390 --> 00:06:42,890
So here, I'll return my cleanup function.
124
00:06:42,890 --> 00:06:46,050
You learned that if you return a function in useEffect,
125
00:06:46,050 --> 00:06:47,800
this will be called automatically
126
00:06:47,800 --> 00:06:50,470
as a cleanup function by React.
127
00:06:50,470 --> 00:06:52,923
And here, I'll call clearTimeout and clear that timer,
128
00:06:54,850 --> 00:06:58,350
so that when this effect reruns, we clear the timer.
129
00:06:58,350 --> 00:07:01,890
And actually we do need this here now that I think about it
130
00:07:01,890 --> 00:07:04,530
because, of course, this timer can be set again
131
00:07:04,530 --> 00:07:06,140
before it expired.
132
00:07:06,140 --> 00:07:10,240
If we add multiple items rapidly after each other,
133
00:07:10,240 --> 00:07:12,650
we wanna clear the old timer
134
00:07:12,650 --> 00:07:15,310
and make sure that a new timer is set
135
00:07:15,310 --> 00:07:17,320
and the old timer is, well, cleared.
136
00:07:17,320 --> 00:07:20,330
So we definitely should have that cleanup function here.
137
00:07:20,330 --> 00:07:21,383
And now we do.
138
00:07:22,250 --> 00:07:24,980
And with that, if we save this, if I reload,
139
00:07:24,980 --> 00:07:29,350
you see, whenever I add an item, this button bumps.
140
00:07:29,350 --> 00:07:31,670
And that's just a little visual tweak,
141
00:07:31,670 --> 00:07:36,240
and in addition, as a nice side effect, no pun intended,
142
00:07:36,240 --> 00:07:40,220
it's another practice and exercise of useEffect,
143
00:07:40,220 --> 00:07:42,763
which you need for handling side effects.
11570
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.