1
00:00:00,660 --> 00:00:05,100
Now that our form is looking pretty good we need to make sure that the submit button gets wired up to

2
00:00:05,100 --> 00:00:07,140
an action creator to create our post.

3
00:00:07,170 --> 00:00:11,600
We also need to make sure that we have a button on here to cancel the creation of a new post as well.

4
00:00:11,790 --> 00:00:16,770
Let's take care of the easier task for right now and we'll say that we want to show a button on here

5
00:00:17,040 --> 00:00:23,330
to allow the user to navigate back to our list of all posts.

6
00:00:23,430 --> 00:00:28,530
So I want to have the ability to easily go to add a post and then click cancel and go back to the big

7
00:00:28,530 --> 00:00:29,530
list.

8
00:00:29,550 --> 00:00:33,210
Now we've already taken care of navigation between components already.

9
00:00:33,210 --> 00:00:38,170
Remember that we use the link tag from re-act router on the outpost button up here.

10
00:00:38,170 --> 00:00:42,110
And so in practice we're going to do the exact same thing again.

11
00:00:42,180 --> 00:00:47,310
Remember whenever you want to navigate a user between different pages or different sets of components

12
00:00:47,310 --> 00:00:51,730
inside of your application you want to be looking for that link tag.

13
00:00:52,270 --> 00:00:56,530
So let's flip back over to our post new component at the top will.

14
00:00:56,550 --> 00:01:05,670
Imports are linked tag from re-act router Daang then we'll place our link tag inside of the render function

15
00:01:06,460 --> 00:01:09,730
we'll put it right underneath the button right here.

16
00:01:09,780 --> 00:01:17,420
So say link whenever someone clicks this we want to go to our route route.

17
00:01:17,600 --> 00:01:21,470
I'll give it a class name of between.

18
00:01:21,610 --> 00:01:25,730
And I think that it would be kind of appropriate to make this thing read to make people understand yeah

19
00:01:25,730 --> 00:01:31,070
if you click this it's going to cancel so as to be in danger on there as well.

20
00:01:31,430 --> 00:01:35,880
And we can say cancel and that's pretty much it.

21
00:01:35,880 --> 00:01:40,040
So let's flip back over refresh the page.

22
00:01:40,040 --> 00:01:44,800
And now when I click Cancel great we can navigate between the two lists.

23
00:01:44,900 --> 00:01:46,180
So this is looking good.

24
00:01:46,190 --> 00:01:50,780
The last thing I think would be really nice is if there was some space between these two buttons right

25
00:01:50,780 --> 00:01:52,490
now they're really sandwiched together.

26
00:01:52,490 --> 00:01:57,040
And so it will look it will look much nicer if we put in a little bit margin left on here.

27
00:01:57,320 --> 00:01:59,480
You know just to get a little bit of space like that.

28
00:01:59,870 --> 00:02:02,590
So to handle that we can use a little bit of CSSA.

29
00:02:02,840 --> 00:02:08,480
I mean if flip back to my code editor and there's two ways that we can add in some CSSA to this project.

30
00:02:08,480 --> 00:02:15,620
We can either add a style rule directly to this link tag or we can open up the style directory inside

31
00:02:15,620 --> 00:02:19,280
of the project and find the style dot CSSA file.

32
00:02:19,310 --> 00:02:24,830
I think this time around since we only have one rule let's just put it inside the style that CSSA file

33
00:02:24,830 --> 00:02:26,050
and just be done with it.

34
00:02:26,420 --> 00:02:32,080
So we'll say look for a anchored tag that exists inside of a form element.

35
00:02:32,100 --> 00:02:34,830
So this is going to select that button that was just created.

36
00:02:35,580 --> 00:02:41,120
I will give it margin left of 5 pixels.

37
00:02:41,200 --> 00:02:43,190
I'm using an anchor tag right here.

38
00:02:43,470 --> 00:02:50,250
Remember that the link tags that we use do end up as rendering as a anchored tag and actually show up

39
00:02:50,250 --> 00:02:51,260
on the screen.

40
00:02:51,660 --> 00:02:52,010
OK.

41
00:02:52,030 --> 00:02:53,700
So let's do one more test.

42
00:02:54,150 --> 00:02:55,410
And know there we go.

43
00:02:55,410 --> 00:02:57,030
Got some nice spacing in there.

44
00:02:57,450 --> 00:02:57,770
OK.

45
00:02:57,780 --> 00:03:00,820
So now he can navigate all around our application.

46
00:03:01,020 --> 00:03:05,370
That means the last thing we need to do is wire up the submit button right here so that whenever a user

47
00:03:05,370 --> 00:03:09,090
presses it it will submit and create this new blog post.

48
00:03:09,090 --> 00:03:11,490
So let's take care of that in the next section.