1
00:00:00,980 --> 00:00:06,320
We can now render a list of posts on the screen of our posts index page which is definitely good progress

2
00:00:06,650 --> 00:00:11,630
but certainly we don't want to always have to use that API client man whenever we want to add a new

3
00:00:11,630 --> 00:00:12,640
post.

4
00:00:12,680 --> 00:00:17,600
Ideally we're going to have that second page that a user can navigate to where they can see a form that

5
00:00:17,600 --> 00:00:20,880
they'll use to add a new post to the back end API.

6
00:00:21,170 --> 00:00:25,310
So in this section we're going to start putting all that code together to add that feature.

7
00:00:25,670 --> 00:00:29,880
Let's do a little bit of discussion on exactly how we're going to approach this.

8
00:00:29,900 --> 00:00:35,980
So first as a reminder we want this new screen to exist out the route posts slash new.

9
00:00:36,080 --> 00:00:40,280
If I go to that route I'm going to expect to see my form appear on the screen.

10
00:00:40,610 --> 00:00:45,040
Now one thing I want to mention about this navigation router right here when we implement this that's

11
00:00:45,040 --> 00:00:49,730
when we're going to see a little bit of an issue come up in re-act router or a little bit of a bug.

12
00:00:49,880 --> 00:00:52,960
And that's the same bug that had mentioned previously that we were going to run into.

13
00:00:53,000 --> 00:00:54,940
So don't worry I haven't forgotten about that.

14
00:00:55,070 --> 00:00:57,590
Yes we're still going to see that little issue pop up.

15
00:00:57,590 --> 00:01:02,310
The one that I really expect you're going to run into on your own personal projects.

16
00:01:02,540 --> 00:01:07,790
Once a user goes to this page they'll see a form appear on the screen where they can add the title categories

17
00:01:07,820 --> 00:01:14,240
contents and then save the post or cancel and go back to the index page.

18
00:01:14,240 --> 00:01:18,030
So let's talk a little bit about exactly how we're going to approach this.

19
00:01:18,050 --> 00:01:22,070
We're going to start off by first scaffolding out our post-New component.

20
00:01:22,160 --> 00:01:26,810
So I want to just have a component that just kind of says hey post-New here it is.

21
00:01:26,960 --> 00:01:31,130
And that's really just going to give us kind of a stub somewhere where we can start adding in some code

22
00:01:31,370 --> 00:01:37,220
to work with the component itself after we put that together we'll add some route configuration around

23
00:01:37,220 --> 00:01:37,790
it.

24
00:01:37,790 --> 00:01:44,690
So specifically a new route inside of our router that will show that post-New component whenever a user

25
00:01:44,690 --> 00:01:53,360
goes to the path of post slash new Third we need to add in the ability for a user to easily navigate

26
00:01:53,390 --> 00:01:56,380
between the index screen and the news screen.

27
00:01:56,390 --> 00:02:01,370
So of course they can always manually entering the exact you are l but that's definitely not reasonable

28
00:02:01,370 --> 00:02:03,160
to expect the user to figure out.

29
00:02:03,260 --> 00:02:08,300
We really want to give them the ability to navigate between the screen that shows the list of posts

30
00:02:08,630 --> 00:02:11,810
and the screen where they can create a new post.

31
00:02:11,900 --> 00:02:16,810
And so we have to figure out how to somehow link between different pages at that point in time.

32
00:02:18,350 --> 00:02:21,740
Fourth we're going to add our form to the post-New component.

33
00:02:21,770 --> 00:02:25,190
So this will be the form that the user is going to enter text into.

34
00:02:25,310 --> 00:02:31,190
And then finally once a user has entered information into that form and click the save button or submit

35
00:02:31,250 --> 00:02:35,870
or whatever we call it we'll want to make sure that we have an action creator to actually save the post

36
00:02:35,870 --> 00:02:37,480
to our back and API.

37
00:02:37,880 --> 00:02:41,340
So steps 1 through 5 Let's get started right now.

38
00:02:42,250 --> 00:02:46,710
First off we're going to scaffold out the post new component.

39
00:02:46,710 --> 00:02:51,970
So inside of my code editor I'm going to find my components directory and I'm going to make a new file

40
00:02:52,030 --> 00:02:56,540
called posts new Jesus.

41
00:02:56,940 --> 00:02:59,820
Then inside of here we'll do our usual boilerplate.

42
00:02:59,910 --> 00:03:12,010
So we'll say import react and components from re-act will define our component so class post-New extends

43
00:03:12,010 --> 00:03:13,510
component.

44
00:03:13,720 --> 00:03:18,550
Put on our render function which is just going to return some GSX right now.

45
00:03:18,990 --> 00:03:27,540
And I think it'll just be a div that says posts new and at the bottom will export this component export

46
00:03:27,550 --> 00:03:28,210
default.

47
00:03:28,210 --> 00:03:29,590
Scuse me.

48
00:03:30,200 --> 00:03:30,570
OK.

49
00:03:30,610 --> 00:03:34,940
So there is a boilerplate so that's step one.

50
00:03:34,960 --> 00:03:39,100
We're now going to move on to Step Two where we're going to add in some route configuration.

51
00:03:39,100 --> 00:03:44,020
So we're always going to do the exact same thing whenever we attempt to add another component to our

52
00:03:44,020 --> 00:03:45,010
application.

53
00:03:45,040 --> 00:03:51,250
We're always going to add in another route all the routes that we add will be placed inside of our top

54
00:03:51,250 --> 00:03:52,140
level index.

55
00:03:52,160 --> 00:03:56,220
JS file so open that up inside of here.

56
00:03:56,230 --> 00:04:01,750
I'm going to import the component that we just created right underneath the post index line.

57
00:04:01,750 --> 00:04:14,380
So I say import pose new from components slash posts new and then down inside of the router configuration

58
00:04:15,130 --> 00:04:24,340
we'll add in additional route so route when ever a user goes to the path slash PPOs new I want to show

59
00:04:24,340 --> 00:04:30,040
the component posts new and close to takeoff.

60
00:04:30,040 --> 00:04:31,320
There we go.

61
00:04:32,120 --> 00:04:32,530
OK.

62
00:04:32,590 --> 00:04:37,420
So that is step number two we added on our route configuration.

63
00:04:37,420 --> 00:04:43,720
So now I really expect that if I go back to the browser and navigate to the route post slash new I would

64
00:04:43,720 --> 00:04:46,680
expect to see that post-New component appear on the screen.

65
00:04:46,690 --> 00:04:49,780
So let's test that out and see how we're doing.

66
00:04:50,020 --> 00:04:54,010
Back inside the browser I'm going to go manually to localhost.

67
00:04:54,080 --> 00:05:01,720
ADHD slash posts slash new.

68
00:05:02,030 --> 00:05:03,310
And then once we get here.

69
00:05:03,390 --> 00:05:04,010
Ha.

70
00:05:04,400 --> 00:05:06,080
Well that's quite interesting.

71
00:05:06,080 --> 00:05:12,470
I do see the post-New component that we just created but I also see some of the markup from our index

72
00:05:12,470 --> 00:05:13,960
route as well.

73
00:05:13,970 --> 00:05:18,950
So this right here is the issue that I said was the very subtle bug that we had introduced with re-act

74
00:05:18,950 --> 00:05:19,730
router.

75
00:05:20,000 --> 00:05:26,630
Essentially what's going on here is we are showing both the Post index screen and the post new component

76
00:05:26,660 --> 00:05:27,700
as well.

77
00:05:28,020 --> 00:05:33,610
Again this is a problem that I almost guarantee you you will run into on your own personal projects.

78
00:05:33,620 --> 00:05:37,790
So let's take a quick break and then we're going to come back and talk about exactly why we are seeing

79
00:05:37,820 --> 00:05:40,650
two components on the screen at the same time.

80
00:05:40,760 --> 00:05:42,060
So I'll see in just a second.