1
00:00:01,110 --> 00:00:03,780
‫Let's now handle the event of users

2
00:00:03,780 --> 00:00:05,793
‫hovering over our stars.

3
00:00:07,080 --> 00:00:09,660
‫So basically the functionality that we're looking

4
00:00:09,660 --> 00:00:12,240
‫for is this one.

5
00:00:12,240 --> 00:00:14,970
‫So whenever we hover over these stars

6
00:00:14,970 --> 00:00:18,420
‫we get like a temporary rating here exactly

7
00:00:18,420 --> 00:00:22,170
‫with the number of stars that are currently being hovered.

8
00:00:22,170 --> 00:00:25,170
‫So here we have nine, well, here we have three

9
00:00:25,170 --> 00:00:27,270
‫but it is completely independent

10
00:00:27,270 --> 00:00:30,960
‫from the rating that is actually set right now.

11
00:00:30,960 --> 00:00:33,630
‫So the rating is set to five, but again

12
00:00:33,630 --> 00:00:36,780
‫whenever we hover over some other number of stars

13
00:00:36,780 --> 00:00:41,780
‫then that temporarily changes to that rating now, right?

14
00:00:42,630 --> 00:00:45,900
‫So what that means is that now we need a brand new piece

15
00:00:45,900 --> 00:00:49,980
‫of state to basically store that temporary rating.

16
00:00:49,980 --> 00:00:51,840
‫And again, that makes sense

17
00:00:51,840 --> 00:00:54,990
‫because something should happen on the screen.

18
00:00:54,990 --> 00:00:58,170
‫So the component should re-render whenever

19
00:00:58,170 --> 00:00:59,940
‫there is some hover event.

20
00:00:59,940 --> 00:01:02,883
‫That's how we then get that new rating in there.

21
00:01:04,110 --> 00:01:05,853
‫So let's say,

22
00:01:07,242 --> 00:01:08,850
‫(keyboard clicking)

23
00:01:08,850 --> 00:01:10,950
‫for example, temp rating

24
00:01:10,950 --> 00:01:14,080
‫which stands for temporary, and then set

25
00:01:16,680 --> 00:01:17,793
‫temp rating.

26
00:01:19,050 --> 00:01:21,930
‫And we start at zero.

27
00:01:21,930 --> 00:01:25,983
‫And of course the rating itself should also start at zero.

28
00:01:28,170 --> 00:01:29,700
‫Now, right.

29
00:01:29,700 --> 00:01:32,790
‫Now, in order to actually handle that hover event,

30
00:01:32,790 --> 00:01:37,413
‫let's go down here onto our star.

31
00:01:38,400 --> 00:01:40,140
‫So into our star component.

32
00:01:40,140 --> 00:01:42,150
‫And then where we handle the click

33
00:01:42,150 --> 00:01:45,180
‫is where we also handle the hover.

34
00:01:45,180 --> 00:01:48,060
‫Now, there's not really a hover event

35
00:01:48,060 --> 00:01:52,563
‫but instead we have on mouse enter.

36
00:01:54,990 --> 00:01:58,443
‫So let's just do some console log lock here for now.

37
00:02:04,260 --> 00:02:05,970
‫So that's one of them.

38
00:02:05,970 --> 00:02:09,420
‫And then we have mouse leave.

39
00:02:09,420 --> 00:02:12,843
‫So we basically need to handle these two separately.

40
00:02:14,405 --> 00:02:16,650
‫(keyboard clicking)

41
00:02:16,650 --> 00:02:19,353
‫Okay, just so that we can quickly see.

42
00:02:20,610 --> 00:02:24,960
‫So I entered basically this element, and then it said enter.

43
00:02:24,960 --> 00:02:28,050
‫And immediately afterwards it said leave.

44
00:02:28,050 --> 00:02:29,880
‫So let's see again.

45
00:02:29,880 --> 00:02:33,270
‫And indeed, each time that we enter or leave,

46
00:02:33,270 --> 00:02:35,580
‫well we get our log down there.

47
00:02:35,580 --> 00:02:38,790
‫And so now all we have to do is to update that

48
00:02:38,790 --> 00:02:41,460
‫temp rating state that we just created

49
00:02:41,460 --> 00:02:43,473
‫in each of these situations.

50
00:02:45,180 --> 00:02:49,110
‫So let's pass in then two handler functions here

51
00:02:49,110 --> 00:02:53,223
‫into the star, just like we did for the on rate.

52
00:02:56,100 --> 00:03:00,030
‫So let's call this one here on hover in.

53
00:03:00,030 --> 00:03:02,970
‫And the prop name here is different again

54
00:03:02,970 --> 00:03:07,140
‫from the event name, just to avoid some confusion here.

55
00:03:07,140 --> 00:03:11,280
‫So we could also call this prop on mouse Enter again,

56
00:03:11,280 --> 00:03:15,090
‫but then it might be a bit confusing and you might think

57
00:03:15,090 --> 00:03:18,090
‫that the event is actually handled right here

58
00:03:18,090 --> 00:03:21,870
‫on the star component, which of course is not possible.

59
00:03:21,870 --> 00:03:24,180
‫So the event always needs to be handled

60
00:03:24,180 --> 00:03:27,480
‫on a JSX element itself.

61
00:03:27,480 --> 00:03:31,410
‫So like an HTML element such as a span.

62
00:03:31,410 --> 00:03:32,370
‫Now Okay.

63
00:03:32,370 --> 00:03:36,330
‫And now all we have to do here is to basically

64
00:03:36,330 --> 00:03:41,330
‫set the temp rating to the rating of the current star.

65
00:03:41,970 --> 00:03:45,900
‫So that's again, I plus one, right?

66
00:03:45,900 --> 00:03:50,900
‫And then on hover out, we set it back to the initial value.

67
00:03:55,320 --> 00:03:59,583
‫So temp rating back to zero.

68
00:04:01,140 --> 00:04:03,573
‫So here we need to change the name.

69
00:04:04,530 --> 00:04:07,743
‫So of course this is with an upper case R.

70
00:04:09,000 --> 00:04:13,320
‫And now all we need to do is to accept these two props here

71
00:04:13,320 --> 00:04:15,423
‫and wire everything together.

72
00:04:16,680 --> 00:04:19,210
‫So, on hover in

73
00:04:20,790 --> 00:04:22,833
‫on hover out.

74
00:04:24,120 --> 00:04:26,760
‫Alright? And so then here

75
00:04:26,760 --> 00:04:29,493
‫we of course want to now call these functions.

76
00:04:33,180 --> 00:04:34,013
‫And here

77
00:04:37,320 --> 00:04:39,213
‫on hover out.

78
00:04:40,410 --> 00:04:42,360
‫And now finally

79
00:04:42,360 --> 00:04:45,483
‫we need to actually display this rating in the UI.

80
00:04:46,380 --> 00:04:48,990
‫So you see here right now that it's still yellow

81
00:04:48,990 --> 00:04:51,333
‫which means that we haven't used it anywhere.

82
00:04:52,380 --> 00:04:57,380
‫So let's, for now, replace this rating with the temp rating.

83
00:05:00,120 --> 00:05:01,740
‫And then let's see,

84
00:05:01,740 --> 00:05:05,610
‫and yeah, that's already working.

85
00:05:05,610 --> 00:05:08,700
‫So see how that value was there shortly.

86
00:05:08,700 --> 00:05:10,140
‫We had the three,

87
00:05:10,140 --> 00:05:12,300
‫then here the four, the five

88
00:05:12,300 --> 00:05:14,760
‫and so on and so forth.

89
00:05:14,760 --> 00:05:16,290
‫So that's working great.

90
00:05:16,290 --> 00:05:18,510
‫The only part that is not working

91
00:05:18,510 --> 00:05:21,480
‫is that the stars are not getting full.

92
00:05:21,480 --> 00:05:23,370
‫And so let's quickly fix that

93
00:05:23,370 --> 00:05:27,810
‫here inside this condition here.

94
00:05:27,810 --> 00:05:32,220
‫So here we can say that if there is a temp rating.

95
00:05:32,220 --> 00:05:34,410
‫So if there is a temporary rating

96
00:05:34,410 --> 00:05:35,703
‫then do the same thing,

97
00:05:36,780 --> 00:05:38,913
‫but with that temp rating.

98
00:05:40,020 --> 00:05:45,020
‫So then temp rating, greater or equal I plus one.

99
00:05:45,210 --> 00:05:49,530
‫But if not, well then we just do what we had before.

100
00:05:49,530 --> 00:05:54,513
‫And so this should fix that and yeah, beautiful.

101
00:05:55,560 --> 00:05:57,093
‫So that works great.

102
00:05:58,080 --> 00:05:59,850
‫And if we click here,

103
00:05:59,850 --> 00:06:02,280
‫well then the number disappears,

104
00:06:02,280 --> 00:06:04,470
‫but the stars stay the same.

105
00:06:04,470 --> 00:06:07,740
‫And so that's because now we have the rating set.

106
00:06:07,740 --> 00:06:10,860
‫And then, so here in this full prop

107
00:06:10,860 --> 00:06:12,780
‫we enter the second branch,

108
00:06:12,780 --> 00:06:14,760
‫which then just like before

109
00:06:14,760 --> 00:06:18,600
‫sets these four stars here, two full.

110
00:06:18,600 --> 00:06:22,350
‫Now all we have to do here is to place another

111
00:06:22,350 --> 00:06:24,810
‫or here and say basically

112
00:06:24,810 --> 00:06:29,810
‫if there is no temp rating, then display the current rating.

113
00:06:30,300 --> 00:06:32,220
‫And if that also doesn't exist

114
00:06:32,220 --> 00:06:34,143
‫well then we get the empty string.

115
00:06:35,520 --> 00:06:37,500
‫So indeed, we now get four.

116
00:06:37,500 --> 00:06:39,690
‫If we click again, we get five.

117
00:06:39,690 --> 00:06:43,200
‫But as we hover, we get the temporary rating.

118
00:06:43,200 --> 00:06:44,880
‫So just like we wanted

119
00:06:44,880 --> 00:06:49,053
‫and just like this component here works as well.

120
00:06:51,030 --> 00:06:55,110
‫So this looks really nice, really real world actually

121
00:06:55,110 --> 00:06:57,510
‫and it wasn't that much work.

122
00:06:57,510 --> 00:06:59,940
‫All we had to do is some tricks

123
00:06:59,940 --> 00:07:02,310
‫with these two rating states.

124
00:07:02,310 --> 00:07:05,520
‫And then handling all of these different events.

125
00:07:05,520 --> 00:07:08,730
‫So basically handling the click, the mouse enter

126
00:07:08,730 --> 00:07:10,020
‫and the mouse leave.

127
00:07:10,020 --> 00:07:12,600
‫And the result, if you ask me,

128
00:07:12,600 --> 00:07:15,240
‫is even a bit magical here.

129
00:07:15,240 --> 00:07:19,560
‫So I really, really like this effect that we created here.

130
00:07:19,560 --> 00:07:20,430
‫Okay.

131
00:07:20,430 --> 00:07:25,230
‫And so that's the main functionality already implemented.

132
00:07:25,230 --> 00:07:27,450
‫But now let's make the component really

133
00:07:27,450 --> 00:07:31,080
‫really flexible by allowing a couple of props.

134
00:07:31,080 --> 00:07:34,170
‫So we will learn all about that in the next lecture

135
00:07:34,170 --> 00:07:36,120
‫and then we will come back here

136
00:07:36,120 --> 00:07:40,143
‫and create the API basically of this component.