Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,810 --> 00:00:08,400
You can see if I come over to the application and refresh the page that the About Us page that I was
2
00:00:08,400 --> 00:00:17,320
on is still selected so you can see our active tab refresh is still working with our new refactor this
3
00:00:17,320 --> 00:00:23,260
refactor is actually going to be more useful than you might be thinking because this will actually also
4
00:00:23,260 --> 00:00:28,960
allow us to do two more re factors that will really clean up the code in our header.
5
00:00:29,110 --> 00:00:36,170
So let's come over down past use effect inside of our tabs component.
6
00:00:36,310 --> 00:00:44,410
And here we're actually going to replace all of these tabs with one single statement to iterate over
7
00:00:44,410 --> 00:00:48,010
our roots and create a tab for each one.
8
00:00:48,010 --> 00:00:56,170
So let's take a look at what these need and you can see that each tab has a class name of tab a component
9
00:00:56,230 --> 00:01:03,940
of link a two of the link they need to go to and a label with their name.
10
00:01:04,080 --> 00:01:11,010
Well that is all information that we can either copy for all of them or the root in the name is exactly
11
00:01:11,010 --> 00:01:13,220
the information we have in our roots.
12
00:01:13,290 --> 00:01:14,890
Object.
13
00:01:15,030 --> 00:01:24,270
The only exception here if you notice is our services tab the services tab has an on mouse over the
14
00:01:24,270 --> 00:01:28,370
aria Owens and the Aria has pop up props.
15
00:01:28,410 --> 00:01:34,680
So before we start this refactor what I'm going to do is go ahead and actually set each of these properties
16
00:01:34,950 --> 00:01:38,990
on our services root in the roots array.
17
00:01:39,300 --> 00:01:42,760
So let's get started by doing this and we'll copy.
18
00:01:42,810 --> 00:01:50,310
Actually we can cut everything out of the aria Dash has Owens for our services tab and come up to their
19
00:01:50,310 --> 00:01:54,480
roots array and inside of our services object.
20
00:01:54,480 --> 00:02:02,580
Let's create an aria owns property and then just paste in the ternary statement that we just copy.
21
00:02:03,120 --> 00:02:12,180
Next let's create a Aria has actually Aria pop up property and it will come down and copy the ternary
22
00:02:12,180 --> 00:02:20,770
statement inside of our Aria pop up property here and put that inside of our object blast one is our
23
00:02:21,040 --> 00:02:30,230
mouse over function and it will set this equal to again everything inside of our own mouse over property.
24
00:02:30,340 --> 00:02:33,120
So cut that and then we'll come and we'll paste it.
25
00:02:33,280 --> 00:02:37,840
And now all of that information is living within our roots array.
26
00:02:37,840 --> 00:02:45,010
So now if we come back to our tabs we can go ahead and inject some javascript where we will take our
27
00:02:45,010 --> 00:02:55,000
routes array and map over it which will give us access to each individual route along with an index.
28
00:02:55,390 --> 00:03:02,140
We actually need to wrap these in a another set of parentheses and then let's open up our arrow function.
29
00:03:02,260 --> 00:03:08,290
And again actually the use not brackets this is gonna be a set of parentheses as well and inside of
30
00:03:08,290 --> 00:03:08,700
here.
31
00:03:08,710 --> 00:03:19,770
Let's create our tab component remember we said that each tab needs a class name of collapses dot tab
32
00:03:20,010 --> 00:03:24,870
as well as a component of link.
33
00:03:24,990 --> 00:03:36,400
We also need a two equal to our round dot link and then similarly we need our own label equal to our
34
00:03:36,400 --> 00:03:37,090
root.
35
00:03:37,100 --> 00:03:45,630
The name property that looks pretty good so far but we actually need to cover for the services tab.
36
00:03:45,790 --> 00:03:48,160
In which case we'll have an aria.
37
00:03:48,160 --> 00:03:53,450
DASH OWNS PROPERTY AND WE'LL SET THIS equal to our roots.
38
00:03:53,530 --> 00:04:03,620
Dot dot Aria owns and so this will provide the correct Aria owns information for our services tab where
39
00:04:03,640 --> 00:04:10,480
on all the other routes that do not have an aria owns property that will simply return undefined which
40
00:04:10,480 --> 00:04:14,140
is equivalent to not setting the property at all.
41
00:04:14,140 --> 00:04:24,460
We'll do that same thing for the aria Aria Dash has pop up properties equal to our route da Aria Aria
42
00:04:24,550 --> 00:04:35,350
pop up and lastly for our on mouse over we'll set that equal to the route dot mouse over event and make
43
00:04:35,350 --> 00:04:36,580
sure I have that correct.
44
00:04:36,610 --> 00:04:44,740
Yes we said mouse over and then mouse over we actually don't need this second tab right here so let's
45
00:04:44,740 --> 00:04:47,290
make this a self closing tab.
46
00:04:47,290 --> 00:04:51,890
And now we can actually go ahead and all the way down to the contact.
47
00:04:52,010 --> 00:04:56,820
Let's get rid of all of those tabs inside of there.
48
00:04:57,010 --> 00:05:00,100
Make sure you go and get this Home tab as well.
49
00:05:00,100 --> 00:05:08,730
So the inside of our tabs component all we are doing is iterating over our roots now in our page here.
50
00:05:08,780 --> 00:05:10,590
We have the tabs visible.
51
00:05:10,610 --> 00:05:17,770
So if we save this in the page refreshes all of the tabs should still be there properly so let's save
52
00:05:17,770 --> 00:05:18,220
this.
53
00:05:18,250 --> 00:05:20,050
And we'll see the page refresh.
54
00:05:20,200 --> 00:05:24,450
And you can see all of the tabs still exist and look normal.
55
00:05:25,650 --> 00:05:33,450
This did a great job of refactoring our tabs component but we can actually implement this same technique
56
00:05:33,720 --> 00:05:35,800
in another place as well.
57
00:05:35,970 --> 00:05:43,140
So let's come down here all the way to our list which we are using inside the drawer and you can see
58
00:05:43,140 --> 00:05:49,250
that each of our own list items has a lot of these same functionality as well.
59
00:05:49,290 --> 00:05:55,830
So each one has an on click property which is setting the open door to false and then setting their
60
00:05:55,830 --> 00:06:01,530
value equal to whatever index they are currently on as well as they all have the divider.
61
00:06:01,530 --> 00:06:09,330
Prop A BUTTON prop the component equals link prop the two prop to their link and a selected prop a checking
62
00:06:09,360 --> 00:06:11,130
if their value is selected
63
00:06:13,570 --> 00:06:20,710
inside of the list item all of the A-list item texts are the same as well applying classes for our style
64
00:06:20,770 --> 00:06:25,060
items and having the name of the item inside.
65
00:06:25,120 --> 00:06:31,060
This again looks like a perfect place for us to iterate over the routes and get rid of a bunch of this
66
00:06:31,060 --> 00:06:37,660
redundant code so underneath our list component we'll inject some more javascript.
67
00:06:37,800 --> 00:06:44,940
And again we'll take our routes array and map over it for our make sure we get the extra parentheses
68
00:06:45,210 --> 00:06:54,660
for our route and index and then we will open the arrow function up again parentheses keep forgetting
69
00:06:54,660 --> 00:07:04,960
that but inside of here let's create a list item and then a list item text inside of their inside of
70
00:07:04,960 --> 00:07:06,520
our list item text.
71
00:07:06,520 --> 00:07:14,920
Let's go ahead and put our route dot name and then we'll also add the disable typography prop to the
72
00:07:14,920 --> 00:07:20,410
list item text as well on our list item component.
73
00:07:20,410 --> 00:07:30,280
Let's add the on click handler so equal to our function which is calling all of our other handlers to
74
00:07:30,280 --> 00:07:44,620
set set the open draw to false as well as setting R value equal to the route dot active index.
75
00:07:44,620 --> 00:07:50,770
Remember we already had that property for determining which index needs to be active for each given
76
00:07:50,770 --> 00:07:56,430
route and so we'll just pass that through explicitly here to avoid any confusion.
77
00:07:56,830 --> 00:08:00,750
Now outside of our own click but still on our list item.
78
00:08:00,850 --> 00:08:10,210
Let's go ahead and add the divider prop along with the button prop and the component equals link props
79
00:08:11,310 --> 00:08:18,660
then we have our two property which is going to be our route dot link link.
80
00:08:18,750 --> 00:08:25,800
And lastly these selected property which is where we're checking if the currently selected value is
81
00:08:25,800 --> 00:08:27,930
going to be equal to our route.
82
00:08:28,030 --> 00:08:35,000
Dot active index I think this means actually we don't need this index right here so we can go ahead
83
00:08:35,030 --> 00:08:39,750
and get rid of that which means we can get rid of that extra set of parentheses as well.
84
00:08:40,400 --> 00:08:47,840
I think the only other thing we're missing is on our list I don't text we forgot the class name equal
85
00:08:48,110 --> 00:08:49,750
to R value.
86
00:08:49,760 --> 00:08:58,910
Check to see if we are on the route dot active index and if we are then we're going to apply the class's
87
00:08:58,910 --> 00:09:09,410
dot draw item style along with the classes dot draw item draw item selected style and if we are not
88
00:09:09,410 --> 00:09:18,310
on a selected item then we're just going to apply the draw item style now that I think has officially
89
00:09:18,310 --> 00:09:26,740
covered all of our functionality for all of these list items and so will come down and except for our
90
00:09:26,800 --> 00:09:28,870
estimate list item.
91
00:09:28,870 --> 00:09:36,430
And here it uses the estimate class name which is why I found it easier to just leave it as its own
92
00:09:36,430 --> 00:09:38,030
separate and list item.
93
00:09:38,200 --> 00:09:46,300
But up above what's take the contact us and all of the other list items all the way up to our home list
94
00:09:46,330 --> 00:09:55,130
item and we will get rid of those leaving only our routes being iterated over up above If we go ahead
95
00:09:55,160 --> 00:09:56,770
and save this now.
96
00:09:56,870 --> 00:10:03,680
Our page will refresh and if we shrink the window down to where our draw appears you'll see when we
97
00:10:03,680 --> 00:10:04,640
open it up.
98
00:10:04,690 --> 00:10:08,090
The all of the links are still within.
99
00:10:08,330 --> 00:10:14,960
This means we are correctly iterating over our routes and creating a list item within our draw for each
100
00:10:14,960 --> 00:10:15,620
one.
101
00:10:15,620 --> 00:10:23,950
And you can see if I go and click the revolution is still functioning so you can see how simply rearranging
102
00:10:23,950 --> 00:10:32,590
our routes into an array which we can then iterate over allowed us to save a lot of space and efficiency
103
00:10:32,830 --> 00:10:41,190
in multiple locations within our code whenever you find yourself repeating multiple pieces of functionality
104
00:10:41,220 --> 00:10:47,580
like we did for The Wiz or for the tabs you always want to try and think about a way that you could
105
00:10:47,580 --> 00:10:52,680
refactor to make it less redundant and more efficient.
106
00:10:52,680 --> 00:10:53,010
All right.
107
00:10:53,040 --> 00:10:55,240
A couple more extra things.
108
00:10:55,320 --> 00:11:03,840
So here if we come up to our menu I want to actually add a prop here called Keep mounted which will
109
00:11:03,840 --> 00:11:10,500
make sure that all of the menu items are actually always mounted in the DOM regardless of whether or
110
00:11:10,500 --> 00:11:15,990
not they're actually visible on the screen which will just make this a little bit better for search
111
00:11:16,020 --> 00:11:22,190
engine optimization which will always be able to find which tabs we have on our website.
112
00:11:22,260 --> 00:11:28,530
We actually also need to come up to where we iterate over our routes and on the tab.
113
00:11:28,560 --> 00:11:31,250
I forgot the since we are iterating over it.
114
00:11:31,260 --> 00:11:38,790
We need a key property and this needs to be a unique identifier so I'm going to head and use a back
115
00:11:38,790 --> 00:11:49,340
tick to inject the route along with the current the current index that we are on.
116
00:11:49,380 --> 00:11:56,430
This should be sufficient to create completely unique identifiers and I'll actually go ahead and copy
117
00:11:56,430 --> 00:12:01,230
this and then come down to our list and on our list item.
118
00:12:01,230 --> 00:12:03,960
Let's go ahead and paste that key as well.
119
00:12:03,960 --> 00:12:11,550
Except for index let's change that to the route dot active index and that should still create a unique
120
00:12:11,640 --> 00:12:13,410
identifier.
121
00:12:13,440 --> 00:12:18,060
I think we need one more up here where we iterate on our switch.
122
00:12:18,090 --> 00:12:22,680
Oh actually we used the for each instead of mapping so we won't need it.
123
00:12:22,680 --> 00:12:23,520
In that case.
13833
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.