1
00:00:01,090 --> 00:00:05,560
The ADL component is looking pretty good, and now we need to show it on the screen, we've really got

2
00:00:05,560 --> 00:00:06,580
two options here.

3
00:00:06,640 --> 00:00:12,490
We can either show ADL inside of our cell list item component or alternatively, we could show it inside

4
00:00:12,490 --> 00:00:17,860
of cell list to member cell list is iterating over all of our different cells and displaying one copy

5
00:00:17,860 --> 00:00:21,610
of cell list item list items responsible for showing one individual cell.

6
00:00:22,330 --> 00:00:27,220
Now, you might initially think that we should show add cell inside of cell list item because we kind

7
00:00:27,220 --> 00:00:29,350
of have a one to one pairing almost.

8
00:00:30,250 --> 00:00:35,380
By that, I mean to say that we've got one add cell component for every cell that we're trying to display,

9
00:00:35,800 --> 00:00:37,630
they're showing inside of cell list item.

10
00:00:37,840 --> 00:00:43,300
Yeah, it might make sense, but the one thing that kind of points us to adding the add cell component

11
00:00:43,300 --> 00:00:48,280
to cell list instead is the fact that we have to show this extra last one down here at the very bottom.

12
00:00:49,060 --> 00:00:54,910
Adding this in cannot really be done effectively inside of our cell list item component because list

13
00:00:54,910 --> 00:01:00,140
item is always going to try to show exactly one of these add cells for every cell.

14
00:01:00,760 --> 00:01:03,540
We do not want to have just one add cell for every cell.

15
00:01:03,550 --> 00:01:09,130
Instead, we want to have equal to the number of cells plus one, this additional one at the very bottom.

16
00:01:09,990 --> 00:01:14,770
Showing this last additional one is going to be a lot easier to do if we take care of all this ad sell

17
00:01:14,790 --> 00:01:17,040
stuff inside of our sell list component.

18
00:01:17,610 --> 00:01:19,080
So let's go over to Celeste.

19
00:01:22,710 --> 00:01:26,160
At the very top, we're going to import and sell.

20
00:01:27,120 --> 00:01:28,230
From ADL.

21
00:01:29,520 --> 00:01:32,730
I'll then find where we map over our list of cells right here.

22
00:01:34,130 --> 00:01:37,190
I'm going to wrap so list item in a fragment.

23
00:01:39,320 --> 00:01:46,370
And then right above Celeste item, I will display ad sell, this, of course, needs a prop of next

24
00:01:46,370 --> 00:01:48,620
slide, so I'll make sure I provide that.

25
00:01:50,110 --> 00:01:55,630
And the next slide is going to be this sells ID, it will just put in sell ID like so.

26
00:01:57,000 --> 00:02:02,100
We can then also take care of showing an ad absolute instance at the very end of our list as well by

27
00:02:02,100 --> 00:02:04,830
just directly inserting it after our rendered cells.

28
00:02:05,750 --> 00:02:07,130
So I'm going to expand that div.

29
00:02:09,020 --> 00:02:16,490
And after rendered cells, I will add in add cell and then in this case, our next cell ID is going

30
00:02:16,490 --> 00:02:17,300
to be null.

31
00:02:18,560 --> 00:02:24,170
It looks like we might have messed up or I should say I messed up the crop type definition or next slide

32
00:02:24,170 --> 00:02:26,270
because I'm getting an error here around providing a value of.

33
00:02:26,870 --> 00:02:30,110
So let's go back over to add cell very quickly and just make sure we clarify and say that we should

34
00:02:30,110 --> 00:02:32,810
be allowed to provide a next slide of null.

35
00:02:33,830 --> 00:02:35,720
OK, so here's Asselborn.

36
00:02:36,740 --> 00:02:40,160
Yep, sure enough, I put in string just a really big string or no.

37
00:02:43,320 --> 00:02:47,970
Now, as soon as I have that, I get another air coming from insert cell before, so it looks like I

38
00:02:47,970 --> 00:02:52,880
also made a mistake over there as well, or the action creator itself.

39
00:02:52,890 --> 00:02:56,540
It looks like I'm expecting to always receive a I.D. that is a string.

40
00:02:56,940 --> 00:02:59,540
And again, that should really be either a string or null.

41
00:02:59,940 --> 00:03:01,890
Let's go fix up that action creator as well.

42
00:03:03,230 --> 00:03:06,830
Inside of my state directory, I'll find action Krieger's index dots.

43
00:03:08,320 --> 00:03:14,260
I'm going to find our insert sell action creator here it is right here and again, rather than saying

44
00:03:14,260 --> 00:03:16,810
this is always going to be a string, should be string or null.

45
00:03:17,230 --> 00:03:19,060
Again, little mistake on my part.

46
00:03:20,600 --> 00:03:25,610
OK, so I'm going to save all these changes, I don't see any more typescript errors, I'll then go

47
00:03:25,610 --> 00:03:31,010
back over to my browser to a quick refresh and now I should see our ad cell components.

48
00:03:31,550 --> 00:03:34,130
I see one at the very top before a cell.

49
00:03:34,670 --> 00:03:38,480
I see additional ad cell components between all other cells.

50
00:03:38,960 --> 00:03:42,730
And then I should also see an ad cell down there at the very bottom as well.

51
00:03:43,460 --> 00:03:45,080
Looks like I might have a ER as well.

52
00:03:45,080 --> 00:03:45,250
Some.

53
00:03:45,260 --> 00:03:47,930
Let me just open up my console, take a look at what that is.

54
00:03:50,870 --> 00:03:54,470
Oh, completely forgot to add on that Kiprop will take care of that in just a moment.

55
00:03:54,500 --> 00:03:55,010
Totally fine.

56
00:03:56,210 --> 00:04:00,530
Really quickly, let's try to add in some additional cells, I'm going to first try to add in a tech

57
00:04:00,540 --> 00:04:00,870
cell.

58
00:04:01,430 --> 00:04:02,690
Hey, it looks like that works.

59
00:04:03,000 --> 00:04:05,390
I can also try to add in a code cell at the very start.

60
00:04:05,570 --> 00:04:06,890
It looks like that works as well.

61
00:04:07,700 --> 00:04:12,440
I should also be able to go down to the very bottom of our list, add in a code cell at the very bottom,

62
00:04:13,160 --> 00:04:15,250
add in a tech cell at the very bottom.

63
00:04:16,010 --> 00:04:17,720
Yeah, I'd say this is working out pretty well.

64
00:04:18,760 --> 00:04:22,880
Well, of course, we definitely need to work on our styling just a little bit and we need to resolve

65
00:04:22,880 --> 00:04:25,580
this morning, but I'd say overall this is going pretty well.

66
00:04:26,210 --> 00:04:29,380
Let's take a pause right here and continue working on ad sell in just a moment.