Creating a new pull request

[00:00 - 00:10] Creating a new pull request. Inside of this receive folder create a new file, pull requests, new pull request, TSX.

[00:11 - 00:21] Here we first define a GraphQL query to create a pull request. const create pull request equals GQL, imported from a pull client.

[00:22 - 00:29] Here we call a mutation create new pull request. This mutation will receive a bunch of arguments.

[00:30 - 00:50] base ref name, it's a required argument of type string. It will also need head ref name, so we need to know the base branch, the head branch, the body, string, the title, also a required string. Body is optional and title is required and repository ID.

[00:51 - 00:54] Repository ID. It's a required ID field.

[00:55 - 01:11] Now, here we'll call create pull request and pass in input. That's going to have title coming from the title variable, body from the body, repository ID from repository ID.

[01:12 - 01:26] base ref name and head ref name. Now we want to get the pull request with fields title and URL when we execute this mutation. Run the code generator to generate the types.

[01:27 - 01:29] I just ran them in the terminal. Let's close it.

[01:30 - 01:41] Now let's define the new pull request component. Expert, const, new, pull request equals a functional component where we return a panel.

[01:42 - 01:53] It should have top 25% left center and height 14 lines. Invert the panel.

[01:54 - 02:01] Now inside of it we're under the text component. It should say new pull request have left center and we import it as well.

[02:02 - 02:15] For now we'll just render the text with the title of this panel. Let's define the error state, const, error, set, error equals use state of type error or null.

[02:16 - 02:30] We'll add a state to store the pull request, const, pull request, set pull request equals use state. Here is where we'll use the types generated from the GraphQL query.

[02:31 - 02:42] Create new pull request, create new pull request, pull request. It might be a good idea to create an alias for such a long type.

[02:43 - 02:51] Now we can define the create pull request mutation. We should add or null here, now back to the mutation.

[02:52 - 03:13] Const, create pull request equals use mutation of type create new pull request and create new pull request variables for the variables type. Once in the create pull request query.

[03:14 - 03:22] We have our mutation. Now let's get the client, const client equals use a pull client and define an on submit function.

[03:23 - 03:49] Const on submit equals an async function that receives the values from the form values and it's a function where we'll have a try catch block. Inside of the try, we'll try to get repo, title, body, base, ref, name and head ref name from the values text box.

[03:50 - 04:04] Next we'll try to get the owner and name, const, owner and name. We'll do it by splitting the repo value because repo as I planned it was going to have the owner slash name format.

[04:05 - 04:31] So if we split the repo, repo split by the slash, then we'll be able to get the owner and the name of the repository. Now we need to check if we don't have an owner or the name of the repo, then we set error new error with text repository name should have owner slash name format.

[04:32 - 04:53] Then we return. Now if we have those values, then we get the data using the await client query, passing the types get repository and get repository variables. Pass the arguments to this query query get repository variables, owner and name .

[04:54 - 05:21] All right, after we have the data, it will contain the repository. We'll be able to call the create pull request method for mutation, const result equals await create pull request with variables from title, body repository, id from data repository, id, base, ref name and head ref name.

[05:22 - 05:37] After we have the result, we set pull request to result data. If it exists, then we take the create pull request value from there and get the pull request from that value.

[05:38 - 05:51] If we catch the error here, then we call set error and we store the error in the state. Now let's show the error and success screens at the skull right after the on submit handler.

[05:52 - 06:04] If error, then we return new entity error, we pass in the error, the on close handler. It's going to reset error to now set error now.

[06:05 - 06:16] And if we have the pull request in the state, that means that we successfully created it. If pull request, then we return the new entity success, that will show the new pull request data.

[06:17 - 06:33] Return new entity success title is going to be new pull request created. URL is going to be pull request URL and on close will reset the pull request value.

[06:34 - 06:41] It's going to be a function that will set pull request to now. All right, time to define the form.

[06:42 - 06:46] Below the text, add a form. The form implements the render prop pattern.

[06:47 - 06:53] So we need to pass in a function. This function will receive that trigger submit and it will render a bunch of fields.

[06:54 - 07:06] Return a fragment and here render fields. Select field top zero label repo on submit trigger submit.

[07:07 - 07:12] Repeat it for the other fields as well. We'll need repo title, body, base and head.

[07:13 - 07:17] All of them will call trigger submit on submit. Now let's add the navigation instructions.

[07:18 - 07:31] Below the form, define a text element saying tab to switch to next field and the bottom saying enter submit and on press it should also call the on submit handler. Now let's use the component.

[07:32 - 07:39] Go to SRC pull requests, pull request JSX. Remove the new pull request component defined here.

[07:40 - 07:51] Import new pull request from new pull request and we are done. Run the application and make sure you can create pull requests.

[07:52 - 08:06] Go to pull requests, press C and here you should see the form the forum and you should be able to create a new pull request.