Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
08. Resetting state

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
OK, let's take a look at resetting the state of our form. So you can see here that when I go ahead and enter a URL in here
00:08
and hit Get Short URL, sure enough, we have this and this. But we also still have this Get URL button hanging around. Let's go over and change that. So we'll come back over to our index file.
00:20
And let's go and find that button in here. So we can wrap this in an if statement here. And we can say, if the URL is generated, do something or show something. Otherwise, we'll go ahead and show that Get Short URL button.
00:36
So we can pretty much just copy and paste this into here. And we'll say in here, generate another URL or short URL. OK, great. So now when we enter a URL into here, we should see that button change.
00:55
Great. So when we click on this, we want to reset all of the state inside of here. So for this button, we are going to set this to a type of button so it doesn't resubmit our form.
01:07
Really, really important. And then we can say wire click. And let's just call this Reset. So if we come up to the top here, let's go ahead and create out a Reset
01:16
function. And we'll go ahead and just reset the entire state of everything that we've done. Now, what does that involve?
01:24
Well, it involves resetting the state of the form because we don't want that URL hanging around. And it also involves resetting the state here, which contains the last model that we generated.
01:36
So we can go ahead and say this Form and Reset. Very simple. We can specify which columns or which fields we want to reset in here as well. And we can just go ahead and set this URL to null.
01:49
That's the model, remember, that we store. OK, let's try this out. Let's see here. So Reset doesn't work.
01:56
Let's call this Clear. And swap that over to Clear. Probably reserved. OK, let's go ahead and enter a URL in here.
02:07
Hit this. Generate another short URL. And we are back to the state that we ended up with. Great.

Episode summary

In this episode, we tackle the problem of resetting the state of our form after generating a short URL. You'll see what happens when a URL is entered, and how the interface doesn't quite behave as expected — the 'Get Short URL' button just sits there even after we've already generated a URL.

We'll walk through updating our code so that once a URL is generated, the UI updates to show a button for generating another short URL instead. Then, you'll see how to reset all the relevant form state, ensuring things like the input field and the model data clear out properly so everything feels fresh for the next round.

We'll implement a reset (later renamed to clear to avoid conflicts) function and connect it up, making sure the form doesn't re-submit unintentionally and everything resets as it should. By the end, you've got a form where the state smoothly resets and users can easily generate multiple short URLs in a row without any hiccups!

Episode discussion

No comments, yet. Be the first!