Repositories main component

[00:00 - 00:06] Repository's main component. In our application, the user should be able to list their existing repositories and create new repositories.

[00:07 - 00:13] We'll achieve this by defining these three components. The repository's main will show links to two other routes.

[00:14 - 00:25] The new repository will contain a form to create new repositories, and Repository's list will show a scrollable list of existing repositories. Let's create with the main component for repositories.

[00:26 - 00:34] Inside of the SRC folder, repositories, create a new file, repositories, main. tsx.

[00:35 - 00:48] Define the repository's main component. It's going to be a functional component that will render a panel with text saying repositories, a message telling to click the button or press the key, and two buttons.

[00:49 - 00:57] One to list the repositories, and another one to create a new repository. Define a ref so that we can add event listeners to our panel.

[00:58 - 01:04] Const ref equals use ref with type any, and pass it to the panel. Ref equals ref.

[01:05 - 01:13] Now get the history object using the use history hook. We'll also need the match to know what is the current route.

[01:14 - 01:20] Const match equals use route match. Now we can define an effect, use the use effect hook.

[01:21 - 01:33] We'll run this effect only on component mount, so add an empty array for the dependencies list, and then add event listeners to ref current using the key function. We're listening to the C key.

[01:34 - 01:41] Here we'll push the new URL to history object. Define a function where we call history push.

[01:42 - 01:50] We get the current URL from the match, and then pass new. Add another event listener for the L key, and here we push list URL.

[01:51 - 02:02] It is a good idea to unsubscribe from those event listeners. So let's move those nameless functions to named const on C press.

[02:03 - 02:17] Here is going to be our C function and another one on L press, and that's going to be our L press function. Move the nameless functions, use the ones we just defined on C press on L press .

[02:18 - 02:28] Now return a cleanup function where we'll call ref current on key the C and on key the L. Now go to repository's TSX.

[02:29 - 02:42] Define the new repository stub and the repository's list stub. Read the layout, we'll want to get the match, const match, to get the current URL, use route match.

[02:43 - 02:58] Instead of the panel return switch, we'll render a bunch of routes. First one should match exact path from the match path, basically the base repository's URL, and should render the component repositories main.

[02:59 - 03:10] The route should lead to the new and render the new repository component. And the third one should lead to the list and render repositories list.