All language subtitles for 21. Active Tab Refresh Fix

We saw in the last video that there's a problem when we refresh the page the active tab is always defaulting.

Back to the home.

Now you can see that up here in the U.R.L. we're still on the correct U.R.L. and we're still rendering

the correct content.

We're just not setting the correct active tab.

The fix for this would then be to check the U.R.L. any time the page loads or refreshes and make sure

that we are set to the correct active tab now doing something every time the component updates.

Sounds like a lifecycle method and so that's actually exactly what we are going to do using the use

effect hook from react the use effect.

Hook is similar to the component did mount lifecycle method but using the hook enables us to use this

for our functional components so if we come down to the beginning of our header function and above the

return statement we can call use effect and open this up.

I actually know that is it going to be an arrow function.

So we are going to create this but inside we're going to set up an arrow function and we'll open that

up and inside of here we can specify the code that we want to run.

Anytime this component updates this is where we want to check the current you are Rel and then set the

appropriate state value for whichever you are real that we are on to find the current U.R.L..

We're going to use the window object and so we're going to check if the window dot location dot path

name is equal to the route that we want to specify we also want to make sure that the correct value

is not already set.

And so we're going to add a condition to make sure that the value is not already equal equal to zero

which would be the appropriate value for the home screen.

So if we are trying to access adjust the slash home page route and we have not already set that correct

value well then we're going to go in and call set value with zero to set the correct active tab.

We can go ahead and copy this statement and then add in.

Else if front and now we have in else if statement and we'll set the path here to the services page

that would mean then that we need a value of one here and a value of one there as well.

We can continue and copy this.

Again actually inks as it don't like how to copy the first time and then paste it again.

And it looks like it really didn't do a great job here either.

And add the else in front so make sure bring that down.

So else if we are on the revolution revolution page then we would need the second index to be set.

And then if we were on let's fix this if we're on slash about that's going to be our third index and

then else if we are on the slash contact routes that is our fourth index.

And if we do this one last time we fix that up and we do this for the estimate route slash estimate.

And that would be the fifth index if we go ahead and save this that's going ahead and reformat that

code to look a little bit nicer but you'll see we do have an E lint warning here and that's saying that

the use effect contains a call to set value and without providing the use effect hook a list of dependencies.

This could possibly trigger an infinite chain of updating so as part of the built in functionality to

prevent this we can pass along with our object and array of the dependencies that we're using in this

use effect function.

In this case being the value constant.

So by providing that value here in this array that tells the use affect hook that we are depending on

this state value and we want to make sure that if that hasn't changed we don't want to run this code

again.

Otherwise we could potentially get into situations where it runs infinitely.

Now let's go ahead and we'll come over to our application and let's try going to the revolution page.

You can see we're on the revolution here the revolution in the URL and you can see we're highlighted

and let's go ahead and refresh the page and bam you can see that the revolution has stayed highlighted

because now it detected using the use effect hook that when this page updated we were already on the

revolution route and it made sure to then set the correct value for the active tab instead of the default

of 0.

So now that really cleans up our application and really sets up the navigation how we wanted it to except

for one small thing which we're going to fix right now which is this logo here in the header should

also act as a link to the home page because a lot of people simply expect to be able to press that and

return to the landing page of your application.

So let's go ahead and turn that logo into a button real quick by coming down and we're going to wrap

our image here with a button component.

So I'm just going to make sure that you are outside of the image and wrap with a button components and

then we want this button to be a link.

So like the rest of the tabs we're going to have to specify the component prop and set that to our imported

react router link component as well as specifying the to property and setting that to slash for our

home screen if we go ahead and save that.

We'll see how it looks.

And you can see now that there is a bit of a problem we have this boundary around the logo now but that

is actually coming from the button component that we just wrapped it with which has a little bit of

padding.

So let's go ahead and add a class name to our button and we're going to call that classes dot logo container.

Then let's go up to our styles object and underneath the logo let's put our logo container styles and

make sure you get that comma underneath it as well.

And here we're going to set all of the padding equal to zero.

So save that and you can see that that already solved our problem there is one thing I noticed though

in the logo is actually smaller now than it was before.

So let's go ahead and just change the logo height here from 7 M where we had set previously to now 8

m.

So go ahead and save that.

And I think that that looks more about where we were.

So now we can go ahead and we're on the revolution page and let's try out.

You can see it when we hover over the logo.

You can see it does.

It has a little darker opacity right there.

And we get the clicking pointer so let's go ahead and click that and we're taken to our home screen.

But you can see the active tab did not update.

So that's because even though we are using the react router link to navigate to the home page we aren't

doing anything to tell the state value managing our active tab that that has changed.

So what we need to do is come down and up to our button component wrapping our image and we're going

to add in on click handler to the button and we're going to set this just to an arrow function.

So an arrow function in here where we are going to call set value with zero.

And so that will set the value of our state to the default of 0 which should it set it back to the home

page.

So if we go ahead and we save that won't come over here and you can now see that we're on the home page.

Let's try and navigate back to the revolution.

And now let's use the logo to navigate back to the home screen and you can see that the active tab is

managed as well real quick last things that I wanted to do is I really don't like how when you click

this you see the little ripple effect on the logo.

You can see that kind of go through the text there.

The little shadows as well as the corner here when you hover that little darkened opacity I really don't

like that and I don't think they on the logo that's really what you would expect.

But thankfully material UI makes it really easy to fix this.

So for the little ripple effect that you see whenever we press it you can actually set on any button

the disable ripple effect or prop.

And if you save that you can now see that anytime we click this it is not using that ripple effect anymore.

We do still have that little opacity highlights going on though.

And to get rid of that we need to come up to our styles object and on our logo container.

Let's add a property inside of quotation marks and set this to at colon hover.

And then outside the quotation marks a colon in an object which opens up to then set the background

color equal to trans parents.

And that is going to stop that little opacity overlay when we hover on top of the logo.

So if we save that and now the page refreshes we go up and now we've seen no little opacity and if we

click it we don't see any ripple.

So we can go to any of the other pages and we can click that logo to immediately snap back to the home

page like you would expect with that.

I think all of the functionality for the navigation in our header is completely set up.

And now we're going to level this up a little bit by adding a little dropdown to our services tab so

that you can see a menu of the different services appearing underneath it without having to go to the

services page each time but start looking at how to set up this menu in the next video.