1
00:00:02,000 --> 00:00:04,000
To give the user some feedback that it worked,

2
00:00:04,000 --> 00:00:08,000
we probably wanna navigate away from this page

3
00:00:08,000 --> 00:00:10,000
once the request was sent.

4
00:00:10,000 --> 00:00:14,000
And previously, we navigated through these links,

5
00:00:14,000 --> 00:00:16,000
which we added to the navigation here.

6
00:00:16,000 --> 00:00:20,000
Now we wanna trigger navigation programmatically.

7
00:00:20,000 --> 00:00:22,000
So once we're done with a certain task,

8
00:00:22,000 --> 00:00:26,000
in this case once we're done with sending a http request.

9
00:00:26,000 --> 00:00:29,000
Thankfully, implementing this is also simple

10
00:00:29,000 --> 00:00:31,000
with React Router.

11
00:00:31,000 --> 00:00:36,000
We can simply import something from react-router-dom,

12
00:00:36,000 --> 00:00:41,000
and that something is another hook. The "useHistory" hook.

13
00:00:42,000 --> 00:00:45,000
So, React has some built-in hooks.

14
00:00:45,000 --> 00:00:50,000
Other third-party packages also can provide their own hooks.

15
00:00:50,000 --> 00:00:52,000
You can also build your own hooks,

16
00:00:52,000 --> 00:00:55,000
but we're not going to do that here in this course.

17
00:00:55,000 --> 00:00:57,000
But here we've now got this "useHistory" hook,

18
00:00:57,000 --> 00:01:00,000
and we can call this hook here

19
00:01:00,000 --> 00:01:02,000
in the NewMeetupPage component function.

20
00:01:03,000 --> 00:01:05,000
Now this gives us a history object,

21
00:01:05,000 --> 00:01:09,000
and that's simply a object which exposes certain

22
00:01:09,000 --> 00:01:12,000
methods to us that allow us to

23
00:01:12,000 --> 00:01:14,000
manipulate the browser history.

24
00:01:14,000 --> 00:01:17,000
To navigate away for example.

25
00:01:17,000 --> 00:01:19,000
Now here, let's say we wanna navigate away

26
00:01:19,000 --> 00:01:22,000
after the data was submitted.

27
00:01:22,000 --> 00:01:25,000
To achieve this, we can use the fact that

28
00:01:25,000 --> 00:01:27,000
fetch returns a Promise,

29
00:01:27,000 --> 00:01:30,000
which resolves as soon as this is done.

30
00:01:30,000 --> 00:01:32,000
And hence, we can add a "then" block here.

31
00:01:32,000 --> 00:01:35,000
And the final function, which will execute

32
00:01:35,000 --> 00:01:37,000
when the Promise completed.

33
00:01:37,000 --> 00:01:39,000
And it's then in this function

34
00:01:39,000 --> 00:01:41,000
where we wanna execute "history",

35
00:01:41,000 --> 00:01:45,000
and then some method that allows us to navigate away.

36
00:01:45,000 --> 00:01:47,000
For example, the "push" method.

37
00:01:47,000 --> 00:01:51,000
To "push" a new page onto the stack of pages.

38
00:01:51,000 --> 00:01:53,000
In that case, we could then later

39
00:01:53,000 --> 00:01:57,000
use the "back" button to go back to the previous page.

40
00:01:57,000 --> 00:01:59,000
And since that doesn't make too much sense

41
00:01:59,000 --> 00:02:01,000
after submitting a form,

42
00:02:01,000 --> 00:02:04,000
I'll instead use the "replace" method.

43
00:02:04,000 --> 00:02:07,000
That will navigate us away, but it won't allow us

44
00:02:07,000 --> 00:02:11,000
to use the "back" button to go back to the previous page.

45
00:02:11,000 --> 00:02:13,000
And here, I just want to navigate

46
00:02:13,000 --> 00:02:16,000
to the starting page, with "/" nothing.

47
00:02:17,000 --> 00:02:19,000
So in the end, we pass to replace

48
00:02:19,000 --> 00:02:24,000
what we also passed to link to the "to" prompt.

49
00:02:24,000 --> 00:02:27,000
Here we set up the destination,

50
00:02:27,000 --> 00:02:29,000
the target destination of a link,

51
00:02:29,000 --> 00:02:33,000
with the "replace" and "push" methods on history,

52
00:02:33,000 --> 00:02:37,000
we also passed the target path as a argument now.

53
00:02:38,000 --> 00:02:40,000
Now instead of "then", we could also use

54
00:02:40,000 --> 00:02:43,000
async "await" here, by the way, if you wanted to.

55
00:02:44,000 --> 00:02:46,000
Now with that, we're navigating away

56
00:02:46,000 --> 00:02:47,000
once the request succeeded.

57
00:02:47,000 --> 00:02:50,000
And therefore, let's now give this a try.

58
00:02:50,000 --> 00:02:51,000
Let's save this.

59
00:02:52,000 --> 00:02:56,000
And enter some new data.

60
00:02:56,000 --> 00:03:01,000
I'll repeat using that image here, that dummy image URL.

61
00:03:02,000 --> 00:03:07,000
Some other address, and some other description here.

62
00:03:08,000 --> 00:03:10,000
And then I'll click on "Add Meetup".

63
00:03:10,000 --> 00:03:13,000
And you see that I'm now navigated away.

64
00:03:13,000 --> 00:03:18,000
And going back won't get me back to that form.

65
00:03:18,000 --> 00:03:19,000
And on Firebase, we of course

66
00:03:19,000 --> 00:03:23,000
now also have that second meetup added here.

67
00:03:23,000 --> 00:03:25,000
And that's how we can navigate programmatically

68
00:03:25,000 --> 00:03:30,000
and leave that "Add New Meetup" page once we're done.

69
00:03:30,000 --> 00:03:32,000
Now, let's make sure that the meetups we show

70
00:03:32,000 --> 00:03:34,000
on the "All Meetups" page

71
00:03:34,000 --> 00:03:37,000
are actually the meetups stored on Firebase.

72
00:03:37,000 --> 00:03:39,000
Because at the moment, that's not happening.