To give the user some feedback that it worked,
we probably wanna navigate away from this page
once the request was sent.
And previously, we navigated through these links,
which we added to the navigation here.
Now we wanna trigger navigation programmatically.
So once we're done with a certain task,
in this case once we're done with sending a http request.
Thankfully, implementing this is also simple
with React Router.
We can simply import something from react-router-dom,
and that something is another hook. The "useHistory" hook.
So, React has some built-in hooks.
Other third-party packages also can provide their own hooks.
You can also build your own hooks,
but we're not going to do that here in this course.
But here we've now got this "useHistory" hook,
and we can call this hook here
in the NewMeetupPage component function.
Now this gives us a history object,
and that's simply a object which exposes certain
methods to us that allow us to
manipulate the browser history.
To navigate away for example.
Now here, let's say we wanna navigate away
after the data was submitted.
To achieve this, we can use the fact that
fetch returns a Promise,
which resolves as soon as this is done.
And hence, we can add a "then" block here.
And the final function, which will execute
when the Promise completed.
And it's then in this function
where we wanna execute "history",
and then some method that allows us to navigate away.
For example, the "push" method.
To "push" a new page onto the stack of pages.
In that case, we could then later
use the "back" button to go back to the previous page.
And since that doesn't make too much sense
after submitting a form,
I'll instead use the "replace" method.
That will navigate us away, but it won't allow us
to use the "back" button to go back to the previous page.
And here, I just want to navigate
to the starting page, with "/" nothing.
So in the end, we pass to replace
what we also passed to link to the "to" prompt.
Here we set up the destination,
the target destination of a link,
with the "replace" and "push" methods on history,
we also passed the target path as a argument now.
Now instead of "then", we could also use
async "await" here, by the way, if you wanted to.
Now with that, we're navigating away
once the request succeeded.
And therefore, let's now give this a try.
Let's save this.
And enter some new data.
I'll repeat using that image here, that dummy image URL.
Some other address, and some other description here.
And then I'll click on "Add Meetup".
And you see that I'm now navigated away.
And going back won't get me back to that form.
And on Firebase, we of course
now also have that second meetup added here.
And that's how we can navigate programmatically
and leave that "Add New Meetup" page once we're done.
Now, let's make sure that the meetups we show
on the "All Meetups" page
are actually the meetups stored on Firebase.
Because at the moment, that's not happening.