Saving Data & Redirection

[00:00:00]
>> So this is slightly different how I think you would normally do forms, right? Well, we're taking advantage of basically, the way browsers always work the forms to post data to the server, and then coming back with the same exact data rendered. Now in the future, there's gonna be something on top of this to make it old Typesafe, and make the amount of hoops I have to jump through kind of more straightforward.

[00:00:29]
But the basic idea stays the same, that you create a form, that form gets posted using a normal browser post, the server gets to validate it and decide whether things are okay or not, and it essentially sends the same form back to me to the update. So, let's now implement the last bit.

[00:00:48]
So let's say there are no errors. So where are we? We're here onPost, and data shows up. And suppose we pass through all the checks in here and there are no errors. So isRequired, returns false, right? So, sorry, let's flip this over. So const hasErrors is this one, right?

[00:01:20]
So now what happens if it has errors? Well, if it has no errors. Then what we need to do, we need to save it to the database, right? So this is save contact to DB. So that requires that we, [COUGH] what do we do here? We say CONTACTS find.

[00:01:49]
Is it find returns the value? The first element that, so find predicate, contact id, okay? So we have to make sure to send back the contact id. Well, the contact id, okay, it's used. So the form we forgot to do that, when we have a form, we have a special input here.

[00:02:11]
Type hidden. Perfect, my gosh. It's amazing. Is it c.id? I think it's c.id, yes. So now we use the Yep, that shouldn't use this too, this is unnecessary, whatever that is. So now we copy our contact to the existing contact, right? We overwrite it. What is not liking it?

[00:03:03]
Why is this not liking it? Because it could be undefined, I see. Okay, more error checking to be written over here. So we copy it into database or whatever the equivalent of the database would be here. And now we have to redirect. So we say, throw response. Oops, so not only do we get a request, we get a response.

[00:03:36]
Response.redirect. And let's redirect ourselves to contacts slash contact.id. Okay. Also, these routes will become Typesafe in the future. So for now, we just have to do this particular bit. So, okay, I can't hit Enter, if I hit Enter, it just complains. So, let's call myself Mike Hevery. Oops, that's, yeah, because, okay, I know what just happened.

[00:04:12]
Let's do this. Okay, so let's change my name to Mike. And just like the id didn't get copied, we forgot to copy the, where is it? [SOUND]
>> The avatar.
>> The avatar, yes, I've hidden id. So the same thing avatar.
>> It's also not displaying, so I suspect it's not actually making it there.

[00:04:48]
>> I think I have to restart the database because now we deleted everything. Bring it there. Okay, here we go, hit edit. And it's all there. So now we have a full edit cycle in our system.
>> Love to see what's going on with the network traffic.
>> Yes.

[00:05:08]
That's totally fair. So let's look at the network traffic. So [COUGH]. Again, no JavaScript, right? Because we don't need anything here. So, clicking on edit, it gets us to a new route, I wanna do all, so let's go back again, I'll just refresh. So the route mhevery is full HTML in this particular case, there is no behavior in here, so no JavaScript shows up.

[00:05:33]
Hitting edit sends you to edit. That URL is missing a slash on the end. That's why there was a redirect. Sorry, let's fix that. Again, Typesafe routes would solve this. See this edit is missing a slash here, that's why there was a redirect. So we're here, hit edit, so we go to the Edit URL here.

[00:05:57]
This is just sending normal HTML, right? Again this page happens to have no behavior in here, we could put it behavior, right? If we wanted to, if I go and change this to Misko, and I hit Enter. I post back to ourselves. And if you look at the header, the header has, sorry, the payload had all the data, including the name being Misko, right?

[00:06:23]
That caused the redirect, right? This header came back with a redirect, which was 302, that redirected me back into the slash mhevery without the edit suffix. And there you go, updated. It also updated the database, and now this particular thing is updated. So if I go back to the list, you can see that my name got edited.

[00:06:47]
I lost my Karen on a top, let's see. If I go back now to, we need to back to hevery, now it shows up as John over here because I changed my name. And again, we're very light on JavaScript here, but if we needed to add behavior, like this particular case has a search behavior, right?

[00:07:14]
I can search and searching causes JavaScript to be fetched as necessary. And so the world is very fluid in between, like what's on a server? What's on the client? What are the pages are, et cetera? It's very kind of easy to work with.