Adding Form States

[00:00:00]
>> When we send this, we're gonna have some kind of async states. And what that means is that when I send this form, it's not going to instantly be done. It's gonna have a pending state. And then there's a chance that it's gonna fail. It may hit that API, and the API is down, or it may be malformed.

[00:00:21]
It may be an invalid email address, and that could result in an error. And if it's successful, we want to show that it was successful. So the next thing that I wanna do is control some states, and show what it looks like when you have the different success, failure, and pending states.

[00:00:41]
So to do that, I'm gonna introduce a new state value called idle or status. And by default, it's gonna be IDLE. And so we're not writing a full state machine. If you are interested in learning more about safety and that stuff, David Khurshid has a ton of information on how state machines can make your life easier.

[00:01:05]
It's probably a little out of scope for what we're doing today, but it is worth learning. It's very, very cool stuff. And then once we have a status, we can add a case to update it from our reducer. And we'll just say updateStatus, and we'll return the existing state.

[00:01:23]
And then we'll include a new status, which is whatever gets sent in as the status. Okay, so that's good news. That's what we want. That's nice and easy, and we're starting to see how straightforward it can become, too. Manage complex state with a reducer, because we were to stable in three lines to add a whole new set of state to our setup.

[00:01:52]
So then, we wanna look at what happens when we are, let's say successful. Let's do the success case first. So what I would want then is in success, I would just wanna hide the form altogether, and show your message was sent successfully. Message, that's what I'm after. So let's do that, and we'll say if state.status = success, Then we're just gonna return an entirely different component.

[00:02:24]
We'll just skip the form component entirely. And so I'm gonna set this up to say that the className is gonna be styles.success. And we will say the message was sent. And to test this, let's just change our status. I need to start the server again. Okay, so we get our message sent box, so that's good.

[00:03:04]
And if I change this back to IDLE, it'll show us our form. And so that is what we're after, that's good. So now let's give this a little bit of style, so that we can actually kinda show that it's looking the way we want. So I'm gonna open up this form.module.css.

[00:03:28]
And we'll say, these are gonna be our success and error message styles. So in success, I'm going to set up some defaults. And I'm actually gonna use the same for success and error, so let's just define those at the same time. We wanna match up the general styles with the rest of the thing, so we'll give it a quarter pixel of border radius.

[00:03:53]
We'll make it display block, so that we can do things like center it. And then we want to set up a max width, so we'll make it 500 pixels, like the rest of the content. And we'll make the text align center. And then for a success message, I want to make the background kind of a transparent green.

[00:04:19]
So I'm gonna use rgba(), which is red, green, blue, and alpha. So we'll set it to be green in the middle channel, so we'll set that to all the way up, and then we'll make it 10%. And then I wanna also set a border of one pixel solid green.

[00:04:39]
And let's set a little bit of padding, so that it's not smashed against the borders. Okay, all right, that's okay, that looks pretty good. So now we are able to send a message and get a success. So what about an error statement? What happens if something goes wrong?

[00:04:57]
Right now, nothing, so let's add support for that. And we can just stick this right at the top of our settings. So I'm gonna add a fragment, To make this so I can put something outside of the form. And then I'm just gonna run a check here that says if the state.status = error, then I'm going to output paragraph with a class name of styles.error.

[00:05:35]
And we'll just say something went wrong, Please try again. Okay, that's pretty good. Let's add some error states to that. And I'm just gonna copy this, and we wanna make it red. So red is the first channel, so I'll swap that over, and then we'll change this to red.

[00:06:01]
And we want that to be the error message. Okay, that's pretty good, little too much padding, so let's make that smaller. Perfect, there we go. Now we have success and error states if something goes wrong. We're gonna show this error message. If we have success, we're gonna show a success message.

[00:06:17]
And the last thing that we wanna show is after we submit, there's gonna be delay between sending that form message and getting the response. So we need a pending state as well. So for pending, I'm going to, We wanna check here if we are pending. And the way that we do that is by just adding another class, so, I'm making a string out of the styles out form.

[00:06:50]
And then, I'm gonna also check if state.status = pending. Then I wanna show styles.ending, right? And so this is a short circuit operator. I'm basically doing this, so that I can skip having a ternary that just returns null, or something. You can do it whichever way you want.

[00:07:16]
This is a pretty standard practice.