In the last video we got our create stream button to appear on the screen.
Now I want to go back over to that form right now and I want to point out some really interesting behavior
about our application currently works.
So I'm going to go over to the create form.
I'm going to make sure that I'm signed into the application.
I'm also going to make sure that I have my network request tab open and that I'm sorting by SH requests.
I didn't want to try to create a new stream and when I do so you're going to see some interesting behavior.
So going to enter in a title here that says unexpected behavior.
And I will give it a description of something like.
Didn't expect that.
And then I'm going to click on the submit button.
Now when I do so you'll notice that we get the request right here.
I see the post request and with out a doubt the request was successful.
We created a new stream through our API.
So what does the unexpected behavior here.
Well the unexpected behavior is the fact that the user got no notification.
There's nothing on the screen that says that the stream was successfully created.
So ideally I think that we would probably automatically navigate our user back over to our list of streams
after we have successfully created the stream.
So in other words after we successfully make a request we should then navigate the user back over to
a list of streams.
Now we've kind of already taken a look at navigation but we've been doing a very specific type of navigation.
So throughout this course so far in the last couple of videos as we have been talking about re-act Rotterdam
we've been seeing examples of intentional navigation intentional navigation is it ever a user clicks
on a link component.
That is when a user is trying to go from page a over to page B.
But in this case we're going to do a different type of navigation.
This is referred to as programmatic navigation.
It's when you and I run some code in response to some type of event and that code has the intent of
changing the page that the user is looking at.
So we essentially want to make sure that the user forcibly gets navigated back to localhost 3000 after
they create a stream.
Now doing this programmatic navigation is not the worst thing in the world.
But before we get too deep into programmatic navigation I want to think a little bit about when exactly
we want to navigate the user around.
In other words exactly what instant in time do we want to try to get the user to go back over to localhost
3000 away from this form.
There's actually some interesting considerations around this.
So it's like let's look at a quick diagram or two.
OK.
So here's a possible scenario in which we might handle programmatic navigation in a not so good manner.
So this is a time line diagram so we start up at the very top up here.
So we'll say that a user submits our form.
We then make a request to our back and API to create the stream and then the instant after that we might
attempt to navigate the user to our list of streams.
Now this is not a good approach.
So what I'm showing you right here about approach.
You do not want to do this.
The issue here is that if we navigate the user back over to our list of streams immediately after we
make that request I'm talking about like the next line of code.
Then if some time passed and we eventually got an error back from our API the stream might not get created
but the user has already navigated away from the form and they don't really have a ability or the opportunity
to update the form and try to recreate the stream.
So essentially we don't want to navigate the user away too early.
We only want to attempt to navigate the user away after we get an API response be it a err or a success
message so essentially we want to make sure that our users Smyth's the form we want to make a request
to the back and API.
And then when we eventually get our response from the API only at that point in time are we going to
attempt to either navigate the user back to a list of streams if the stream was graded successfully
or we will show an error message to the user telling them why the creation failed.
Now at present we are only going to be concerned with handling navigation rewin to handle the error
message stuff or the case in which the API returns and air later on inside this application we will
eventually handle error just not quite yet.
It's going to be a separate discussion in its own little section so that you can easily refer back to
it in the future.
OK.
That's pretty much it.
We want to make sure that we only navigate the user after we get a success from our API.
So essentially we want to trigger navigation.
I'm going to open up my actions index DHHS file.
We only want to trigger navigation from our create stream action creator after we get a successful response
back from our API.
Now we can trigger navigation immediately before or after the dispatch right here it doesn't really
matter.
But I think that maybe it might be a little bit more ideal to do the navigation after we dispatch our
action.
So right here essentially we want to do some Parow grammatic navigation to get the user back to the
route route and remembered the route route shows the list of streams to the user.
So that's the idea right here is where we want to do our programmatic navigation.
OK.
So we now kind of understand the circumstances around all this.
Let's take a quick pause right here.
When we come back the next video we're going to learn a little bit more about exactly how we do this
programmatic navigation.