تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Back Button Requirements0:00

Okay, let's work on this in-app back button, which is supposed to take us back to the index page, or any selected filters that we had if we selected them on that page. So, for example, if we go back to the index page, select some filters, like this, and then go to a single Idea, and hit back again, we want to remember those filters. And right now, it doesn't. So let's go ahead and do that. So first, let me change the text. If you look at the design, it's actually all ideas, or back to chosen category with filters. So let's do that first. It's in this show.blade.php,

Update Back Button Text0:32

the design, it's actually all ideas, or back to chosen category with filters. So let's do that first. It's in this show.blade.php, and it's not within a Livewire component, it's just within the blade file here. So let's change that text first. What is it? It was, or back to chosen category with filters. Okay. And initially, I thought I had to keep track of the filters that we selected. So I was thinking of using something like session variables on this main page here, but it's actually much simpler than that. So we can make use of the previous method on

Use Previous URL1:04

using something like session variables on this main page here, but it's actually much simpler than that. So we can make use of the previous method on the URL class in Laravel, and this will give us the previous URL of the last request that we visited. So not the current request, but the last request. So let's take a look at that. I'm just going to dump it here in the view. So let's say I'm going to use the global helper, so URL::previous(), and let's see what this gives us. So I'm on the Idea page here, or ideas.index page, and it selects some categories here. Actually, let me refresh first.

So I'm on the Idea page here, or ideas index page, and it selects some categories here. Actually, let me refresh first. And we'll select considering, category two, top voted. So now if I go to a single one, you'll see that it still remembers that. So considering, category two and top voted. So let's try that again with different filters implemented category four category four implemented. So that does work. So there's another case when we don't visit the index page and just visit this page directly. And in that case, it just returns the base URL.

Handle Direct Visit Case2:40

So if I refresh this, hit back. Actually, this case does require a conditional here. So let me put that dump back. So dump(url()->previous()). And let me just grab this again and open a new tab. So in the first case, it is just the base URL. But if I refresh, then it's this URL. So we have to do a conditional here. So let me dump something else here. So let's dump(url()->full()). Okay. So now we have two.

else here. So let's dump URL::full(). Okay. So now we have two. So when they do match, we want to go back to the main page. But if they don't match, we can just use URL::previous(). So one more time. Let me just grab this again, open a new tab. So again, when they're not the same, just use URL::previous(). But when I refresh and they are the same, then just go back to the index page. So we can do that in the controller. So instead of doing it directly here, let's just put that in the controller. Let's name it backUrl. Let's get rid of these.

Compute backUrl in Controller3:44

So instead of doing it directly here, let's just put that in the controller. Let's name it backUrl. Let's get rid of these two. And let's go to our IdeaController and it's on the show method. And I'm just going to do it directly in here using a ternary. So backUrl = URL::previous() ? URL::previous() : URL::full(); So the case is if URL::previous() does not equal URL::full(), then we can just use URL::previous(). So let's do that.

then we can just use URL::previous(). So let's do that. But if they are the same, then we can just go back to the index page. So let's do route('idea.index'). And that should do it. Let's try this out. So if I refresh again, this should just take us back to the index page. But if we're on the index page first, let's select some filters here. category_one, considering. Let's try that. Hit back. And if you see in the bottom left, it does work.

Add Feature Tests5:20

since it's a very simple use case. Let's write one anyways. So I'm going to put it in the showIdeasTest. Let's put it down here. And let's call this one. Actually, let me just grab one of these. Let's grab the first one. So the setup is done for us. Grab this. And we don't need all these assertions, but we'll get rid of it here. Let's get rid of all this. So we only need one Idea here. That's fine. The name of it will be in

So we only need one Idea here. That's fine. The name of it will be in app back button works when index page visited first. So we visit the index page first. We can add params here for the query string. But just to make it more clear, I'll just do it directly within here. So let's say /category. Let's say Category 2. Actually, we don't need this quote. And it should be a Category 2.

say category two. Actually, we don't need this quote. And it should be a caps category space two. But I'm going to add the escaped string here for space. And that's %20. If you look at the URL, it does add that when there's a space, as you see here. So category two. And let's also say status = considering. Okay. So we visit this on the index page, and then we visit the show page. So let's say route idea.show. And we're visiting

say route idea.show. And we're visiting idea 1. And remember, we are using that backURL in the IdeaController here. So I just want to inspect the value of this. So to get the value of that, we can just do so let's just dd it for now. response and the name of that variable. Actually, it should be a race syntax. So let's say backURL. And that should be in this case, it should be this URL here. So let's see if that works.

URL. And that should be in this case, it should be this URL here. So let's see if that works. Actually, it's just run the test. Okay. So as you see, it is the correct URL that we entered here. And it is remembering it correctly. So category two status considering. So now we just have to make sure that that string is the same so we can use and see this when he is the assertStringContainsString assertion on PHPUnit. And we are searching for this part of the string

string assertion on PHPUnit. And we are searching for this part of the string within the variable. So let's put this in here should be in quotes. And then we can just grab this. And then we no longer need this. And hopefully this passes if I did it correctly. And it does cool. And we can do something similar for the other case. So let's duplicate this. And it's rename it to when show page.

let's duplicate this. And it's rename it to whenShowPageOnlyPageVisited. Okay. So this is all the same. We are no longer visiting the index page. And we can just use cert equals here. cert equals and the back URL should be the index page. So we can just do route('idea.index'). And that should work hopefully.

UI Cleanup Tweaks9:04

page. So we can just do route('idea.index'). And that should work hopefully. And it does. So yeah, that's pretty much it. Very small feature, but pretty useful if you want to use a back button from within here. So I'm going to make some quick changes here. I'm going to add a proper URL for the logo here. So that should be an app.blade.php right here. Let's just go back to the home page. Okay. I'm also going to remove the link here. This should not be a link within the show page. So that should be in show.blade.php.

I'm also going to remove the link here. This should not be a link within the show page. So that should be in show.blade.php. Actually, no, that should be in IdeaShow the Livewire component. Not that one. The view. So yeah, this should not be a link. So let's remove that. Okay. So this is a link now. This is no longer a link. I think I put too much margin here. So let's remove some margin here. So yeah, this one is too much. So I'm going to remove the

Fix Status Filter URLs10:40

Say margin top of two on mobile medium margin top of zero. Okay. There we go. And that's looking good. I think one more thing here. If you look at the URL, when we hover over these statuses, it just has these hash values here, which is the default that I added before I used Livewire. And I believe it's the same for the index page. Yeah, it is. So that's fine. But I actually wanted to show the status that we're hovering over. So we can add that manually. So let's go to I believe it's called StatusFilters, our component here,

over. So we can add that manually. So let's go to I believe it's called StatusFilters, our component here, and we can add it here. So yeah, it's just to show the correct URL because Livewire is taking over when we actually click on it. So let's do that. So let's use route and it's going to go to the index page and let's give it a param here. So for this case in particular, it's going to be status all equals all. And so let's see if this one works first and then we'll add the other ones in. Let's try that out. I forgot the

yeah, that should still work. Let's make sure it works on this page as well. And it does. Cool. Let's make sure all of our tests are still passing. So let's do php artisan test --parallel and they are cool. So let's make a commit here. Episode 31. This is in app BackButton. Forgot to quote here.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟