All language subtitles for 021-Building Post Submission-git.ir

Let's continue working on some of these different components.

Next we're going to work on is our post to create component.

So again that's in charge of the content at the very top.

All we do is show a very simple form whenever user submits a form.

We're going to take that title and use it as the title for a new blog post looking to flip backward.

My editor inside of my S.R. directory I'll make a new file called Post create dot J.S. inside of here

right away we'll import react from react and I'll create an export a functional component

inside if you aren't going to return a div inside of that day we're going to add in a pretty good amount

of markup.

So a little bit of typing here a couple different elements we need to add in.

First off I'm gonna put in a form

inside the form I'm going to put in a div with the class name of form dash group.

The reason for that class name is just a little bit of styling that we're going to add in to make sure

that this application is not hideous to look at inside of that day.

We'll do a label that says title I'll put in an input with the class name of form dash control and then

after the div.

So make sure you've got the closing div right there right after it.

I'll put in a button with the class name of B10 ETF and primary

when close my sidebar here and I'll give the button some text like summit.

Let's save this and then make sure that we can display it inside of our app dot J.S. file or the app

component.

So I'll change back over to the app component we created just a moment ago at the very top.

I'll import those to create from let's create

and then inside the div I can remove that text right there.

I'm going to give this thing a little header.

I'll put in each one that says create post just like we saw inside of our mockup and I'll show the post

create component.

All right.

Can Save this makeover and I should get something like this right here.

Well like I said this doesn't look too great.

It would be nice to have just a tiny bit of styling here.

You'll notice we added in a couple of different class names so we're going to make use of bootstrap

just to make this thing look a little bit better.

Let's very quickly hook up bootstrap to our application.

Just the CSF side of it so that our application is not totally hideous to add in bootstrap draw projects.

I'll open up a new browser tab and navigate to get bootstrap dot com

once you'll find the download link and we're not going to actually download bootstrap we're going to

instead just link to the CDM so if we scroll down a little bit we'll see bootstrap seeds on a copy the

link and script tags you see right here I'll then flip back over to my editor inside my public directory

I'll find the next dot H email file and then anywhere inside of the head element we're going to paste

in those two tags that we just copied.

You'll notice that one of the tax we just copied was a script tag that has all the javascript code associated

with the Bootstrap Project.

We don't actually want any of that JavaScript code.

We just want the styling from bootstrap.

So I'm going to delete the script tag that was just copied in I'm going to delete that script tag entirely

and I'm just left with the link or bootstrap CDM and dot com

now which failed to save this file.

I once again confirmed I've got just that link tag for bootstrap added in I can include this file.

Well then go backwards my browser and just confirm that Yep everything looks good much better than what

we had before.

Last quick change I gonna make here.

I'm going to wrap that div inside of our app component are gonna give that div a class name of container

which is just going to constrain the edges here on the left and right hand sides that I flip back over

on my app component.

As I did I was talking about.

I'll give it a class name of container.

Save that put back over and there we go.

We've now got a little bit better in a gutter on the left and right hand sides OK well this looks pretty

reasonable but let's keep going on our PostScript component.

So we've got that component put together but it doesn't have any functionality tied to it just yet.

Let's open up the postscript component once again.

We're going to add in an event handler to watch for any time the user types into that input and then

eventually anytime user clicks on that submit button and tries to actually submit the form when that

occurs.

We're going to make a post request over to not our common service but our postal service can make a

post request over to the post and point out our post service and attempt to create a new blog post with

the given title.

Let's do that right away inside my post great components you're suppose create right here at the very

top.

I'm going to add in some imports.

First I'm gonna to get the U.S. State book from react.

I'll get axioms from axioms to make our actual request then inside the component itself.

I'm going to declare a new piece of state using the U state hook.

So it's say concept title and set title as you state will initialize that to be an empty string and

I'll make sure that we use that title property and the setter along with our input element right here

to make sure that we've just got that reference to the title of the blog post we're trying to create

I'm going to assign those things value to come from title and I'll add on an on change event handler

as well make sure that we say any time an event occurs which I'll abbreviate simply as e we will want

to call that title with e target dot value and I'll say this you can see that whole line.

So this is just a little bit of classic two way property bonding right here.

Now we've got that but together we are tracking the value of that input inside this title variable.

Now we can add on an event listener to the form itself and watch for a submission event.

And of course any time that occurs we'll make that actual post request over to that API so on the form

element I'll add in on submit and he's on that submit you occurs we'll run a little function that we're

going to define inside of here called Nothing too fancy or it's going to call it on submit let's define

a on submit function

like so.

And so once again this function is going to execute any time user submits that form we'll make sure

that we prevent the default action that occurs whenever a user submits a form in a browser.

By default the browser is going to try to submit that form itself.

That's not what we want.

So we receive that even object and call prevent default on it.

But then inside of here right after that that's where we can start to make our request to our post micros

service.

We probably want to use the async await syntax inside this function rather than dealing with promises

or callbacks or anything like that.

It's going to mark this function as being async and the inside of here we can make our actual request.

I will do a wait axles dot post we're gonna make a post request to our post service and remember our

post service if we go back over to our terminal very quickly this middle terminal window right here

is where I'm running my post service remember it is running on Port 4000.

So we need to make sure we make a request to port 4000 in particular.

So we're going to make a request to h t DP and slash slash local host colon 4000 slash boats and as

the second argument we'll put in the body of our request.

So we want to send along a title and a reason for that.

Remember we designed our whole API to receive a body that has a title that is some kind of string

so it looks pretty good.

Now the last thing we probably ought to do here after we create a post this is just a very small little

u x sort of thing after we create a post we probably want to blank out the title or reset the title

back to an empty string.

And the reason for that is to just make sure that if we after we click Submit right there if it is successful

I just want to empty out that input which is essentially gonna be signed that hey the request was just

issued successfully so I'm going to put inside of your a set title of empty string all right.

So that should be it.

Let's save this flip back over before I attempt to test this thing out.

I'm gonna open up my development console inside my browser because I can tell you right now we are going

to get an error when we run this code from a very very small thing.

We're gonna fix up in just a moment.

I'm just make sure I've got my console open to my network tab.

I'll put in some random title hit submit.

And there we go.

We got a little error right here.

So this is the error that not super relevant to micros services but it's probably gonna come out just

about like every time you work on micros services depending on how everything ends up getting setting

setup.

So I just want you to see this error really quickly just to have this in our mind this is a very classic

web development error that you run in to all the darn time is of course your customer.

So let's take a pause right here.

We'll come back next video do a quick review on what a course request error is and then fix up this

error and make sure that we can actually create a post inside of our app.