Submit Button

[00:00:00]
>> Scott Moss: And then we need to add our Submit button here, which I have the code for here. So let's talk about the Submit button. Go to our Components folder. We're gonna make a new component. We're gonna call it Submit Button, SubmitButton.tsx. This is also gonna be a client, so I'm going to say use client.

[00:00:21]
>> Scott Moss: I'll make my component.
>> Scott Moss: People still use snippets? I feel like I just never got into snippets, but I should, cuz I've done the same thing that I just did a million times. Probably it'll have a year of taking off my life, just writing, Next.js components. [LAUGH] So for the submit button, this one used a different hook called useFormStatus.

[00:00:50]
This one's actually really cool because everyone has done the alternative to this, and I'm gonna talk about it. You all are gonna know what I'm talking about. But this one basically, in this case, gives us like a free pending state. Whenever this hook, useFormStatus is embedded in a component that's a child of a form, it knows the status of that form's action automatically.

[00:01:15]
So as long as this button is inside of a form that's using a form action, it will know the status on that action, whether it's pending or not. It has to be embedded into a form.
>> Scott Moss: That's why we put it in another component so we can reuse it on multiple forms and it'll work on any form.

[00:01:34]
So it's just a generic submit button that when placed in a form will give you the status of that form's action. So, let's make that, so, that it wouldn't have had a label and some props, so labels so you can put whatever you want on there. And then just the rest of the button props.

[00:01:50]
I'm using a component library called next UI. So that's how to add some design, I can't like cut my hair with just plain HTML guys can't do that. So, we have the pending state. This is gonna be from the useFormStatus. That's from Reactdom. Again, nothing to do with Next.js, it's Reactdom.

[00:02:12]
In fact, I think they just made a change to this in React19. I'm sure Brian will probably cover it in his course, but there's a slight change to how this works, I don't remember exactly what it is. But slightly different than what I'm showing here, but for the most part, it accomplishes the same thing.

[00:02:29]
And then we're just gonna return this button that I have from the Next UI, spread over those props. Make sure you put type submit here. This has to be type submit. This has nothing to do with Next.js. That's just how forms work, if you don't put submit, it won't know that you're submitting the form when you click the button.

[00:02:43]
It'll just click, it won't do anything. And then this part's cool. This button component is loading prop when true shows a spinner for you for free. Well, we'll just pass in the pending state. If pending is true, then loading is true. So we get that for free.
>> Scott Moss: Now the real question is who's glad they don't have to make a state to keep track of a loading state just to set it to true, just after you call it to set it to false, and then pass it around everywhere, because that's the alternative to this.

[00:03:14]
And I cannot stand doing that, it's so bad, so we get that for free now.
>> Scott Moss: Button props is loading. I guess I need to import the button first. Lemme do that. Quick quick tip is, if you start writing the JSX like this, the Autocomplete should allow you to get it without having to type in the import.

[00:03:39]
But you have to start writing it as JSX and not globally without the brackets. So that is loading. Set that to pending. We have our label here. And then we have our types submit.
>> Scott Moss: Cool, now we have our generic button, all right? So we have that. We just need to bring that into our signup form.

[00:04:06]
I'm just gonna put it right above this div after the last input.
>> Scott Moss: All right, SubmitButton. There we go. The label on this one, what does it sign up? It'll be sign up I guess. Cool, there we go. So now we can sign up. The other thing to note is, in order for us to get this formData.getemail.password, we need to make sure our form their inputs have names on them.

[00:04:35]
That's how it knows which one's which. If your inputs don't have the corresponding name inside the formData map, we won't be able to get it. So make sure you use the name field on your inputs, so we know what to get from the formData, okay? So let's check this out.

[00:04:51]
Let's see if we can sign in. The rest of the app is 100 percent still gonna be broken, but let's see if we can sign in.
>> Scott Moss: I have to sign up first, so let me do that. l got delete, delete my cookies
>> Scott Moss: And guess I got to run it as well.

[00:05:17]
>> Scott Moss: So I'll run this, another tab here.
>> Scott Moss: And let's see what the sign up does.
>> Scott Moss: I'm using Ark if you're looking at my browser, what browsers is Ark, if you've never seen it before, it's just an alternative to Chrome. It's pretty cool. Okay, so now we can sign up.

[00:05:39]
I'm just gonna sign up with, I'm trying to think I have so many users on this database. I'm just gonna try to make a new one that I don't have.
>> Scott Moss: Cool, I'm gonna do that and then go hit sign up here. And boom, I got it, I'm home now.

[00:05:55]
That worked.
>> Scott Moss: I can verify that I actually signed up, few ways, well, other than the fact that it went here, a few ways. If you open up another terminal window, you can run this command, npm run db:studio. And what that is gonna do, it's gonna open up a database explorer for your database.

[00:06:20]
So you can just command click on that URL. And you can see here, if I go, I can see here's that user I just signed up with in a database. It's right there. Yours might look different than mine, I put like a cousin theme on mine.
>> Speaker 2: What's the difference between useFormState and just using pending with use transition.

[00:06:38]
>> Scott Moss: We will get into use transition later. Yeah, but TLDR using a transition is a way to get this the status of a server action outside of a form. Whereas if you do the use form state, you get it for free. So it's just like the form specific version of a transition.

[00:07:01]
Whereas the transition is like anything could have happened outside of a form and I wanna do a server action and get the state. So slightly, slightly different. That's forms for the most part, that is all you really need to know about forms, when it comes to doing server actions, form stuff.

[00:07:20]
And again, it's not specific to Next.js, but Next.js has a framework in how you use things, but that's mostly it.