1 00:00:00,970 --> 00:00:03,520 We're not going to add in some more code to our link component. 2 00:00:03,840 --> 00:00:04,900 Never user clicks on it. 3 00:00:05,140 --> 00:00:07,240 We're going to emit a navigation event. 4 00:00:07,600 --> 00:00:11,080 This navigation event is going to be sent over to all of our different root components. 5 00:00:11,410 --> 00:00:14,710 So this is how we're going to tell our root components that the URL has just changed. 6 00:00:15,630 --> 00:00:19,770 So back inside my editor, I'm still the link dodgiest file inside of here. 7 00:00:20,040 --> 00:00:21,190 We're going to add in some code. 8 00:00:21,240 --> 00:00:25,380 Right after we update that you are out, the code that we're going to write is going to look a little 9 00:00:25,380 --> 00:00:26,160 bit mysterious. 10 00:00:26,520 --> 00:00:27,870 Don't worry about the code too much. 11 00:00:27,960 --> 00:00:32,810 All you need to understand is that the purpose of this code is to tell those dropdown components that 12 00:00:32,820 --> 00:00:37,110 some data just changed or specifically that the euro you are l just changed. 13 00:00:37,950 --> 00:00:44,430 So we're going to put inside of your Unst navvy event is new up state event and we're going to provide 14 00:00:44,430 --> 00:00:45,810 a string of pop state. 15 00:00:48,130 --> 00:00:53,320 We'll then call window dot dispatch event and provide that KNAB event. 16 00:00:54,250 --> 00:00:56,770 So, again, what this does not superimportant. 17 00:00:57,310 --> 00:01:01,450 All you need to understand is that this is going to communicate over to those root components that the 18 00:01:01,450 --> 00:01:02,650 Earl has just changed. 19 00:01:04,290 --> 00:01:09,440 Let's save this file, we're then going to go over to our root component and add some code inside there 20 00:01:09,680 --> 00:01:11,300 to listen for this event. 21 00:01:12,320 --> 00:01:14,300 So I going to go over to my rooftop JSF file. 22 00:01:15,280 --> 00:01:19,210 We have to set up a root handler inside there to listen for that event, we just dispatch. 23 00:01:19,900 --> 00:01:24,430 Meantime, we set up an event event listener inside of a component that's usually a sign that we need 24 00:01:24,430 --> 00:01:25,900 to define a you state hook. 25 00:01:26,750 --> 00:01:27,700 So I'm going to import. 26 00:01:28,850 --> 00:01:29,900 You state at the top. 27 00:01:32,110 --> 00:01:33,500 And then inside the component self. 28 00:01:34,570 --> 00:01:36,310 I will call use effect. 29 00:01:37,360 --> 00:01:41,920 Now, quick reminder on event handlers that we wire up manually inside of a component. 30 00:01:42,730 --> 00:01:48,370 Usually we only want to run that event handler one time or wire it up, kind of start listening one 31 00:01:48,370 --> 00:01:48,730 time. 32 00:01:49,330 --> 00:01:53,920 So that is usually a sign that inside of use effect, we want to provide a second argument of an empty 33 00:01:53,920 --> 00:01:54,250 array. 34 00:01:54,670 --> 00:01:58,930 So we only run that function right there when this component is first rendered to the screen. 35 00:01:59,970 --> 00:02:02,670 Then inside of here, we can start to wire up an event listener. 36 00:02:03,440 --> 00:02:08,070 I'm going to call window, not add event listener. 37 00:02:08,790 --> 00:02:13,510 We're going to listen for an event listener of four for an event of pop state. 38 00:02:14,540 --> 00:02:19,970 And anytime that occurs, I want to run a function that we're going to call on location change. 39 00:02:21,280 --> 00:02:23,080 I'm not going to define that function right above. 40 00:02:26,240 --> 00:02:31,100 Right now, inside, they're going to do a simple console log of location change. 41 00:02:32,460 --> 00:02:36,660 I might be curious why my defining this callback function as a separate variable? 42 00:02:37,080 --> 00:02:41,400 Well, again, remember, if we ever decide to stop showing you the root component on the screen, we 43 00:02:41,400 --> 00:02:43,590 would want to make sure that we clean up this event. 44 00:02:43,590 --> 00:02:44,010 Listener. 45 00:02:44,670 --> 00:02:50,040 So I want to make sure that from this use effect function, I return a cleanup function and inside there 46 00:02:50,100 --> 00:02:51,480 we will remove that event. 47 00:02:51,480 --> 00:02:51,900 Listener. 48 00:02:51,960 --> 00:02:55,790 So window dot remove event listener upstate's. 49 00:02:56,430 --> 00:02:58,410 And on location change. 50 00:02:59,010 --> 00:03:03,510 That is why we defined the callback as a separate function just so we could very easily remove it a 51 00:03:03,510 --> 00:03:04,320 little bit later on. 52 00:03:07,300 --> 00:03:07,540 OK. 53 00:03:07,660 --> 00:03:10,870 Let's save this and then go back over to our browser and test it out. 54 00:03:12,310 --> 00:03:13,790 We got to import these affect. 55 00:03:14,250 --> 00:03:15,700 I accidentally imported you state. 56 00:03:15,760 --> 00:03:17,020 Let me update that really quickly. 57 00:03:17,770 --> 00:03:18,310 That's better. 58 00:03:19,360 --> 00:03:20,950 OK, so now whenever we click on a link. 59 00:03:22,710 --> 00:03:27,450 We should see that consoles disappear inside of our console every single time I click on a link. 60 00:03:27,480 --> 00:03:32,340 I get four separate console logs because we have four copies of the root component right now in each 61 00:03:32,340 --> 00:03:34,470 of them is listening for that navigation event. 62 00:03:35,170 --> 00:03:40,310 So this means that we can update the URL and detect that has been updated inside of a root component 63 00:03:40,310 --> 00:03:40,670 as well. 64 00:03:41,780 --> 00:03:46,310 The very last thing we really have to do now, we need to make sure that any time that Eurail does get 65 00:03:46,310 --> 00:03:52,010 change the right component updates some piece of state which will cause the root component to re render. 66 00:03:52,430 --> 00:03:57,560 And that would be our opportunity to decide whether or not we want to now hide or show the component 67 00:03:57,560 --> 00:03:58,790 that the root is displaying. 68 00:03:59,660 --> 00:04:01,460 Let's take her that last step in just a moment.