Adding Keyboard Shortcuts

[00:00:00]
>> Maximiliano Firtman: Now you will start seeing the advantages of using design patterns. Just for the sake of adding something, what if I want to type something and then use a shortcut, such as Ctrl+P, Ctrl+T, whatever ,to hit the add. I mean, I can also use Enter, Return, but just to play with something different.

[00:00:23]
Also, I can use the form element in HTML and use onsubmit instead of the onclick, that will be much better. But let's just stay with the idea of adding shortcuts, keyword shortcuts. So how to add keyword shortcuts here? Well, I could create another file or I can do it here in App.js.

[00:00:44]
I'm not sure if you have ever played with keyboard shortcuts, but I can just talk to the document and add an event listener for keydown. So, keydown. So, keydown,
>> Maximiliano Firtman: We receive an event. And we should check, for example, if the Ctrl key is pressed, and if the key is, I don't know, just pick any letter, P, T, T for to-do, whatever.

[00:01:13]
Convert P for print, no one is actually printing these days, so, yeah, we can override that. So we can prevent default, so we don't get the print dialogue from the browser. And then, how to trigger the add operation? We just need to execute the command, the same command as we executed when we click the button.

[00:01:36]
So just copy this, paste this here, we have to execute the command, and that's all. It's because we decoupled the execution of the action from the previous invoker of that action. So now if I execute and I type now, dinner, I will not click the button, I will press Ctrl+P, and you have it.

[00:02:03]
So you can now easily implement keyboard shortcuts or gesture with your finger for the iPad. When you do a tick over the screen with your finger, you trigger the action, whatever you want. Now that it's decoupled, it's much simpler to all other invokers for the same command, okay?

[00:02:25]
That makes sense? Now you can see that after we did the hard work, now everything is faster, it's smoother. Every new feature we have is actually pretty simple to implement.