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.
10 episodes• 53 mins

Overview

Volt is a functional API for Livewire that allows you to build Livewire components in a single file, alongside Blade templates. Pairing this with automatic route creation using Laravel Folio gives us a serious productivity boost.

So, let’s build a URL shortener while learning how Volt and Folio work!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!