Adding Support for Creating Data

[00:00:00]
>> So let's file a nulify dev again. And the first thing that we want to do is add support for creating a todo. So we're gonna create a new function called CREATE_TODO .js. And this one is going to pull in that same query. And we'll see that's very convenient for not having to write all that code again.

[00:00:36]
And then we're going to set up our create to do mutation and so the way that this is gonna work is it's gonna be really similar to what we did over here. So we can just drop that in with one key difference, which is that I don't want this to be hard coded.

[00:00:57]
So let me turn on wrap here. There, there it is. So, I don't want these to be hard coded so I want this to be a variable, variables in are prefixed with a dollar sign, and so I want that to be set up. But then I need to declare these somewhere, where do these come from?

[00:01:18]
So, I'm gonna define them up here and we'll say that text is going to be a string and completed, you know what, you can't create a completed to do so let's just market is always false. It's always gonna be false when you start. So that's our mutation. So then when we send this we're going to need to supply this text.

[00:01:40]
And that's why we have that second argument in, send query so that we can add variable values in there. So let's create our handler and that's going to be a sync. It's going to receive the event. And we'll get the text out of the body itself. So we're gonna be able to send in the text that we want to our function, and then we'll pull that out and use it.

[00:02:10]
So we're gonna parse the event.body. Then we'll get the data and the errors out of send query. And we'll send in the CREATE_TODO query, and we'll pass in text as our variable. So whatever we pass in here, we'll get declared here. It needs to match this requirement. So we've defined it as a string, which means that text needs to be a string.

[00:02:41]
That shouldn't be a problem, we're going to be submitting a form. Once we've got our data and our errors, we can actually just follow the same pattern that we followed on the previous function. So I'm going to just grab that. Get all todo's. Grab that. Come back over here and we'll just drop it in.

[00:03:03]
So effectively what we're doing is, if there's an error, we're gonna send back the error. And then down here, if everything goes well, we wanna send back some data. And the data that we wanna send back is gonna be the new todo that got created. And that will be at data.createtodo.

[00:03:25]
So at this point we have the the definition of a function that should work. And because I just created this, I'm going to stop and restarting, nullify dev. So but it picks up that new function. And once we get this running, then we can go in and build up a forum to actually submit this and make it work.

[00:03:47]
So let me hide that. Pull this out. And let's build out this component. So I'm going to build a new component called form. And in here, we're gonna import, React from react and we will also import axios from axios. And we will import styles from form.module.css which I need to create, we would come to that in a minute.

[00:04:22]
So let me set up my form component and that will start out here. And we're going to use let's define the the form first and then we'll get into how it's going to work. So we've got our form and that's going to have a class name of styles.form.

[00:04:45]
And then we will set up a label. That label is gonna have a class name of styles.label. And it'll say add a todo and underneath that will set up an input. That input is going to have a type of text because we're just adding in plain old todo text.

[00:05:11]
We're also going to set a class name of styles.input and then finally, we want to add a button. That button is going to have a class name of styles.button and we will save the to do. So let's export that export default: Form, let's head over to our index file.

[00:05:46]
And actually use it. So I'm gonna stick that up at the top of this index file. So import form from Components form and then we can stick it up here, right below the heading. And that will give us a form. Okay, so that's cool. Let's make this look nice.

[00:06:20]
Let's get the form module And inside of this will set up the form. We will use Flexbox for this one as well we're going to align it at the bottom this time so align-items: flex-end and then. We will display flex, justify-content space between then we'll do margin: 2rem auto, Okay, I'm getting closer and closer, we can set a max-width: 500 px to match that form and we'll give it a padding of 0.

[00:07:04]
And we'll add a label. The label is gonna be little bit of a lighter color. We're gonna make it smaller, 0.7rem, we'll give it a little bit of letter spacing using my favorite label trick which is make it small in uppercase. Then we will set a little bit of text index because I got a little pedantic about this one.

[00:07:33]
And then we are going to text transform upper case and give it a width of 350 pixels, okay? That's good. Then, we want to set up the input. Input in the button are going to share a lot of things so we'll will declare some shared properties. So let's set a border radius of 0.25 rem.

[00:08:02]
Then we're going to set a box sizing of border box will set slightly bigger font size. We're also going to make the line height higher, so that they look kind of the same height. We need to make this just slightly bigger. And then let's, let's also make them give it some padding of 0.25 rem, the input itself is going to be display block, if I can spell it, and we'll give it a border of one pixel solid, triple fours.

[00:08:47]
I want to set the padding left and right to 0.5 rem. Okay, that's starting to look better and better, good good. And let's also set the width on this to be a 100% and then for the button, we'll just give it a background of triple fours, we will give a border 1px solid Black, and then we'll make the color white and make it bolder and make the width 125 pixels Okay.

[00:09:38]
So the major problem is that my responsive styles were not great there. So, we have now a form that's kinda set up and ready for us to do some things. So, then what we're gonna do is make it so that if we submit one of these items It should actually save.

[00:10:01]
And then we wanna reload the todo. So let's start by having it actually submit. And the way that we're going to do that is by tracking that text value. So we're gonna control the input, That means that we need to get usestate out of react. And then to make that work, we need to set get this out there a little ways.

[00:10:34]
We need to set the value to be Text And then onChange, we need to grab that event and we will set text to be event.target.value, okay. So now, okay, we're good, that's working. And we need to make sure that when we submit this form that it will send to that value.

[00:11:05]
So let's create a submit handler. And that's going to get the event. And we want to use axials in here, so let's make it a sink, a sink event. And the first thing we want to do is prevent the form from reloading the page or something we wanted to stay nice and happy.

[00:11:27]
And then if the text is empty, we'll just bail we don't wanna submit empty to us. But if we get here, then we can wait for axios. We'll just post to API create-todo and we're gonna send in the text and then, once that comes back and we're awaiting.

[00:11:51]
So we know that this won't run until this is completed because we made this synchronous. So we're gonna set the text back to empty. And then we're also we want to set the status of the whole page to loading again so that it'll reload. But in order to do that, we need to get some values from somewhere, right?

[00:12:12]
So if I just set this up now and do on submit, we will handle submit. What we'll see is that I can save this. Okay, and if I refresh the page, it did save it did work but I don't wanna have to refresh the page to see my work.

[00:12:37]
So I wanna trigger that from the index itself. So let's get that out of our to do's and I'm gonna create a helper in here, to do this for me. And so let's just call this reloadTodos and it's gonna use this set status that we've got here. It's just gonna set that status to loading and then I can pass it in.

[00:13:10]
As reloadTodos. Okay? And then in my form, I can grab that out, And then we can call. So now it does what we want. We save it clears the todo, leaves us in there so we can add another one, but we are able to see our new work show up immediately.