All language subtitles for 20. Section Cleanup Continued

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.