Challenge 2: Solution

[00:00:00]
>> Mike North: So welcome back. We are going to go through two refactoring exercises. First what we’re gonna do is, we're going to rename two functions. We’re gonna do it in such a way where we are kind of focused on one file. And we can change the name of a symbol.

[00:00:14]
In this case, the name of a function and this will work across our whole project. This will work in most cases. We've seen at least one where it didn't quite catch something. Where we were having functions that were bound to dom events through the render function of a react component.

[00:00:33]
But for your vanilla JavaScript stuff, this should work pretty nicely. The second thing we're gonna do is, we're basically gonna change the structure of an argument. We're gonna change a convention that sort of deals with how two pieces of our code communicate. Normally, you'd have to do a lot of searching by string to find like, who is invoking this function and what are they passing along?

[00:01:01]
And is this the same fire function that we were talking earlier or is this something different? So we're gonna see if we can showcase two refactoring tasks and see what VS Code does for us. Let's go to this listener-support file. The first thing we want to do is register and un-register.

[00:01:19]
We want to rename this. I am gonna open up my sidebar here, and go back to this explorer view. So here, just so we can see any files that may pop-up here, as a result of what we are doing. I am gonna select register and I am just gonna hit F2.

[00:01:37]
And what this is doing is gonna let me rename this function across all files.
>> Mike North: You can see over here on the left, these three things popped up. They're basically unsaved files with modifications. It's my job to go through and make sure that they look reasonable. Before I do I'm gonna hit F2 here.

[00:01:57]
And I'm gonna say unregister(listener), so we can get both at once. So this file looks good, I made these changes explicitly, let's look over here. We will use as a guide. The little like coloration of the scroll bar I would say, right. So we've got these two little blue chunks.

[00:02:18]
Those represent modifications. You can see here is our register and unregister. I just dove into the definition there. In this case, for react people you will note that I am not unregistering these ever. It's because this component is never torn down. So typically you would want that symmetry.

[00:02:38]
This one's always on the screen. So those look good. I'll save this file, and I'm just going through this kind of like to do list. Saving the file when I'm happy with the way that this works. Okay, so here's my register listener. That looks good. I should probably be tearing that down as well, but no worry.

[00:02:54]
We don't really have multiple routes in this app, so this is always on the screen too. Okay, and the last one here, we've got a category row. Here, these do come on and off the screen potentially, and so we've got our register and our unregister and those both look good to me.

[00:03:12]
So we can save those, and over here I'm actually gonna close these tabs like this. Close, close, close, all right. So that's task number one. We're done with that. Task number two involves basically finding everyone who's using a function and making a little change to it, so that we're altering the form of argument that is passed to a function.

[00:03:39]
So all parties who are calling this function must be touched up a little bit. So we'll dive back into this file, listener support, and we can get rid of this for now. And let's like at fire, and we're gonna right click on this. And I'm gonna find all references, and we're basically gonna use our ability to change code right within the peak editor here, to make all of our necessary changes.

[00:04:05]
Now you can see one of these is sort of the definition of the function itself. So that counts as a reference, it is where it's defined. But these other three, we will need change a little bit. And all we're gonna do is wrap this, in an object. Like that, we can save it.

[00:04:25]
And we'll go over here, in the grocery item store.
>> Mike North: Save it.
>> Mike North: Just change all of these, it's really easy, cuz it is basically our to-do list. And then the last one.
>> Mike North: All right, and now the last thing we have to do is, we said we shouldn't really alter what is parsed to each of these listeners we just have to do something like that.

[00:04:56]
Payload.data, so that the call backs that we register, those are all getting exactly the same thing that they have been getting. We've sort of through making this set of changes, which was, I mean let's admit it relatively painless. We have altered the form of an argument while leaving as much of our other code as possible relatively intact.

[00:05:17]
So this would be a great thing where like, this would be a small commit that you could make. That is one complete change in isolation. Save that. Let's refresh. Our app should still work if it's in the foreground.
>> Mike North: Maybe I forgot something, let's see. Do we have a JavaScript error?

[00:05:39]
Do, do, do, cannot read map of undefined.
>> Mike North: Interesting.
>> Mike North: Categories, it's like something didn't take. Maybe I have an unsaved file, I do. Here it is.
>> Mike North: So here this wasn't saved for some reason. Let's bring back my sidebar, I do need to save all this, sorry.

[00:06:11]
And now it should work. And it does. So really, really nice. This peak editor lets you kind of work within this file, the listener support file, focus on that one function, and then open up in a little sub window like all of the things that are using this and go through one by one and make those alterations.

[00:06:32]
Much, much easier than like, opening up seven different tabs and making sure that that's the correct function. And is this the right module? Like all of that work is done for you. All of that work is why they're showing up as references and not just sort of this less Robust, like search panel on the left.

[00:06:52]
Where we're just searching simply for string match. This is not a string match. This takes the structure of your code into account. The modules into account. The types into account.