1
00:00:00,590 --> 00:00:06,180
In the last section we finished wiring up our create post action creator and we're now able to create

2
00:00:06,210 --> 00:00:09,510
a new post by using our back and API.

3
00:00:09,510 --> 00:00:14,130
The next thing we need to work on is to make sure that we can navigate a user back to our list of posts

4
00:00:14,580 --> 00:00:17,580
after we have created the new post.

5
00:00:17,580 --> 00:00:22,500
So to help us kind of visualize exactly what needs to happen here is take a look at a diagram.

6
00:00:22,830 --> 00:00:25,860
The general flow here will be a user Smyth's the form.

7
00:00:26,070 --> 00:00:33,510
We will validate the form we will call that on submit helper that we created that on Smidt helper calls

8
00:00:33,510 --> 00:00:36,130
our action creator to make the API request.

9
00:00:36,210 --> 00:00:38,040
And then here's the key part.

10
00:00:38,130 --> 00:00:45,900
We wait we wait for the API request to complete and only after the request has completed successfully

11
00:00:46,310 --> 00:00:52,230
do we then somehow navigate the user over to our lists of posts where they can now see the new post

12
00:00:52,230 --> 00:00:54,020
that was just created.

13
00:00:54,030 --> 00:00:59,040
So the big key here is the fact that we want to wait for API requests to be completed before we attempt

14
00:00:59,040 --> 00:01:01,500
to initiate any navigation.

15
00:01:01,500 --> 00:01:02,770
So that's the big challenge.

16
00:01:02,770 --> 00:01:05,160
That's what we have to figure out how to do.

17
00:01:06,110 --> 00:01:09,310
So you might be thinking Well Stephen navigation isn't that hard.

18
00:01:09,330 --> 00:01:14,220
We've been talking about navigation quite a bit by using that linked tag right here right.

19
00:01:14,430 --> 00:01:19,910
So we've been using the link tag to navigate around two different components inside of our application.

20
00:01:20,100 --> 00:01:23,330
In this case the link tag is really not appropriate.

21
00:01:23,340 --> 00:01:28,890
Remember that the link tag is a re-act component that is used to generate an anchored tag that renders

22
00:01:28,980 --> 00:01:32,190
in the dawn like in the age T.M. document.

23
00:01:32,190 --> 00:01:38,130
In this case we don't want to have a link tag be created that the user has to click on to navigate back

24
00:01:38,130 --> 00:01:41,150
to the last screen after the post has been created.

25
00:01:41,190 --> 00:01:48,060
We want to just automatically navigate the user the instant we know that the Post has been created successfully.

26
00:01:48,060 --> 00:01:51,230
So we would refer to this as programmatic navigation.

27
00:01:51,240 --> 00:01:59,420
We want to automatically navigate the user around our application the link tag is not for programmatic

28
00:01:59,420 --> 00:02:06,320
navigation it's for navigation that responds to a user clicking on something to handle programmatic

29
00:02:06,320 --> 00:02:14,360
navigation re-act router passes in a big set of props on or into our component that is being read rendered

30
00:02:14,360 --> 00:02:15,980
by our route.

31
00:02:15,980 --> 00:02:21,780
So I want to open up our SIRC index not just file real quick inside of here.

32
00:02:21,800 --> 00:02:26,990
If you recall we're making use of this route component right here to show the Post's new component that

33
00:02:26,990 --> 00:02:33,680
we're currently working on whenever re-act router renders a component it passes in a whole bunch of

34
00:02:33,680 --> 00:02:39,140
different helpers and objects for helping with navigation to this component right here.

35
00:02:39,140 --> 00:02:46,310
So because the route is rendering post-New the post-New component has access to a bunch of props to

36
00:02:46,310 --> 00:02:48,130
help with navigation.

37
00:02:48,470 --> 00:02:55,040
The profit that we want to make use of is this Scott Propst history and more specifically history dot

38
00:02:55,100 --> 00:03:05,360
push if we call push with a route like so whenever this line of code right here is executed we will

39
00:03:05,450 --> 00:03:11,360
automatically instantly navigate back to our big list of posts because thats what exists at our root

40
00:03:11,360 --> 00:03:12,410
wrapped.

41
00:03:12,410 --> 00:03:15,670
So this says hey go back to the root route of our application.

42
00:03:15,740 --> 00:03:20,600
We could also say you know maybe take me to this forum that Im already looking at so post-blast new

43
00:03:21,450 --> 00:03:28,190
string right here just needs to match one of the different routes that we defined inside of our application.

44
00:03:28,260 --> 00:03:32,930
So if this line right here will navigate us to some other location side of our application.

45
00:03:32,940 --> 00:03:38,070
All great that works well but now challenge number 2 the follow up to this is that we want to make sure

46
00:03:38,070 --> 00:03:43,670
that we only attempt to do this navigation after the post has been created.

47
00:03:43,770 --> 00:03:45,560
And so that's the big challenge.

48
00:03:45,570 --> 00:03:47,160
That's the big hard part.

49
00:03:47,190 --> 00:03:51,560
How do we only navigate after a post has been created.

50
00:03:52,540 --> 00:03:55,210
Before tackling that let's say this code right here.

51
00:03:55,270 --> 00:03:59,830
Let's just save it let's run it inside the browser and make sure that we can manually just instantly

52
00:03:59,830 --> 00:04:01,710
navigate around.

53
00:04:01,750 --> 00:04:06,700
So I'm going to go back to the application or refresh plute in post 3

54
00:04:10,690 --> 00:04:11,420
will submit.

55
00:04:11,440 --> 00:04:15,020
And the instant I do we get navigated back to the index route.

56
00:04:15,190 --> 00:04:20,860
Now you will notice that because we navigated back to the index route before the post was created we

57
00:04:20,860 --> 00:04:27,550
entered a kind of race condition where essentially that post is being created at the exact same time

58
00:04:27,550 --> 00:04:29,710
that we're fetching our list of posts.

59
00:04:29,830 --> 00:04:35,920
And so it's a total 50/50 chance as to whether or not our newly created post will actually show up on

60
00:04:35,920 --> 00:04:36,720
this list.

61
00:04:36,910 --> 00:04:42,740
So clearly we really do have to wait for the post to be created before we attempt to navigate back here.

62
00:04:42,760 --> 00:04:44,780
See if I hit refresh now.

63
00:04:44,910 --> 00:04:45,210
OK.

64
00:04:45,220 --> 00:04:49,070
Now here's my post showing up so clearly we just navigated too soon.

65
00:04:50,890 --> 00:04:52,070
Get back over here.

66
00:04:52,190 --> 00:04:56,810
So we know that this line of code right here is working the way we expect but we need to somehow figure

67
00:04:56,810 --> 00:05:02,070
out a way to make sure that it only gets called after the post has been created.

68
00:05:02,120 --> 00:05:04,630
So let's get through it then we won't do anymore.

69
00:05:04,700 --> 00:05:08,120
Been doing a lot of lecturing so let's just kind of cut right to the chase here and figure out how we're

70
00:05:08,120 --> 00:05:09,500
going to do this.

71
00:05:09,530 --> 00:05:15,560
We're going to come to pass in callback function to this action creedo right here.

72
00:05:15,740 --> 00:05:21,660
So the second argument I'm going to pass in a callback function and then I'm going to move the history

73
00:05:21,700 --> 00:05:25,370
don't push call inside of that.

74
00:05:25,390 --> 00:05:29,770
So now our action creator has this function right here.

75
00:05:29,770 --> 00:05:34,950
If the action creator calls this function it will automatically navigate us back to our list of posts.

76
00:05:35,230 --> 00:05:41,980
So let's now change over to our action creator file side of actions indexed on us and we'll go down

77
00:05:41,980 --> 00:05:44,990
to create post right here.

78
00:05:45,010 --> 00:05:49,270
Let's first start off by receiving this as callback.

79
00:05:49,270 --> 00:05:54,580
So this is our callback function and now we want to make sure that only after this request right here

80
00:05:54,580 --> 00:05:59,830
has succeeded only after we have received this request or you know only after the post has been created

81
00:06:00,250 --> 00:06:05,800
Do we want to call the callback manually to do so we can use a promise.

82
00:06:05,800 --> 00:06:08,860
Because that is what is returned by X post-trade.

83
00:06:08,910 --> 00:06:14,710
You're going to take the semi-colon off the end and then on a new line we'll say.

84
00:06:14,740 --> 00:06:26,530
Then and inside of your we'll call the call back in practice make the API request after has been successfully

85
00:06:26,530 --> 00:06:27,450
completed.

86
00:06:27,550 --> 00:06:33,110
Execute this function and all this function does is call the callback that we just passed in.

87
00:06:33,130 --> 00:06:33,880
So let's give this a shot.

88
00:06:33,880 --> 00:06:39,700
Now I'm going to go back over a refresh of the page say post for

89
00:06:42,600 --> 00:06:48,310
and now when I click Submit right here the order of operations should be the new post is created.

90
00:06:48,330 --> 00:06:55,300
We get the response back and then we navigate over to our list of posts so submit and there we go.

91
00:06:55,590 --> 00:07:01,400
If you watch very carefully the request log you'll see that first request complete and then instantly

92
00:07:01,400 --> 00:07:06,660
you see the page start to change as we go over to our big list of posts because we are fetching the

93
00:07:06,660 --> 00:07:09,940
list of posts only after post 4 was created.

94
00:07:09,960 --> 00:07:14,260
We of course do correctly see posts for appear on screen.

95
00:07:14,310 --> 00:07:17,190
OK so that is pretty much it for adding a new post.

96
00:07:17,190 --> 00:07:20,550
We now have the ability to navigate around we can create a new post.

97
00:07:20,580 --> 00:07:24,950
We can validate inputs we can cancel all kinds of good stuff.

98
00:07:24,960 --> 00:07:26,910
So this is looking pretty darned good.

99
00:07:26,940 --> 00:07:30,600
Let's continue with the next step of our application in the next section.