1
00:00:00,930 --> 00:00:04,270
In the last video we got our create stream button to appear on the screen.

2
00:00:04,290 --> 00:00:08,400
Now I want to go back over to that form right now and I want to point out some really interesting behavior

3
00:00:08,460 --> 00:00:10,810
about our application currently works.

4
00:00:10,900 --> 00:00:12,760
So I'm going to go over to the create form.

5
00:00:12,870 --> 00:00:15,300
I'm going to make sure that I'm signed into the application.

6
00:00:15,360 --> 00:00:21,170
I'm also going to make sure that I have my network request tab open and that I'm sorting by SH requests.

7
00:00:21,300 --> 00:00:27,250
I didn't want to try to create a new stream and when I do so you're going to see some interesting behavior.

8
00:00:27,370 --> 00:00:31,400
So going to enter in a title here that says unexpected behavior.

9
00:00:31,680 --> 00:00:34,170
And I will give it a description of something like.

10
00:00:34,290 --> 00:00:36,850
Didn't expect that.

11
00:00:36,990 --> 00:00:39,180
And then I'm going to click on the submit button.

12
00:00:39,480 --> 00:00:42,280
Now when I do so you'll notice that we get the request right here.

13
00:00:42,300 --> 00:00:46,960
I see the post request and with out a doubt the request was successful.

14
00:00:46,980 --> 00:00:49,800
We created a new stream through our API.

15
00:00:49,830 --> 00:00:52,500
So what does the unexpected behavior here.

16
00:00:52,500 --> 00:00:56,730
Well the unexpected behavior is the fact that the user got no notification.

17
00:00:56,790 --> 00:01:00,320
There's nothing on the screen that says that the stream was successfully created.

18
00:01:00,630 --> 00:01:06,030
So ideally I think that we would probably automatically navigate our user back over to our list of streams

19
00:01:06,300 --> 00:01:09,180
after we have successfully created the stream.

20
00:01:09,180 --> 00:01:14,640
So in other words after we successfully make a request we should then navigate the user back over to

21
00:01:14,640 --> 00:01:17,120
a list of streams.

22
00:01:17,140 --> 00:01:24,020
Now we've kind of already taken a look at navigation but we've been doing a very specific type of navigation.

23
00:01:24,340 --> 00:01:29,770
So throughout this course so far in the last couple of videos as we have been talking about re-act Rotterdam

24
00:01:30,070 --> 00:01:35,680
we've been seeing examples of intentional navigation intentional navigation is it ever a user clicks

25
00:01:35,680 --> 00:01:37,450
on a link component.

26
00:01:37,450 --> 00:01:41,590
That is when a user is trying to go from page a over to page B.

27
00:01:41,980 --> 00:01:45,120
But in this case we're going to do a different type of navigation.

28
00:01:45,130 --> 00:01:47,610
This is referred to as programmatic navigation.

29
00:01:47,620 --> 00:01:53,830
It's when you and I run some code in response to some type of event and that code has the intent of

30
00:01:53,830 --> 00:01:56,530
changing the page that the user is looking at.

31
00:01:56,560 --> 00:02:02,590
So we essentially want to make sure that the user forcibly gets navigated back to localhost 3000 after

32
00:02:02,620 --> 00:02:05,610
they create a stream.

33
00:02:05,910 --> 00:02:09,670
Now doing this programmatic navigation is not the worst thing in the world.

34
00:02:09,720 --> 00:02:15,270
But before we get too deep into programmatic navigation I want to think a little bit about when exactly

35
00:02:15,450 --> 00:02:17,490
we want to navigate the user around.

36
00:02:17,520 --> 00:02:25,170
In other words exactly what instant in time do we want to try to get the user to go back over to localhost

37
00:02:25,250 --> 00:02:27,770
3000 away from this form.

38
00:02:27,780 --> 00:02:30,460
There's actually some interesting considerations around this.

39
00:02:30,540 --> 00:02:33,480
So it's like let's look at a quick diagram or two.

40
00:02:33,940 --> 00:02:34,180
OK.

41
00:02:34,200 --> 00:02:40,910
So here's a possible scenario in which we might handle programmatic navigation in a not so good manner.

42
00:02:40,950 --> 00:02:44,650
So this is a time line diagram so we start up at the very top up here.

43
00:02:44,700 --> 00:02:47,070
So we'll say that a user submits our form.

44
00:02:47,130 --> 00:02:53,280
We then make a request to our back and API to create the stream and then the instant after that we might

45
00:02:53,670 --> 00:02:57,210
attempt to navigate the user to our list of streams.

46
00:02:57,210 --> 00:02:59,100
Now this is not a good approach.

47
00:02:59,100 --> 00:03:00,970
So what I'm showing you right here about approach.

48
00:03:00,990 --> 00:03:03,030
You do not want to do this.

49
00:03:03,060 --> 00:03:08,160
The issue here is that if we navigate the user back over to our list of streams immediately after we

50
00:03:08,160 --> 00:03:11,350
make that request I'm talking about like the next line of code.

51
00:03:11,550 --> 00:03:19,470
Then if some time passed and we eventually got an error back from our API the stream might not get created

52
00:03:19,650 --> 00:03:25,200
but the user has already navigated away from the form and they don't really have a ability or the opportunity

53
00:03:25,410 --> 00:03:28,280
to update the form and try to recreate the stream.

54
00:03:28,560 --> 00:03:31,930
So essentially we don't want to navigate the user away too early.

55
00:03:31,950 --> 00:03:39,300
We only want to attempt to navigate the user away after we get an API response be it a err or a success

56
00:03:39,300 --> 00:03:45,170
message so essentially we want to make sure that our users Smyth's the form we want to make a request

57
00:03:45,170 --> 00:03:46,400
to the back and API.

58
00:03:46,580 --> 00:03:51,830
And then when we eventually get our response from the API only at that point in time are we going to

59
00:03:51,830 --> 00:03:56,720
attempt to either navigate the user back to a list of streams if the stream was graded successfully

60
00:03:56,960 --> 00:04:01,770
or we will show an error message to the user telling them why the creation failed.

61
00:04:02,060 --> 00:04:06,710
Now at present we are only going to be concerned with handling navigation rewin to handle the error

62
00:04:06,710 --> 00:04:11,870
message stuff or the case in which the API returns and air later on inside this application we will

63
00:04:11,870 --> 00:04:14,090
eventually handle error just not quite yet.

64
00:04:14,090 --> 00:04:18,380
It's going to be a separate discussion in its own little section so that you can easily refer back to

65
00:04:18,380 --> 00:04:19,410
it in the future.

66
00:04:19,800 --> 00:04:20,070
OK.

67
00:04:20,090 --> 00:04:20,750
That's pretty much it.

68
00:04:20,750 --> 00:04:26,180
We want to make sure that we only navigate the user after we get a success from our API.

69
00:04:26,210 --> 00:04:29,320
So essentially we want to trigger navigation.

70
00:04:29,620 --> 00:04:32,230
I'm going to open up my actions index DHHS file.

71
00:04:32,450 --> 00:04:40,460
We only want to trigger navigation from our create stream action creator after we get a successful response

72
00:04:40,520 --> 00:04:41,740
back from our API.

73
00:04:43,180 --> 00:04:48,610
Now we can trigger navigation immediately before or after the dispatch right here it doesn't really

74
00:04:48,610 --> 00:04:49,300
matter.

75
00:04:49,300 --> 00:04:54,280
But I think that maybe it might be a little bit more ideal to do the navigation after we dispatch our

76
00:04:54,280 --> 00:04:54,980
action.

77
00:04:55,210 --> 00:05:03,610
So right here essentially we want to do some Parow grammatic navigation to get the user back to the

78
00:05:03,700 --> 00:05:08,900
route route and remembered the route route shows the list of streams to the user.

79
00:05:08,920 --> 00:05:13,350
So that's the idea right here is where we want to do our programmatic navigation.

80
00:05:13,720 --> 00:05:13,950
OK.

81
00:05:13,960 --> 00:05:17,590
So we now kind of understand the circumstances around all this.

82
00:05:17,590 --> 00:05:18,890
Let's take a quick pause right here.

83
00:05:18,910 --> 00:05:22,740
When we come back the next video we're going to learn a little bit more about exactly how we do this

84
00:05:22,780 --> 00:05:24,040
programmatic navigation.