All language subtitles for 027 Navigating Programmatically_en

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:02,020 --> 00:00:04,950 To give the user some feedback that it worked, 2 00:00:04,950 --> 00:00:08,380 we probably wanna navigate away from this page 3 00:00:08,380 --> 00:00:10,820 once the request was sent. 4 00:00:10,820 --> 00:00:14,140 And previously, we navigated through these links, 5 00:00:14,140 --> 00:00:16,470 which we added to the navigation here. 6 00:00:16,470 --> 00:00:20,220 Now we wanna trigger navigation programmatically. 7 00:00:20,220 --> 00:00:22,590 So once we're done with a certain task, 8 00:00:22,590 --> 00:00:26,670 in this case once we're done with sending a http request. 9 00:00:26,670 --> 00:00:29,750 Thankfully, implementing this is also simple 10 00:00:29,750 --> 00:00:31,920 with React Router. 11 00:00:31,920 --> 00:00:36,920 We can simply import something from react-router-dom, 12 00:00:36,980 --> 00:00:41,980 and that something is another hook. The "useHistory" hook. 13 00:00:42,600 --> 00:00:45,229 So, React has some built-in hooks. 14 00:00:45,229 --> 00:00:50,229 Other third-party packages also can provide their own hooks. 15 00:00:50,300 --> 00:00:52,090 You can also build your own hooks, 16 00:00:52,090 --> 00:00:55,310 but we're not going to do that here in this course. 17 00:00:55,310 --> 00:00:57,640 But here we've now got this "useHistory" hook, 18 00:00:57,640 --> 00:01:00,010 and we can call this hook here 19 00:01:00,010 --> 00:01:02,723 in the NewMeetupPage component function. 20 00:01:03,750 --> 00:01:05,990 Now this gives us a history object, 21 00:01:05,990 --> 00:01:09,590 and that's simply a object which exposes certain 22 00:01:09,590 --> 00:01:12,190 methods to us that allow us to 23 00:01:12,190 --> 00:01:14,490 manipulate the browser history. 24 00:01:14,490 --> 00:01:17,150 To navigate away for example. 25 00:01:17,150 --> 00:01:19,880 Now here, let's say we wanna navigate away 26 00:01:19,880 --> 00:01:22,130 after the data was submitted. 27 00:01:22,130 --> 00:01:25,340 To achieve this, we can use the fact that 28 00:01:25,340 --> 00:01:27,460 fetch returns a Promise, 29 00:01:27,460 --> 00:01:30,360 which resolves as soon as this is done. 30 00:01:30,360 --> 00:01:32,990 And hence, we can add a "then" block here. 31 00:01:32,990 --> 00:01:35,530 And the final function, which will execute 32 00:01:35,530 --> 00:01:37,371 when the Promise completed. 33 00:01:37,371 --> 00:01:39,560 And it's then in this function 34 00:01:39,560 --> 00:01:41,970 where we wanna execute "history", 35 00:01:41,970 --> 00:01:45,500 and then some method that allows us to navigate away. 36 00:01:45,500 --> 00:01:47,890 For example, the "push" method. 37 00:01:47,890 --> 00:01:51,920 To "push" a new page onto the stack of pages. 38 00:01:51,920 --> 00:01:53,900 In that case, we could then later 39 00:01:53,900 --> 00:01:57,680 use the "back" button to go back to the previous page. 40 00:01:57,680 --> 00:01:59,443 And since that doesn't make too much sense 41 00:01:59,443 --> 00:02:01,850 after submitting a form, 42 00:02:01,850 --> 00:02:04,280 I'll instead use the "replace" method. 43 00:02:04,280 --> 00:02:07,290 That will navigate us away, but it won't allow us 44 00:02:07,290 --> 00:02:11,540 to use the "back" button to go back to the previous page. 45 00:02:11,540 --> 00:02:13,260 And here, I just want to navigate 46 00:02:13,260 --> 00:02:16,513 to the starting page, with "/" nothing. 47 00:02:17,530 --> 00:02:19,790 So in the end, we pass to replace 48 00:02:19,790 --> 00:02:24,790 what we also passed to link to the "to" prompt. 49 00:02:24,930 --> 00:02:27,070 Here we set up the destination, 50 00:02:27,070 --> 00:02:29,530 the target destination of a link, 51 00:02:29,530 --> 00:02:33,550 with the "replace" and "push" methods on history, 52 00:02:33,550 --> 00:02:37,373 we also passed the target path as a argument now. 53 00:02:38,620 --> 00:02:40,920 Now instead of "then", we could also use 54 00:02:40,920 --> 00:02:43,493 async "await" here, by the way, if you wanted to. 55 00:02:44,370 --> 00:02:46,110 Now with that, we're navigating away 56 00:02:46,110 --> 00:02:47,980 once the request succeeded. 57 00:02:47,980 --> 00:02:50,170 And therefore, let's now give this a try. 58 00:02:50,170 --> 00:02:51,663 Let's save this. 59 00:02:52,690 --> 00:02:56,420 And enter some new data. 60 00:02:56,420 --> 00:03:01,420 I'll repeat using that image here, that dummy image URL. 61 00:03:02,080 --> 00:03:07,080 Some other address, and some other description here. 62 00:03:08,530 --> 00:03:10,640 And then I'll click on "Add Meetup". 63 00:03:10,640 --> 00:03:13,643 And you see that I'm now navigated away. 64 00:03:13,643 --> 00:03:18,100 And going back won't get me back to that form. 65 00:03:18,100 --> 00:03:19,660 And on Firebase, we of course 66 00:03:19,660 --> 00:03:23,080 now also have that second meetup added here. 67 00:03:23,080 --> 00:03:25,500 And that's how we can navigate programmatically 68 00:03:25,500 --> 00:03:30,070 and leave that "Add New Meetup" page once we're done. 69 00:03:30,070 --> 00:03:32,590 Now, let's make sure that the meetups we show 70 00:03:32,590 --> 00:03:34,160 on the "All Meetups" page 71 00:03:34,160 --> 00:03:37,240 are actually the meetups stored on Firebase. 72 00:03:37,240 --> 00:03:39,983 Because at the moment, that's not happening. 5673

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.