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.