1
00:00:01,180 --> 00:00:03,610
Let's continue working on some of these different components.

2
00:00:03,610 --> 00:00:06,600
Next we're going to work on is our post to create component.

3
00:00:06,700 --> 00:00:08,890
So again that's in charge of the content at the very top.

4
00:00:08,910 --> 00:00:12,300
All we do is show a very simple form whenever user submits a form.

5
00:00:12,340 --> 00:00:17,420
We're going to take that title and use it as the title for a new blog post looking to flip backward.

6
00:00:17,420 --> 00:00:26,780
My editor inside of my S.R. directory I'll make a new file called Post create dot J.S. inside of here

7
00:00:26,780 --> 00:00:33,970
right away we'll import react from react and I'll create an export a functional component

8
00:00:37,500 --> 00:00:44,760
inside if you aren't going to return a div inside of that day we're going to add in a pretty good amount

9
00:00:44,760 --> 00:00:45,270
of markup.

10
00:00:45,300 --> 00:00:49,790
So a little bit of typing here a couple different elements we need to add in.

11
00:00:49,830 --> 00:00:51,480
First off I'm gonna put in a form

12
00:00:54,720 --> 00:01:01,070
inside the form I'm going to put in a div with the class name of form dash group.

13
00:01:01,100 --> 00:01:04,460
The reason for that class name is just a little bit of styling that we're going to add in to make sure

14
00:01:04,460 --> 00:01:08,960
that this application is not hideous to look at inside of that day.

15
00:01:08,960 --> 00:01:21,220
We'll do a label that says title I'll put in an input with the class name of form dash control and then

16
00:01:21,250 --> 00:01:22,330
after the div.

17
00:01:22,360 --> 00:01:24,950
So make sure you've got the closing div right there right after it.

18
00:01:24,950 --> 00:01:29,590
I'll put in a button with the class name of B10 ETF and primary

19
00:01:32,300 --> 00:01:40,700
when close my sidebar here and I'll give the button some text like summit.

20
00:01:40,870 --> 00:01:45,730
Let's save this and then make sure that we can display it inside of our app dot J.S. file or the app

21
00:01:45,730 --> 00:01:46,740
component.

22
00:01:47,010 --> 00:01:51,750
So I'll change back over to the app component we created just a moment ago at the very top.

23
00:01:51,800 --> 00:01:55,920
I'll import those to create from let's create

24
00:01:59,270 --> 00:02:01,780
and then inside the div I can remove that text right there.

25
00:02:02,010 --> 00:02:03,900
I'm going to give this thing a little header.

26
00:02:04,180 --> 00:02:11,760
I'll put in each one that says create post just like we saw inside of our mockup and I'll show the post

27
00:02:11,800 --> 00:02:16,610
create component.

28
00:02:16,820 --> 00:02:17,170
All right.

29
00:02:17,170 --> 00:02:23,040
Can Save this makeover and I should get something like this right here.

30
00:02:23,990 --> 00:02:26,090
Well like I said this doesn't look too great.

31
00:02:26,090 --> 00:02:28,830
It would be nice to have just a tiny bit of styling here.

32
00:02:28,840 --> 00:02:33,080
You'll notice we added in a couple of different class names so we're going to make use of bootstrap

33
00:02:33,140 --> 00:02:35,470
just to make this thing look a little bit better.

34
00:02:35,480 --> 00:02:37,810
Let's very quickly hook up bootstrap to our application.

35
00:02:37,820 --> 00:02:44,550
Just the CSF side of it so that our application is not totally hideous to add in bootstrap draw projects.

36
00:02:44,720 --> 00:02:49,370
I'll open up a new browser tab and navigate to get bootstrap dot com

37
00:02:52,090 --> 00:02:58,010
once you'll find the download link and we're not going to actually download bootstrap we're going to

38
00:02:58,010 --> 00:03:05,970
instead just link to the CDM so if we scroll down a little bit we'll see bootstrap seeds on a copy the

39
00:03:06,060 --> 00:03:13,810
link and script tags you see right here I'll then flip back over to my editor inside my public directory

40
00:03:14,690 --> 00:03:21,710
I'll find the next dot H email file and then anywhere inside of the head element we're going to paste

41
00:03:21,710 --> 00:03:24,720
in those two tags that we just copied.

42
00:03:24,830 --> 00:03:29,960
You'll notice that one of the tax we just copied was a script tag that has all the javascript code associated

43
00:03:29,960 --> 00:03:31,260
with the Bootstrap Project.

44
00:03:31,310 --> 00:03:33,710
We don't actually want any of that JavaScript code.

45
00:03:33,800 --> 00:03:35,600
We just want the styling from bootstrap.

46
00:03:35,720 --> 00:03:41,370
So I'm going to delete the script tag that was just copied in I'm going to delete that script tag entirely

47
00:03:41,370 --> 00:03:46,670
and I'm just left with the link or bootstrap CDM and dot com

48
00:03:50,070 --> 00:03:51,930
now which failed to save this file.

49
00:03:51,940 --> 00:03:58,280
I once again confirmed I've got just that link tag for bootstrap added in I can include this file.

50
00:03:58,280 --> 00:04:03,700
Well then go backwards my browser and just confirm that Yep everything looks good much better than what

51
00:04:03,700 --> 00:04:05,160
we had before.

52
00:04:05,250 --> 00:04:06,490
Last quick change I gonna make here.

53
00:04:06,520 --> 00:04:11,320
I'm going to wrap that div inside of our app component are gonna give that div a class name of container

54
00:04:11,320 --> 00:04:16,740
which is just going to constrain the edges here on the left and right hand sides that I flip back over

55
00:04:17,560 --> 00:04:19,300
on my app component.

56
00:04:19,450 --> 00:04:20,680
As I did I was talking about.

57
00:04:20,700 --> 00:04:25,130
I'll give it a class name of container.

58
00:04:25,150 --> 00:04:28,270
Save that put back over and there we go.

59
00:04:28,270 --> 00:04:35,020
We've now got a little bit better in a gutter on the left and right hand sides OK well this looks pretty

60
00:04:35,020 --> 00:04:38,670
reasonable but let's keep going on our PostScript component.

61
00:04:38,770 --> 00:04:43,030
So we've got that component put together but it doesn't have any functionality tied to it just yet.

62
00:04:43,030 --> 00:04:45,130
Let's open up the postscript component once again.

63
00:04:45,220 --> 00:04:49,570
We're going to add in an event handler to watch for any time the user types into that input and then

64
00:04:49,570 --> 00:04:54,340
eventually anytime user clicks on that submit button and tries to actually submit the form when that

65
00:04:54,340 --> 00:04:54,860
occurs.

66
00:04:54,880 --> 00:05:03,180
We're going to make a post request over to not our common service but our postal service can make a

67
00:05:03,180 --> 00:05:08,620
post request over to the post and point out our post service and attempt to create a new blog post with

68
00:05:08,620 --> 00:05:10,170
the given title.

69
00:05:10,170 --> 00:05:17,360
Let's do that right away inside my post great components you're suppose create right here at the very

70
00:05:17,360 --> 00:05:18,030
top.

71
00:05:18,260 --> 00:05:20,230
I'm going to add in some imports.

72
00:05:20,420 --> 00:05:24,950
First I'm gonna to get the U.S. State book from react.

73
00:05:25,080 --> 00:05:32,640
I'll get axioms from axioms to make our actual request then inside the component itself.

74
00:05:32,640 --> 00:05:37,950
I'm going to declare a new piece of state using the U state hook.

75
00:05:37,970 --> 00:05:46,990
So it's say concept title and set title as you state will initialize that to be an empty string and

76
00:05:46,990 --> 00:05:51,730
I'll make sure that we use that title property and the setter along with our input element right here

77
00:05:52,360 --> 00:05:55,870
to make sure that we've just got that reference to the title of the blog post we're trying to create

78
00:05:57,010 --> 00:06:03,700
I'm going to assign those things value to come from title and I'll add on an on change event handler

79
00:06:03,700 --> 00:06:11,330
as well make sure that we say any time an event occurs which I'll abbreviate simply as e we will want

80
00:06:11,330 --> 00:06:19,770
to call that title with e target dot value and I'll say this you can see that whole line.

81
00:06:19,950 --> 00:06:23,270
So this is just a little bit of classic two way property bonding right here.

82
00:06:25,150 --> 00:06:29,690
Now we've got that but together we are tracking the value of that input inside this title variable.

83
00:06:29,710 --> 00:06:34,500
Now we can add on an event listener to the form itself and watch for a submission event.

84
00:06:34,660 --> 00:06:41,640
And of course any time that occurs we'll make that actual post request over to that API so on the form

85
00:06:41,670 --> 00:06:49,540
element I'll add in on submit and he's on that submit you occurs we'll run a little function that we're

86
00:06:49,540 --> 00:06:56,380
going to define inside of here called Nothing too fancy or it's going to call it on submit let's define

87
00:06:56,440 --> 00:06:57,790
a on submit function

88
00:07:02,060 --> 00:07:02,480
like so.

89
00:07:02,980 --> 00:07:08,360
And so once again this function is going to execute any time user submits that form we'll make sure

90
00:07:08,360 --> 00:07:12,710
that we prevent the default action that occurs whenever a user submits a form in a browser.

91
00:07:12,710 --> 00:07:15,390
By default the browser is going to try to submit that form itself.

92
00:07:15,410 --> 00:07:16,340
That's not what we want.

93
00:07:16,340 --> 00:07:20,710
So we receive that even object and call prevent default on it.

94
00:07:22,420 --> 00:07:26,690
But then inside of here right after that that's where we can start to make our request to our post micros

95
00:07:26,690 --> 00:07:27,610
service.

96
00:07:27,710 --> 00:07:32,510
We probably want to use the async await syntax inside this function rather than dealing with promises

97
00:07:32,510 --> 00:07:34,090
or callbacks or anything like that.

98
00:07:34,130 --> 00:07:41,010
It's going to mark this function as being async and the inside of here we can make our actual request.

99
00:07:41,030 --> 00:07:49,450
I will do a wait axles dot post we're gonna make a post request to our post service and remember our

100
00:07:49,450 --> 00:07:54,230
post service if we go back over to our terminal very quickly this middle terminal window right here

101
00:07:54,240 --> 00:07:57,900
is where I'm running my post service remember it is running on Port 4000.

102
00:07:57,930 --> 00:08:02,490
So we need to make sure we make a request to port 4000 in particular.

103
00:08:02,910 --> 00:08:12,620
So we're going to make a request to h t DP and slash slash local host colon 4000 slash boats and as

104
00:08:12,650 --> 00:08:15,270
the second argument we'll put in the body of our request.

105
00:08:15,430 --> 00:08:19,550
So we want to send along a title and a reason for that.

106
00:08:19,550 --> 00:08:24,950
Remember we designed our whole API to receive a body that has a title that is some kind of string

107
00:08:28,500 --> 00:08:29,990
so it looks pretty good.

108
00:08:29,990 --> 00:08:34,670
Now the last thing we probably ought to do here after we create a post this is just a very small little

109
00:08:34,730 --> 00:08:40,970
u x sort of thing after we create a post we probably want to blank out the title or reset the title

110
00:08:40,970 --> 00:08:42,800
back to an empty string.

111
00:08:42,800 --> 00:08:47,750
And the reason for that is to just make sure that if we after we click Submit right there if it is successful

112
00:08:47,780 --> 00:08:51,890
I just want to empty out that input which is essentially gonna be signed that hey the request was just

113
00:08:51,890 --> 00:09:01,090
issued successfully so I'm going to put inside of your a set title of empty string all right.

114
00:09:01,090 --> 00:09:01,700
So that should be it.

115
00:09:01,730 --> 00:09:07,230
Let's save this flip back over before I attempt to test this thing out.

116
00:09:07,240 --> 00:09:10,930
I'm gonna open up my development console inside my browser because I can tell you right now we are going

117
00:09:10,930 --> 00:09:15,340
to get an error when we run this code from a very very small thing.

118
00:09:15,620 --> 00:09:17,330
We're gonna fix up in just a moment.

119
00:09:17,450 --> 00:09:21,850
I'm just make sure I've got my console open to my network tab.

120
00:09:22,010 --> 00:09:23,990
I'll put in some random title hit submit.

121
00:09:24,080 --> 00:09:24,920
And there we go.

122
00:09:24,920 --> 00:09:27,300
We got a little error right here.

123
00:09:27,390 --> 00:09:32,340
So this is the error that not super relevant to micros services but it's probably gonna come out just

124
00:09:32,340 --> 00:09:36,400
about like every time you work on micros services depending on how everything ends up getting setting

125
00:09:36,510 --> 00:09:37,160
setup.

126
00:09:37,170 --> 00:09:41,880
So I just want you to see this error really quickly just to have this in our mind this is a very classic

127
00:09:41,880 --> 00:09:45,820
web development error that you run in to all the darn time is of course your customer.

128
00:09:45,840 --> 00:09:46,980
So let's take a pause right here.

129
00:09:46,980 --> 00:09:51,720
We'll come back next video do a quick review on what a course request error is and then fix up this

130
00:09:51,720 --> 00:09:54,080
error and make sure that we can actually create a post inside of our app.