1
00:00:00,810 --> 00:00:03,690
Let's take a look at a couple of different possible ways of solving this problem.

2
00:00:04,170 --> 00:00:07,380
The first solution we could try to use is a pure solution.

3
00:00:07,830 --> 00:00:08,830
Back inside, my editor.

4
00:00:09,510 --> 00:00:12,570
I'm going to find my ad cell sites file.

5
00:00:13,730 --> 00:00:18,620
And then right after ad sell, I'm going to add in a new selecter of ad sell.

6
00:00:19,500 --> 00:00:20,700
Ohlin Active.

7
00:00:21,810 --> 00:00:29,880
Inside there, I'm going to put in and opacity of zero important in a transition of opacity, zero.

8
00:00:29,880 --> 00:00:30,330
S.

9
00:00:31,360 --> 00:00:35,140
So let's just go test this out really quickly and we'll describe exactly and figure out exactly what's

10
00:00:35,140 --> 00:00:35,990
going on with this.

11
00:00:37,220 --> 00:00:42,610
All right, so back inside my browser now, if I click on plus text right here, you'll notice I no

12
00:00:42,610 --> 00:00:48,250
longer have that kind of fade out effect where the ad cell bar that is being presumably moved down towards

13
00:00:48,250 --> 00:00:51,520
the very bottom so I can click.

14
00:00:52,820 --> 00:00:53,910
Don't see anything down there.

15
00:00:53,960 --> 00:00:58,100
Of course, the one I'm clicking on still fades out, not great, but it's definitely slightly better

16
00:00:58,100 --> 00:00:59,120
than what we had before.

17
00:00:59,450 --> 00:01:04,879
And I guess you could possibly even say that having this ad cell played out for just a moment is almost

18
00:01:04,879 --> 00:01:09,290
kind of desirable because it kind of indicates that, hey, something is changing inside of application.

19
00:01:09,680 --> 00:01:11,000
So not the worst solution.

20
00:01:11,000 --> 00:01:14,480
But again, doesn't really fully solve the entire issue here.

21
00:01:15,060 --> 00:01:19,240
So let's very quickly understand how this rule right here is really working.

22
00:01:19,970 --> 00:01:25,070
The active pseudo class selector is applied to any element that the user is actively interacting with

23
00:01:25,190 --> 00:01:26,420
generally through a click.

24
00:01:27,020 --> 00:01:32,420
So by adding on ad cell active, we're seeing that whenever a user is really clicking actively clicking

25
00:01:32,690 --> 00:01:37,280
on ad cell, we are going to temporarily apply opacity of zero.

26
00:01:37,670 --> 00:01:42,200
And we're going to also update the transition property as well to make sure that the change in opacity

27
00:01:42,200 --> 00:01:43,580
occurs instantaneously.

28
00:01:43,840 --> 00:01:49,030
So I want to instantaneously apply in opacity of zero, and I want to make sure I apply the important

29
00:01:49,100 --> 00:01:54,590
important selector on here as well for the important modifier to make sure that we override any existing

30
00:01:54,590 --> 00:01:55,850
other opacity rules.

31
00:01:58,380 --> 00:02:04,030
The one downside to this is that if I click down and hold, that applies the active selector.

32
00:02:04,470 --> 00:02:08,539
So even though I have not released my mouse right now, I've not released my clicking button.

33
00:02:09,060 --> 00:02:11,660
The active duty selector is being applied.

34
00:02:11,760 --> 00:02:15,840
So this thing fades out for just a moment entirely when user first clicks before they even let go of

35
00:02:15,840 --> 00:02:16,350
their mouse.

36
00:02:16,500 --> 00:02:21,990
It's only when I let go of that button, which I just did, that now we are not applying active anymore.

37
00:02:21,990 --> 00:02:26,850
So we register that click event and that element is being moved down to the bottom, the one that was

38
00:02:26,850 --> 00:02:28,000
actually actively clicking on.

39
00:02:28,530 --> 00:02:32,220
So again, this kind of solves the issue, but there's definitely some big downsides to it.

40
00:02:32,880 --> 00:02:34,980
Let's take a look at some other possible solutions.

41
00:02:35,730 --> 00:02:41,520
I'm going to undo that success and then going to go back over to my cell list file.

42
00:02:43,290 --> 00:02:48,060
So the next solution I'm going to show you is definitely a goofy one, don't really recommend it, but

43
00:02:48,090 --> 00:02:52,520
is slightly better or kind of presents a slightly better result to our users.

44
00:02:52,570 --> 00:02:56,070
So I'm going to show it to you regardless, because it's just kind of an interesting solution.

45
00:02:56,220 --> 00:02:58,160
But again, maybe not the best one in the world.

46
00:02:59,770 --> 00:03:04,630
OK, so like we just saw back in that diagram a moment ago, one of the issues around this entire problem

47
00:03:04,630 --> 00:03:07,750
is the fact that we are rendering a list of cells right here inside of an array.

48
00:03:08,230 --> 00:03:12,030
And inside that array, we've got this fragments and each fragment has a key.

49
00:03:12,370 --> 00:03:18,370
These keys are what allow react to positively identify exactly what every element is inside the dome.

50
00:03:18,940 --> 00:03:24,190
Whenever we make an update to our list, if we tried to render the list again and some element inside

51
00:03:24,190 --> 00:03:29,560
there has the same key react is going to go and update that same element in the dome, as opposed to

52
00:03:29,560 --> 00:03:34,780
creating an entirely new fragment with a new ad cell and a new cell list item inside of it.

53
00:03:35,500 --> 00:03:39,350
So we can kind of abuse this just a little bit to our advantage.

54
00:03:39,370 --> 00:03:40,120
Let me show you how.

55
00:03:41,400 --> 00:03:48,150
Underneath rendered cells, I'm going to do a rendered cells push and I'm going to add in.

56
00:03:49,030 --> 00:03:54,010
To the very bottom of that array, the ad cell that is supposed to be displayed at the very bottom,

57
00:03:54,500 --> 00:03:56,980
they're going to cut that thing and push it in like so.

58
00:03:59,380 --> 00:04:03,200
Then here's the really weird part, the part that I don't really recommend.

59
00:04:03,220 --> 00:04:04,940
I just want to show it to you for a little bit of fun.

60
00:04:04,990 --> 00:04:08,470
I'm going to put on a key property here of Map Dot Random.

61
00:04:09,040 --> 00:04:12,760
So as you'd guess, this means that every single time we render our sell list component, we're going

62
00:04:12,760 --> 00:04:17,860
to have a completely different key being applied to this component because we are applying a totally

63
00:04:17,860 --> 00:04:21,910
different key react is going to say, oh, there's already an ad selling the -- well.

64
00:04:21,910 --> 00:04:25,510
It has a different key, so it must not be really the same component.

65
00:04:25,540 --> 00:04:30,100
So it's going to throw away the ad sell currently in the dumb and completely recreate it.

66
00:04:30,610 --> 00:04:34,900
So by doing this, we are not really pushing down the ad sell component, which is what is happening

67
00:04:34,900 --> 00:04:35,350
right now.

68
00:04:35,560 --> 00:04:39,760
Instead, we are throwing out the current ad sell that we're clicking on and then rendering a brand

69
00:04:39,760 --> 00:04:40,120
new one.

70
00:04:40,690 --> 00:04:45,730
And because we are rendering a brand new one, there is going to not be any starting opacity of one

71
00:04:45,730 --> 00:04:46,180
point zero.

72
00:04:46,180 --> 00:04:48,310
Instead is going to have an initial opacity of zero.

73
00:04:49,010 --> 00:04:50,020
So let's try saving this.

74
00:04:50,720 --> 00:04:51,460
Going back over.

75
00:04:52,330 --> 00:04:55,510
And now if I click on Plus text, let's do a quick refresh first.

76
00:04:57,380 --> 00:04:59,930
Delete the two code cells just to make it a little bit more clear.

77
00:05:00,320 --> 00:05:05,540
So now when I click on Plus text, I still get the fade out of the element I'm clicking on and the fade

78
00:05:05,540 --> 00:05:06,020
back in.

79
00:05:06,440 --> 00:05:08,740
But we don't see that fade out for the one at the bottom.

80
00:05:08,750 --> 00:05:12,670
And that is because this ad cell down here is being completely recreated.

81
00:05:12,950 --> 00:05:15,490
There is no active hover rule on it.

82
00:05:15,500 --> 00:05:16,870
We're not actively hovering on it.

83
00:05:16,910 --> 00:05:17,900
We're not moving it down.

84
00:05:18,080 --> 00:05:19,850
We're throwing away the one that we're clicking on.

85
00:05:19,850 --> 00:05:24,440
So this one right here, if I click on it, we're throwing this one away, creating a brand new one

86
00:05:24,440 --> 00:05:26,390
and adding the new one at the very bottom.

87
00:05:27,820 --> 00:05:32,860
So this definitely works, but there is a big downside to it, this is only going to work correctly

88
00:05:33,160 --> 00:05:36,100
for the very last element, the very last ad sell.

89
00:05:36,550 --> 00:05:40,450
We haven't really discussed it, but this is a problem that occurs for all other ad sales we have as

90
00:05:40,450 --> 00:05:40,730
well.

91
00:05:41,110 --> 00:05:43,560
So if I click on, say, plus text right here.

92
00:05:44,230 --> 00:05:45,840
Yeah, same problem still applies.

93
00:05:46,270 --> 00:05:51,790
I'm moving down that ad sell to right there and inserting a new ad sell in a new Texel.

94
00:05:53,100 --> 00:05:56,760
Regardless, I just thought you might find the solution kind of funny, kind of interesting, because

95
00:05:56,760 --> 00:05:58,980
it really illustrates what's going on with this key prop.

96
00:05:59,740 --> 00:06:01,060
OK, so I'm going to undo that.

97
00:06:03,280 --> 00:06:07,050
And return ADL back to our return, Bluck, there we go.

98
00:06:09,060 --> 00:06:13,350
OK, so now final last solution we're going to take a look at, and this is one we're going to actually

99
00:06:13,350 --> 00:06:16,680
implement now, the solution is going to be painful, without a doubt.

100
00:06:16,680 --> 00:06:19,200
It is the most challenging solution for us to implement.

101
00:06:19,500 --> 00:06:23,820
But the reason we're doing it this way, the reason that we've written out this entire project in the

102
00:06:23,820 --> 00:06:28,290
fashion that we have and the reason we're going to go with this solution is because, well, this is

103
00:06:28,290 --> 00:06:34,530
a course and it is a great place for you to see really big mistakes, recognize the mistake, understand

104
00:06:34,530 --> 00:06:36,030
why the mistake has occurred.

105
00:06:36,150 --> 00:06:41,290
And then have you and I be able to refactor together and fix up our code base to accommodate for this?

106
00:06:41,730 --> 00:06:46,770
So in other words, we could have solved this much earlier in the course by writing our app in a slightly

107
00:06:46,770 --> 00:06:47,460
different fashion.

108
00:06:47,580 --> 00:06:49,380
And this problem would have never came up.

109
00:06:49,780 --> 00:06:53,820
But I figured, hey, let's just do things the wrong way, because it seems like kind of a really obvious

110
00:06:53,820 --> 00:06:54,570
way to do things.

111
00:06:54,990 --> 00:06:59,670
But it's just going to give you a little bit of a sense of, hey, maybe we really need to do we really

112
00:06:59,670 --> 00:07:04,710
need to think through some of our very benign decisions when we start putting together the initial design

113
00:07:04,710 --> 00:07:05,060
of rap.

114
00:07:05,620 --> 00:07:06,960
OK, enough of me grandstanding, though.

115
00:07:06,990 --> 00:07:08,430
Let's take a look at what we're going to do.

116
00:07:09,590 --> 00:07:16,490
OK, so right now we've got a system that's kind of like this, we are saying that we've got a Texel

117
00:07:16,490 --> 00:07:21,830
or a code cell, whatever, and right above it we are showing the ad cell component and we are applying

118
00:07:21,830 --> 00:07:24,020
a key to that entire block right there.

119
00:07:25,200 --> 00:07:29,400
The reason that we have set everything up like this is because we have an action creator called insert

120
00:07:29,400 --> 00:07:30,620
cell before.

121
00:07:31,380 --> 00:07:38,430
So if I click on plus text right here, that means I want to insert a cell before this cell.

122
00:07:40,430 --> 00:07:45,530
That entire paradigm totally makes sense, even for the last abseiled down here, if I click on less

123
00:07:45,530 --> 00:07:50,210
text right there, I'm saying insert cell before null, which remember, we kind of interpreted as meaning

124
00:07:50,540 --> 00:07:52,730
added at a new cell down to the very bottom.

125
00:07:53,610 --> 00:07:55,230
So here's how we're going to do to solve this.

126
00:07:55,500 --> 00:08:01,560
We're going to invert that entire paradigm instead of having an action creator called insert cell before

127
00:08:01,770 --> 00:08:05,010
we're going to instead do insert cell after.

128
00:08:06,240 --> 00:08:11,220
The net effect of this is that we're also going to make sure that whenever we render out one of these

129
00:08:11,220 --> 00:08:17,790
list items, rather than showing a action bars ad sell on top of the Texel, we're going to flip that

130
00:08:17,790 --> 00:08:18,210
as well.

131
00:08:18,870 --> 00:08:24,980
So we're going to say that the very first ad cell in our list is going to be the one without a key or

132
00:08:25,000 --> 00:08:27,680
something, the one without any ID or any companion cell.

133
00:08:28,440 --> 00:08:33,690
And for every other cell we have, we're going to first show the cell and then the ad cell component.

134
00:08:37,330 --> 00:08:41,919
Let's think about what happens if we click on, say, plus text for the bottom one right here and we

135
00:08:41,919 --> 00:08:45,220
are in this kind of world of insert cell after.

136
00:08:46,250 --> 00:08:51,860
If I click on this thing right here and I try to insert a cell after this point, that means that I'm

137
00:08:51,860 --> 00:08:55,600
going to create a brand new cell and show it down here.

138
00:08:56,240 --> 00:08:58,070
This new one will have a brand new key.

139
00:08:58,070 --> 00:08:59,560
So maybe something like.

140
00:09:01,570 --> 00:09:05,680
But the element that I had originally clicked on, the one right here, it stays right there, I'm not

141
00:09:05,680 --> 00:09:07,240
shifting anything down the dumb.

142
00:09:07,570 --> 00:09:11,950
Instead, I'm adding in a new element below what I'm currently hovering over.

143
00:09:12,890 --> 00:09:16,850
So because I'm not shifting this thing down the dam, it's not going to fade out, it's not going to

144
00:09:17,090 --> 00:09:20,890
fade out down here, the new one that is inserted right here isn't going to suddenly fade in.

145
00:09:20,930 --> 00:09:23,190
We completely sidestep this entire issue.

146
00:09:23,870 --> 00:09:29,200
This also will work directly for the very first element up here, the one that does not have a key to

147
00:09:29,330 --> 00:09:32,810
the one where we would presumably call insert cell after with null.

148
00:09:33,720 --> 00:09:38,220
So if I click on plus text right there, again, I'm not shifting this element around on the screen

149
00:09:38,370 --> 00:09:43,410
and said instead I'm going to add in a brand new one right after it.

150
00:09:44,160 --> 00:09:46,810
So because I'm not shifting this thing, nothing is going to fade out.

151
00:09:46,830 --> 00:09:47,810
Nothing's going to fade in.

152
00:09:48,000 --> 00:09:49,460
We completely solve this issue.

153
00:09:50,300 --> 00:09:54,500
So that's pretty much it, that's how we're going to solve this problem instead of doing an insert cell

154
00:09:54,500 --> 00:09:57,740
before we're going to do an insert cell after.

155
00:09:58,570 --> 00:10:02,590
When we originally we're talking about these different action creators, this seemed like a really benign

156
00:10:02,590 --> 00:10:03,000
decision.

157
00:10:03,010 --> 00:10:07,150
It seemed like, hey, do we want to insert a cell before or after and doesn't make a difference?

158
00:10:07,150 --> 00:10:07,600
Who cares?

159
00:10:07,870 --> 00:10:12,020
Well, here's a great example of yes, it does, in fact, make a difference.

160
00:10:12,490 --> 00:10:16,540
So the takeaway here is that whenever we are adding elements into a list, we want to have these kind

161
00:10:16,540 --> 00:10:20,260
of like things in between that we can use to add in new records.

162
00:10:20,410 --> 00:10:26,890
Generally using a pattern of inserting after that point is the way to go as opposed to insert before,

163
00:10:27,160 --> 00:10:30,490
because if you do an insert before, you're going to very quickly start to run into these really weird

164
00:10:30,490 --> 00:10:34,990
issues, not only around success, but there might be some other issues that we're just not quite seeing

165
00:10:34,990 --> 00:10:36,000
right here right away.

166
00:10:36,890 --> 00:10:41,840
OK, so again, I apologize for not just doing the right thing earlier when we were originally putting

167
00:10:41,840 --> 00:10:46,040
together all of our reduc stuff, but I just really want you to see this whole problem, understand

168
00:10:46,040 --> 00:10:47,540
why it came up, see the entire thing.

169
00:10:47,720 --> 00:10:52,030
And I wanted to go through the refactored together and understand how we could fix all this stuff up.

170
00:10:52,640 --> 00:10:53,840
So let's take a pause right here.

171
00:10:53,870 --> 00:10:57,050
We're going to start to refactor that action creator in the next video.