1
00:00:02,120 --> 00:00:05,530
Now regarding the logic to add a project here,

2
00:00:05,830 --> 00:00:11,020
first of all we have to accept the project here as an argument because we will be receiving it. In the

3
00:00:11,020 --> 00:00:15,610
end, we're calling add project over a couple of corners in this line

4
00:00:15,610 --> 00:00:18,040
and here we're passing a project to this function.

5
00:00:18,070 --> 00:00:22,090
So since we effectively call add project there, we should accept the project here.

6
00:00:22,310 --> 00:00:25,520
Now to add it in this list where this is getting called,

7
00:00:25,540 --> 00:00:31,420
we can of course reach out to the projects array there and push project onto it.

8
00:00:31,420 --> 00:00:32,230
Now that's the first step,

9
00:00:32,230 --> 00:00:37,690
now we moved it in Javascript from the array in instance A to the array an instance B,

10
00:00:37,810 --> 00:00:42,820
so from the array in active projects to the array in finished projects for example.

11
00:00:42,820 --> 00:00:45,630
That's the first step but it's not the final step,

12
00:00:45,640 --> 00:00:49,080
we also need to move the DOM node of course

13
00:00:49,570 --> 00:00:52,070
and for that we could add the logic here

14
00:00:52,210 --> 00:00:58,810
right in this method but actually I will create a new class also to demonstrate more examples for classes

15
00:00:58,810 --> 00:01:06,640
of course and I'll name it helper or DOM helper because I want to outsource this DOM logic, in this

16
00:01:06,640 --> 00:01:13,630
case into this class, with a static method which I'll name move element and move element should take

17
00:01:13,630 --> 00:01:21,670
the element ID of the element that should be moved and the new destination selector let's say, so that

18
00:01:21,730 --> 00:01:27,490
in move element we can reach out to the element and store it in a constant with document get element

19
00:01:27,970 --> 00:01:38,800
by ID, passing in element ID and then get the destination element with document query selector

20
00:01:39,010 --> 00:01:46,020
and pass in the new destination selector argument and then we can use the destination element and in

21
00:01:46,030 --> 00:01:49,180
the end, append element and as you learned,

22
00:01:49,390 --> 00:01:54,490
if you're doing this to a DOM node that's already part of the DOM and you're appending it again in

23
00:01:54,490 --> 00:01:59,230
another place of the DOM, then it will not be copied or anything like that, it will be moved which is

24
00:01:59,230 --> 00:02:00,930
exactly what I want here.

25
00:02:00,970 --> 00:02:06,370
So with that, we should be moving that element and therefore now if we go down to add project, we can use

26
00:02:06,370 --> 00:02:12,790
helper and then since we created a static method there, we can call move element and pass in project

27
00:02:12,790 --> 00:02:20,180
ID which in the end is my element ID I want to move and the new destination selector, that can be

28
00:02:20,180 --> 00:02:26,060
created with back ticks so that we can insert something dynamic there because in the end here, I want

29
00:02:26,060 --> 00:02:33,010
to move this to a selector where we select that ID and then the dynamic thing is this type which is a

30
00:02:33,250 --> 00:02:35,680
property of project list,

31
00:02:35,680 --> 00:02:42,030
so for the active list, that's active, for the finished list, that's finished -projects ul, so I

32
00:02:42,050 --> 00:02:47,560
want to select the unordered list in the section for the finished or the active projects and this should

33
00:02:47,560 --> 00:02:49,190
move the DOM node.

34
00:02:49,300 --> 00:02:51,160
So with that, we're almost there,

35
00:02:51,160 --> 00:02:54,760
I just noticed of course it's not called helper but DOM helper

36
00:02:54,760 --> 00:03:02,220
but now with that if we save that and we reload this page and I click on finish, we see cannot read property

37
00:03:02,220 --> 00:03:03,600
ID of undefined.

38
00:03:03,600 --> 00:03:09,030
So something's wrong with the project here because I'm getting this from line 48 as you can tell,

39
00:03:09,030 --> 00:03:10,230
so this is this line,

40
00:03:10,230 --> 00:03:12,330
so reading the ID here doesn't work.

41
00:03:12,570 --> 00:03:14,460
So let's console log the project,

42
00:03:14,460 --> 00:03:20,490
alternatively we could of course also use breakpoints to see what's inside of that thing and yes, it's

43
00:03:20,490 --> 00:03:23,730
undefined. So we're not getting our parameter,

44
00:03:23,730 --> 00:03:24,990
that's the issue here.

45
00:03:24,990 --> 00:03:30,210
Now let's find out why that could be the case because here where I call switch handler which in the

46
00:03:30,210 --> 00:03:36,800
end due to our set up should be pointing at add project, there I am passing in a project,

47
00:03:36,810 --> 00:03:43,260
so unless this selection fails here, we should be forwarding a project. Well to find out whether that

48
00:03:43,260 --> 00:03:49,420
fails, we can quickly console log our selection logic here and see if that gives us an item.

49
00:03:49,650 --> 00:03:53,180
So if you click this, OK we get undefined here already,

50
00:03:53,250 --> 00:04:00,600
so selecting a project in the projects array like that, that fails. Let's see if we don't get a project

51
00:04:00,630 --> 00:04:03,300
ID, that probably is the reason,

52
00:04:03,300 --> 00:04:04,230
so if we reload,

53
00:04:04,770 --> 00:04:05,120
yes

54
00:04:05,160 --> 00:04:10,110
instead this points at some strange mouse event object, let's ignore that for the moment.

55
00:04:10,140 --> 00:04:14,220
So indeed the problem here is that we got no ID.

56
00:04:14,760 --> 00:04:21,060
So if we have a look at where we call switch project, it's here and there we bind this and we pass switch

57
00:04:21,060 --> 00:04:26,200
project to project item and here in project item where we then accept this

58
00:04:26,310 --> 00:04:32,130
and there we store it in the update projects list handler in the end, there I assign this to this event

59
00:04:32,130 --> 00:04:33,030
listener

60
00:04:33,030 --> 00:04:40,500
and here we probably have our problem because here, I'm not passing in the ID of the project and we

61
00:04:40,500 --> 00:04:41,830
should be doing this.

62
00:04:41,940 --> 00:04:46,470
So I should bind this here, we don't need to pass in a value for this,

63
00:04:46,470 --> 00:04:53,940
we can use null here but I want to pass in my argument that should be forwarded and that should be this

64
00:04:54,230 --> 00:04:54,750
ID,

65
00:04:54,780 --> 00:05:01,290
the ID of this project this is getting triggered on, so that the ID in the end ends up here in switch project

66
00:05:01,680 --> 00:05:05,930
and that therefore allows us to select a project and pass it to add project.

67
00:05:06,220 --> 00:05:09,510
So now with that, let's give it a try, let's save this and it worked,

68
00:05:09,510 --> 00:05:13,700
you see we moved it down there. Now a couple of things are not working yet though,

69
00:05:13,710 --> 00:05:19,260
for example the button text is not updated and in addition if we click the button again, we now have

70
00:05:19,260 --> 00:05:20,060
a problem.

71
00:05:20,070 --> 00:05:26,520
The reason for that problem is that we move the DOM element but we didn't really fully update the lists

72
00:05:26,520 --> 00:05:30,810
or the item correctly to reflect that the item now is part of a different list.

73
00:05:31,880 --> 00:05:36,870
Right now what we're doing is we're making sure we can click that switch button but once we switched

74
00:05:36,870 --> 00:05:38,540
the item one time,

75
00:05:38,540 --> 00:05:44,270
so once we switch it to the other box once, when we try to switch it again, we get an error and it doesn't

76
00:05:44,270 --> 00:05:44,690
work

77
00:05:44,690 --> 00:05:48,170
and of course as I said, the button caption also isn't updated.

78
00:05:48,260 --> 00:05:53,600
Now that error is stemming from the fact that we haven't for example updated the event listener on the

79
00:05:53,600 --> 00:05:55,630
button, it's still the same event listener

80
00:05:55,630 --> 00:06:00,480
we set it to the button on the project item initially when we created that project item.

81
00:06:00,500 --> 00:06:04,700
Now therefore, it's still the same event listener for the list it was in originally,

82
00:06:04,730 --> 00:06:10,610
so if it started in the active projects, it still has the event listener to switch it from active projects

83
00:06:10,640 --> 00:06:14,300
to finished even though the switch just happened.

84
00:06:14,300 --> 00:06:20,420
So what we'll need to do is we need to make sure that when we switch a project, we also update that project

85
00:06:20,720 --> 00:06:25,330
to change the button caption and to add a new event listener.

86
00:06:25,400 --> 00:06:27,980
We probably should do this here in add project,

87
00:06:27,980 --> 00:06:33,920
there we can reach out to the project which we're getting as an argument and we could call an update

88
00:06:33,920 --> 00:06:39,810
method in there which doesn't exist yet but which we can create and to this update method, we should also

89
00:06:39,830 --> 00:06:43,160
probably pass our new switch handler

90
00:06:43,160 --> 00:06:47,720
that should be used because we pass one in when we create the project,

91
00:06:47,720 --> 00:06:54,410
we point at this switch project bind this, we should renew this in add project and pass it to update so

92
00:06:54,410 --> 00:07:00,440
that we can use it in there because when we add a project, that means it switch the lists, it switch

93
00:07:00,440 --> 00:07:06,110
from instance A to instance B and therefore this function to which this project is bound in the end

94
00:07:06,320 --> 00:07:11,930
has to be changed because that still points at the old instance, at instance A, the project now is an instance

95
00:07:11,930 --> 00:07:12,710
B though

96
00:07:12,710 --> 00:07:17,730
so we have to pass in this switch project as it is defined in instance B

97
00:07:17,930 --> 00:07:23,040
otherwise we don't work with the right function that should be called upon a click.

98
00:07:23,150 --> 00:07:29,240
I also want to pass in this type here to let the project know in the update method which we have to

99
00:07:29,240 --> 00:07:32,910
add, in which type of list it is, the active or the finished list,

100
00:07:32,960 --> 00:07:39,140
this will be important for updating the caption off the button. So with that, let's go to project item and

101
00:07:39,230 --> 00:07:46,310
in there, we can add a new method and name it update because that's the name I gave it a couple of lines

102
00:07:46,310 --> 00:07:48,870
below and there, we need to accept two things - 

103
00:07:48,950 --> 00:07:52,050
the update project lists function,

104
00:07:52,280 --> 00:07:55,770
the new one and the type.

105
00:07:55,840 --> 00:08:02,500
Now here in the update method, I want to set this update project list handler,

106
00:08:02,500 --> 00:08:08,560
so just as I'm doing it here in the constructor, equal to update project lists function so that we have

107
00:08:08,560 --> 00:08:12,680
a new function there that's getting used and not the old one.

108
00:08:12,700 --> 00:08:17,650
Now of course we now also need to add the event listener again and therefore I'll call this connect

109
00:08:17,860 --> 00:08:24,220
switch button one more time so that this code runs again and we basically use the new update project

110
00:08:24,220 --> 00:08:28,120
list handler which we set here to set our new event listener.

111
00:08:28,120 --> 00:08:35,170
Now this alone would not work correctly though, if we do that, click on finish, you'll see it works kind

112
00:08:35,170 --> 00:08:41,230
of, it moves it back but we get an error and we actually set up a memory leak here because I'm running

113
00:08:41,230 --> 00:08:45,340
connect switch button again but we'd never cleared the old event listener there,

114
00:08:45,360 --> 00:08:48,490
we added a new one but the old one also still exists.

115
00:08:48,490 --> 00:08:51,710
So we need to get rid of the old event listener first and

116
00:08:52,060 --> 00:08:57,490
for that I'll go back to my DOM helper class here and add a new static method here which I'll name

117
00:08:57,790 --> 00:09:08,380
clear event listeners for an element because such a functionality is not built into Javascript and here,

118
00:09:08,410 --> 00:09:19,240
I'll create a new or a cloned element by using element clone node true to make a deep clone and then

119
00:09:19,240 --> 00:09:23,710
replace the element with replace with, with the cloned element.

120
00:09:23,710 --> 00:09:28,930
So we basically replace the element with itself but since we cloned it and create a brand new one, we

121
00:09:28,930 --> 00:09:33,430
ditch any existing event listeners and they can be garbage collected,

122
00:09:33,520 --> 00:09:36,760
then here I return a cloned element.

123
00:09:36,760 --> 00:09:39,700
So this is a little helper function which in the end swaps the element

124
00:09:39,730 --> 00:09:42,160
and now we can call that from inside

125
00:09:44,540 --> 00:09:49,780
connect switch button in the end because there instead of selecting switch button with a constant, I'll

126
00:09:49,790 --> 00:09:51,310
use a variable

127
00:09:51,380 --> 00:09:59,760
and thereafter always call DOM helper clear event listeners for the switch button and set switch

128
00:09:59,760 --> 00:10:04,460
button equal to the newly returned element this helper function returns.

129
00:10:04,620 --> 00:10:09,070
So this always clears any existing event listeners and makes sure we only add a new one thereafter

130
00:10:09,120 --> 00:10:16,560
and we don't accumulate event listeners over time. So now with now that if we reload, this swapping works without

131
00:10:16,620 --> 00:10:17,730
errors.

132
00:10:17,730 --> 00:10:23,300
Now what's not working is our caption here or it's working but it's not updated correctly.

133
00:10:23,310 --> 00:10:25,970
Well to update it, here in connect switch button,

134
00:10:26,010 --> 00:10:34,380
besides adding the event listener, we can also set switch button text content equal to and then maybe

135
00:10:34,380 --> 00:10:40,410
expect a type here, that we receive a type which helps us find out to what we want to set it, so that

136
00:10:40,410 --> 00:10:43,040
we check if type is equal to active,

137
00:10:43,170 --> 00:10:48,750
if that's the case, then I want to set the label to finish because if we are in the active list, the button

138
00:10:48,750 --> 00:10:56,470
should say finished, to move it to the finished list and otherwise say activate. So that's a change I want to

139
00:10:56,470 --> 00:10:56,920
add here,

140
00:10:56,920 --> 00:11:01,810
now of course that means we need to make sure that type is passed in. It's no problem here in update

141
00:11:01,810 --> 00:11:03,280
because there we get type,

142
00:11:03,280 --> 00:11:08,830
we can just forward that but in the constructor, we at the moment don't know the type,

143
00:11:08,830 --> 00:11:15,010
so here we should also expect to get this as an argument and forward it to connect switch button and in order

144
00:11:15,010 --> 00:11:18,670
to get it as an argument here in the project item constructor,

145
00:11:18,670 --> 00:11:24,400
we can go to project list where we build a project item and there, pass in as a third argument, this

146
00:11:24,400 --> 00:11:29,910
type because here we know in which type of list we are. Now with that

147
00:11:29,910 --> 00:11:37,080
now, if we save that, we can move our items here and the label is also updated.

148
00:11:37,080 --> 00:11:40,950
So now that's this move item from A to B logic finished,

149
00:11:40,950 --> 00:11:45,750
let's now focus on the more info button, though for now this will be relatively trivial because we'll

150
00:11:45,750 --> 00:11:47,370
just output something in the console.