All language subtitles for 19. Section Cleanup

All right so I know that I said we were finished up with the header but I've found a couple of things

I just want to refactor real quick and clean up before we move on to the rest of the project so I'll

try and be quick with this.

So let's just jump on into it and we'll come on down over to our header dot J S file and we want to

go to our use affect function.

So where we are using the or setting up the active tab refresh fix and I realized that when we refactor

this to use the switch statement we actually left in all of the if else statements from our previous

approach.

So right now let's just go ahead and get rid of that.

So we'll close that up and now we're going to add some code that's really going to clean up the header

and refactor everything in about the best way I think we can if you look throughout the header you'll

see even here in the switch statement what looks to be a lot of similar code and same thing with the

tabs here along with all of the list items.

So here there is a lot of repetition.

It looks like and I think that we could actually clean this up and do a bit of a better job at just

making this code as efficient as possible so to begin this process I'm going to come right underneath

the menu options and let's create another constant.

But this time called our roots also equal to an array.

This array is going to be of a similar structure to the menu options where we will use an object for

each array item to hold our two pieces of root information.

So let's start with a name for our home root and a link for that for just slash.

I'm actually going to go ahead and copy this and then we'll just paste that three four and five times.

And now let's go in and change each of these for each of our different routes.

So the second one being services slash services the name for the revolution for Slash.

Revolution Rev Lucian and then about us about us for Slash about and then contact us for Slash contact.

I'm actually going to go ahead and leave the estimate real out of this and you'll see why here and a

little bit.

All right.

With that in place let's come down into our use effect function and here we're actually going to start

the first refactor with our switch statement because I see a lot of repeated code in here where we're

just repeatedly checking the link that we want to mark as active and then we're making sure that that

value is not already set.

And then if it is not we go ahead and set the correct values so let's go ahead and start to try and

generalize this.

And what I'm gonna do is get a bunch of the code on the screen so we're just going to type it all out

and then I'll go through and explain how all of it is working.

All right.

So I'm gonna start within array and here I'm going to spread the menu options and the roots then for

each of the items within this new Array.

Let's take the roots and then open up the arrow function to begin with a switch where we will switch

over the window window dot location dot path name and inside of here our case will use the back ticks

to inject javascript into the string and we will make this our route dot link then inside of the case

if our current value does not equal our current route dot active index well then we're going to set

our value to the route dot active index.

And then if our route dot selected index exists and that route dot selected selected index is not equal

to the already selected index well then we are going to set the selected index to our route dot selected

index now what's come out of the case make sure we're outside of this pair of bracket and here will

add or break statement break statement and then outside of that we're going to add our default case

with a break statement there as well.

All right.

So now let's actually go ahead and delete the entire switch statement that we have down here below.

So we'll get rid of that and forgot the little bracket.

So get rid of the entire switch statement.

So now are use effect only has this new piece of code that we added and then down here for our dependencies

for the use hook.

We need to add the menu options the selected selected index as well as the roots.

All right.

So just a few more changes.

Let's come up to the menu options and the Roots arrays.

And we're going to add a couple of pieces of information to each route.

So up in our first menu option let's add an active index property and we'll set this to one and a selected

index property which we'll set to 0.

Let's go ahead and copy these two properties and we will paste them down on each of these routes here

in the menu options.

And now let's go and change the selected index for each one.

But we're actually going to receive all of the active indexes to 1 for the menu options.

But let's go and set our selected index for custom software development to 1.

These selected index for mobile app development to add these selected index for Web site development

to three.

Then let's come to our roots array and inside of each route here we're going to just add in active index.

And this time we'll set this one to zero.

And now what's copy just the active index property.

And we'll put that on the rest of these routes except the first active index for our services tab and

then the second for the revolution third and the fourth active index.

Let's go ahead and save this now so that the code will look a little bit cleaner.

And now I'm going to walk you through what we actually just did.

So here in our use affect function we started by combining the menu options and the routes arrays that

we have up here then for each of the routes in this new Array.

So now for every single option that we could have then we iterate over that and for each individual

route we create a switch statement that checks the route dot link.

So that is our link property right here as the case to check against our window dot location dot path

name this is exactly what we were doing in the switch statement before except now we're getting the

link from our arrays when we iterate instead of setting them explicitly.

Next we do a check to see if our current value has already been set correctly by checking the active

tab property on our route.

This is why we went through and added an active tab property to each of the routes to specify which

index they need to make sure is set to active.

We do this because all of these services pages so the Web site development mobile app development and

custom software development pages they all set these services tab equal to active and so we couldn't

have just used the index from say mapping over it.

So by setting that value explicitly we guarantee that we're always going to be maintaining the correct

active tab.

And then if we're not already on that active tab we're going to set it correctly.

Lastly we have another check to see if our route dot selected index property even exists.

And then if it does so if this is not undefined then we also check to see if these selected index has

already been set on our selected index piece of state.

This is for our menu items and that is why we went and added these selected index property to each of

our menu option routes.

This is the index of their menu option that will be used to determine which of them is selected again

by setting this explicitly we maintain that we are always on the correct selected menu option if we

are not.

Then we go ahead and set that correctly which makes sure that everything is correct.

This is a really clean piece of code that definitely shrunk down what was a pretty large switch statement

and made it not only more efficient and smaller but also makes it more usable and generalized.

If I wanted to use this same piece of code in a situation in a different project in the future or when

I want to add roots to this project.

This solution is already generalized so that all I would have to do is add roots to the roots array.