‫To finish this section,
‫let's now create another custom hook called UseKey
‫which will abstract the functionality
‫of attaching and removing an event handler for a key press.
‫So, here, in the movie details component,
‫we have that functionality that if we open a movie
‫and then hit the escape key on our keyboard,
‫then it'll close the movie.
‫And so, we implemented that using a use effect hook.
‫So, this one right here.
‫And so, since this is using a React hook,
‫we can abstract this into its own custom hook
‫because actually we do something very similar
‫to focus here on the search bar.
‫So, again, when I'm here and I hit the enter key,
‫then that will automatically focus this.
‫And so, that is using basically some similar functionality.
‫And so, it's a good idea to abstract this functionality
‫into a custom hook and then reuse that in both these places.
‫So, let's copy this code here.
‫So, just copy
‫and then let's create another file for another custom hook.
‫So, this one is called useKey.js.
‫And by the way, I forgot to mention earlier
‫that I actually also created a copy called app version 3
‫before we started extracting all the custom hooks.
‫So, basically that we can keep our code
‫before those custom hooks were implemented.
‫Okay.
‫But anyway, let's now export
‫the function called use key.
‫Okay, then let's just paste this here
‫and import use effect from React.
‫Okay.
‫And so, now, what do we actually need
‫as inputs to this custom hook?
‫Well, this one is actually the easiest one of all
‫because this one doesn't need to return anything.
‫And all we need is to know what should happen.
‫So, basically we need a callback function here
‫and we also need the user of this custom hook
‫to tell us on which key
‫the effect here should actually be executed.
‫So, not the effect but the callback that they will pass in.
‫So, we want the key,
‫for example, in this case here,
‫that would be the escape key.
‫So, here, instead of escape,
‫we will have just a key
‫and then we want some callback for an action.
‫So, just like this.
‫And then instead of calling of course, on close movie,
‫we just call the action that the user passed in.
‫Then here we also need the key.
‫And so, again, never lie to React about your dependencies,
‫and always make sure to include every single variable
‫that is used here into your effect.
‫Now, okay.
‫Now, here we just need one small fix, so to say
‫because the user might pass in this key
‫like in different formats.
‫So, they might write,
‫escape like this, or maybe all in lower case,
‫or maybe by mistake they write like this.
‫And so, what we should do here
‫is to just transform this key that they pass in
‫to lowercase,
‫and then also, the code that we get
‫from the event to lowercase as well
‫so that we can then correctly compare them.
‫And that's a pretty normal thing to do
‫when we compare strings.
‫And so, this showed at this point already be working.
‫So, let's come back here and then let's use usekey.
‫So, again, make sure that the file was correctly imported,
‫and if it didn't, then go ahead
‫and do this line of code yourself now.
‫And so, here, we now need to pass in the key.
‫So, that's in this case, the escape key.
‫So, we want to replace this effect right here.
‫And so, that's again the escape key
‫and the action will be on close movie.
‫So, this function right here
‫with the difference that of course,
‫now we do not call the function,
‫but instead, we will allow React to call this function
‫at a later point.
‫So, basically when this event happens
‫and the key is the escape key.
‫So, this whole functionality is now inside that function.
‫And so, just to make sure, let's reload.
‫Let's open up some movie, hit the escape key and nice.
‫So, our custom hook is working,
‫and so let's now immediately reuse it
‫in this search component.
‫So, where is that?
‫And of course, if I were
‫writing this application for myself,
‫I would've long divided this file into multiple components.
‫So, this is the last one
‫we will have one big file with everything.
‫But anyway, let's now again, use usekey here.
‫And so, this time, the key that we are looking for
‫is the enter key like this.
‫But now, as for the callback function,
‫this is actually a little bit more tricky
‫because watch at what we have here as the callback function.
‫So, we have all this where this part here, of course
‫is already in the custom hook.
‫So, where it compares the press key
‫with the key that we're interested in here.
‫So, basically, this action here
‫is corresponding to this part.
‫So, we could pass in a callback function like this
‫only with these two pieces
‫but then we would miss out on this part.
‫So, we also need to include that there.
‫So, this would then be like cutting it from here
‫and pasting it here,
‫which would not alter the functionality of this code at all.
‫And so, let's do the same thing here.
‫So, basically, what we have here
‫should now be just the callback function here.
‫All right.
‫And so, then we can get rid of all this year once again.
‫And also of this comment,
‫since we also have this in that other file that I stored.
‫And so, let's see if this works again.
‫So, hitting the enter key.
‫And yes, that works just as well.
‫So, here, the callback function.
‫So, this action, as we called it in our hook
‫is a little bit different.
‫So, a bit longer than before.
‫But all it does is to just describe
‫what we want to happen when the enter key is pressed.
‫Nice.
‫So, with this, we finished this part about custom hooks
‫and actually we finished this entire application.
‫So, we are done with this app.
‫Let's just see why there are some problems here.
‫Let's reload that.
‫Okay.
‫So, that was from something else.
‫But anyway, we finished now this application
‫and this section as well.
‫And so, just like always,
‫all there's left to do
‫is one more coding challenge
‫where you will now practice to build
‫your own custom hook on your own.
‫So, don't skip that video
‫because it's pretty important
‫that you start getting into the habit
‫of writing these hooks on your own.