1 00:00:02,130 --> 00:00:05,560 So we need to call add project from inside the project list 2 00:00:05,590 --> 00:00:07,500 but and that's the tricky part, in 3 00:00:07,620 --> 00:00:14,370 another instance. So we can't use this here this add project because this would call it in the same instance. 4 00:00:14,370 --> 00:00:16,650 So what can we do regarding that? 5 00:00:16,650 --> 00:00:22,560 Well we can use an approach which we haven't really used before but we learned about it and that's a callback 6 00:00:22,560 --> 00:00:25,030 function, we can use a callback function. 7 00:00:25,200 --> 00:00:31,290 We can expect that for example on the constructor here, we get a second argument, not just a type of this 8 00:00:31,290 --> 00:00:38,910 list but also the switch handler function you could say, we can name it switch handler function and 9 00:00:38,910 --> 00:00:43,100 now we can store this in a property here, 10 00:00:43,170 --> 00:00:50,870 this switch handler maybe is equal to switch handler function. 11 00:00:51,080 --> 00:00:56,840 By the way, I now also want to store the type here in a property and now with the switch handler function 12 00:00:56,840 --> 00:01:04,530 stored here, this should actually be a pointer at a function, we can call this switch handler, 13 00:01:04,540 --> 00:01:12,340 that's my property name here in switch project and then here, for example pass the project which we 14 00:01:12,340 --> 00:01:18,610 want to switch which we can get by reaching out to our projects array and there, with find, not find index 15 00:01:18,640 --> 00:01:25,830 but find we can get the object for a given criteria which we pass in this anonymous function and there, 16 00:01:25,840 --> 00:01:30,760 I'm interested in the project where the ID is equal to the project ID. 17 00:01:30,820 --> 00:01:33,420 So now we pass that project to switch handler, 18 00:01:33,430 --> 00:01:34,860 now the question just is 19 00:01:35,050 --> 00:01:36,910 what is the switch handler function? 20 00:01:36,910 --> 00:01:38,270 Where's this coming from? 21 00:01:38,290 --> 00:01:43,300 We're receiving it here in the constructor but right now of course down there, where we instantiate project 22 00:01:43,300 --> 00:01:45,910 list, we're not passing anything in there. 23 00:01:45,940 --> 00:01:48,100 Well that's the thing which we have to do now, 24 00:01:48,160 --> 00:01:49,540 I want to pass something in there, 25 00:01:49,540 --> 00:01:54,490 so as a second argument to the constructor and the thing which you want to pass in there, that can be 26 00:01:54,490 --> 00:01:55,340 a tricky part. 27 00:01:55,510 --> 00:02:03,490 I want to pass in a function which is part of the other instance and therefore we actually can't use the 28 00:02:03,490 --> 00:02:08,880 constructor because we need both instances to be finished to be able to reach out to them. 29 00:02:08,920 --> 00:02:15,370 So let's adjust this a tiny bit, get rid of that constructor argument, cut this line, leave the type assignment 30 00:02:15,370 --> 00:02:24,070 here though and add a new method, set switch handler function for example, any name of your choice and 31 00:02:24,070 --> 00:02:29,650 there, add this logic which you just cut, also accept this argument of course and now we can call that 32 00:02:29,650 --> 00:02:30,670 on our instances. 33 00:02:30,670 --> 00:02:36,790 So down here where we create the instances, for example on the active projects list, we can call set 34 00:02:36,790 --> 00:02:42,510 switch handler function and now we can define which function should be called when we in the end then 35 00:02:42,520 --> 00:02:44,750 call this property as we do it here 36 00:02:44,890 --> 00:02:50,530 and this should be add project in the other instance because that will then allow us to here add the 37 00:02:50,530 --> 00:02:55,900 logic to receive a project and add it in that instance of project list. 38 00:02:55,900 --> 00:03:01,480 So here, I want to point at finished project list because I'm setting this up for the active projects 39 00:03:01,480 --> 00:03:01,910 list, 40 00:03:02,020 --> 00:03:07,040 so I'll point at finished projects list, add project at this function. 41 00:03:07,110 --> 00:03:12,330 I don't execute the function here, I don't add parentheses, I just point at the function with that function 42 00:03:12,330 --> 00:03:18,000 name just as we do it on an event listener for example because this function will be executed on our 43 00:03:18,000 --> 00:03:26,180 behalf, it will be executed by this line here. Now one important thing we'll have to do here is we'll 44 00:03:26,180 --> 00:03:34,040 have to bind this inside of that receiving function though, we'll have to bind it to finished projects 45 00:03:34,040 --> 00:03:40,660 list in this case because since we'll be calling this add project function effectively with this line, 46 00:03:40,820 --> 00:03:46,210 this inside of add project would normally refer to the same thing this refers to here 47 00:03:46,310 --> 00:03:47,810 and that would be the wrong instance 48 00:03:47,810 --> 00:03:48,010 right 49 00:03:48,020 --> 00:03:49,940 because we're calling this on the other instance, 50 00:03:49,940 --> 00:03:56,660 so we have to bind this in add project to that instance where we want it to execute and not from where 51 00:03:56,690 --> 00:03:58,220 we call it. 52 00:03:58,430 --> 00:04:04,960 And then we can basically copy that and now replace active projects list with finished projects list 53 00:04:05,000 --> 00:04:10,140 and on the other hand replace finished projects list here with active projects list 54 00:04:10,340 --> 00:04:17,800 and now we got this set up and just to show you what I mean here, we can now console log this here inside 55 00:04:17,810 --> 00:04:25,520 of add project to see when this runs. To see something though, we'll need to do one final thing, switch 56 00:04:25,520 --> 00:04:26,720 project here, 57 00:04:26,810 --> 00:04:33,350 that is something we now need to connect to our event listener here which we in turn have in project 58 00:04:33,410 --> 00:04:34,250 item. 59 00:04:34,250 --> 00:04:41,330 Now in order to be able to call a method from project list inside of project item, we also have to make 60 00:04:41,330 --> 00:04:48,080 sure we get this method into project item and we can use the constructor for this and accept a second 61 00:04:48,110 --> 00:04:55,700 argument which we maybe could call update project lists and then store this here in a property, update 62 00:04:55,700 --> 00:05:02,840 project list is equal to update project lists or maybe call this update project lists function to make 63 00:05:02,840 --> 00:05:12,380 it clear that this is a function and here, add handler at the end to be consistent with the naming and 64 00:05:12,380 --> 00:05:19,150 now this will be expected to point at a function because I'll pass in the second argument to project 65 00:05:19,180 --> 00:05:28,380 item here when we create a project item here in project list and there, I want to pass it in switch project. 66 00:05:29,460 --> 00:05:39,080 So here, we can pass in this switch project, important here we need to bind this so that this inside of 67 00:05:39,080 --> 00:05:47,030 switch project refers to this class here and not to project item or to the event source to be precise because 68 00:05:47,030 --> 00:05:55,910 now, I'll bind this event listener to this update project list handler which in the end will then just 69 00:05:55,940 --> 00:06:02,960 execute whatever we pass in here, so which in the end will execute the switch project method. Now passing 70 00:06:02,960 --> 00:06:08,390 around all these references can be confusing, I am aware of this, it is a way of ensuring that our classes 71 00:06:08,420 --> 00:06:13,640 or our instances can communicate with each other and for example you can use the debugging tools which 72 00:06:13,640 --> 00:06:19,640 I showed you in the debugging section and set some breakpoints to better understand the flow of information 73 00:06:19,640 --> 00:06:25,070 here if you're having problems following along with that. For now if we save that and we reload and we 74 00:06:25,070 --> 00:06:32,420 click on finish, we see this being logged right because I am logging this here in add project and that's 75 00:06:32,420 --> 00:06:38,120 in the end what's getting called here and there we see OK, this now was called in the finished list even 76 00:06:38,120 --> 00:06:43,250 though I clicked on it here in the active projects list and this proves that our logic works because 77 00:06:43,250 --> 00:06:48,700 now we want to add it in the finished projects list and therefore add project should run into finished 78 00:06:48,710 --> 00:06:49,700 projects lists, 79 00:06:49,700 --> 00:06:56,180 so this is working. The next step is now to ensure that we add logic here to indeed add that project 80 00:06:56,230 --> 00:07:00,350 in the finished project list and we also move the DOM element of course.