Working with GitHub issues

[00:00 - 00:16] Working with GitHub issues. We can now start working on GitHub issues. Issues are basically discussions bound to specific repositories. Let's define the navigation component first. Create a new file, as you see, issues, issues, main, TSX.

[00:17 - 00:34] Here we define the component, expert const, issues, main. Here we'll need the ref, we'll attach it to the panel and use it to listen to keyboard events. Ref equals use, ref, any. We're gonna render a panel to which we'll pass this ref.

[00:35 - 01:04] Inside of it, we'll render a text block with text issues, an instruction to click on the bottom or press the key to list the issues or create new one, a bottom to list the issues, and a bottom to create new issue. Now, get the history object using the use history and the match, const match using use route match. We'll need to know where are we currently located in our navigation schema.

[01:05 - 01:35] Then we define a use effect. We're only gonna run it on mount, so we pass an empty dependency array. Here we'll define two functions. One to go to new issue , it will open the form to create new issues, and another one to go to the issues list. Let's define them. Go to new is a function that will call history, push match URL plus slash new, and go to list, same but instead of new, we're gonna add list.

[01:36 - 02:04] Now we can subscribe to C and L key presses, ref current key, C, go to new, ref current key, L, go to list. Define the cleanup function, we need to return it. Inside of this function, we 're gonna unkey, unkey, C and unkey, L. Now go to the issues component, remove the old layout, instead of it render the switch, with three routes.

[02:05 - 02:28] The first route should be exact, path should be match, path basically the current route is gonna be root for the issues section, and it's gonna render the component issues main, import it from issues main. To get the match that we used for the path, we'll use use route match. Now define two other routes, they don't have to be exact.

[02:29 - 02:57] First one will go to new, and we'll render the new issue component. Let's temporarily define it in the same file, new issue equals a function that will render a fragment saying new issue. Issues list is gonna render issues list text, and then update the last route to go to the list URL and render the issues list component.

[02:58 - 03:19] Try to open the issues, you should see the window telling you to click the button or press the key, you should be able to open the list issues route. For now it's only gonna render the text, it's fine, go back to issues by pressing I again, or you should be able to go to create new issue route by pressing C, and you should see this text in the top left corner.

[03:20 - 03:24] If it works, then congratulations, good job, you've defined the issues navigation block.