[00:00:01] Welcome back to the report that building in the last few guides. We set up our complete news already complete in the next few guides. We will be setting up our active component to our newsletter. So I went ahead and they added a few items. Your contents can be completely different by the time you're going through this anyway. But basically what we're going to do is make it so we have a button here on the screen next to a use letters that will allow us to add a newsletter to our database only showing to our application. So the first thing you're going to do to get it set up is actually showing you how this works so there's an endpoint called news letter on our server and if you're passing a title body image you are out and that's about it. We will get back a title a body. When you're out and a new day. So all the server I have a generate new data object. And that's where we're getting in the day. So basically it's just generating the current day when an object is created that is coming from. All we need to provide are these three parameters. So with the way I have at it set up the way we have set up our passing and as a title and a body so when we save and actually overrides the image and that's why aren't they just displaying but by the time we're done with this course we will have added functionality and our images will be all up today. [00:01:36][94.8]
[00:01:37] So what would you do to get this functionality in with the ad newsletter to have a forum to send the data is first created component call newsletter and so we're going to introduce learner driver here to say these letters have dodgy apps and we were on the street very similar to this added component. So I'm copying the entire component or attack from newsletters and then we want to make the changes that we need to make. So first thing we need to do is read the component to that newsletter and this is going to be an admin piece of functionality and once we're done with the all the functionality of this app except for the permissions that we get into other like how what we're going to display to certain user types either an admin or a standard user. So this is going to be a happening feature that when the admin accounts can access. Let's rename all these. I didn't use things to add me. And then let's call the form. Let's give the unique name newsletter. We want to keep enable initialise Well we don't need that because we're not going to have the default values so we can get rid of that and run fetching an item so we don't want to Mopsy to props. So we don't need redox let's get rid of connect Mopsy prompts let's just export the fall News newsletter with of course our lead explorer attach. Now let's some coal in there just for practice and then scroll up here. We don't need connecting the name for. We don't need our actions yet. What we need are actions. So keep that in there. [00:03:19][102.8]
[00:03:20] We don't want a fat Chullora component so let's get rid of that and let's see what else we don't want here. We want our inputs the same. We want to handle or many shit we don't want to save it as an edit oh so let's just copy what's coming out from now and then at what stage that should be good. Let's change a couple other things. We were tied on our body. That's fine. Yeah this should be good. Let's go ahead and import or add it into our newsletter content so we can display it next door and newsletter. So let's copy this link here with her edit newsletter and put it right there. And then obviously we don't want the latest item ID we want to just go straight to that. OK. Now what we want to do is change this to you and newsletter and we'll be changing all the styles and getting rid of the text and I mean cool see us as buttons. But again for the functionality we're doing this for now. OK. So we have that set up we need to import it now. Actually we don't. Because we need to use Araque so we don't have that newsletter anymore in here. We're using around 2 if you remember you can go ahead and start on how we do that and the bootstrap digests. So we have a newsletter out here with the added one for ADD route. So it's the route path is equal to newsletter and we need that and then we need to say for the PA the next thing you want to do is a component and then he and then let's just close this off for now. [00:05:08][107.8]
[00:05:08] He's going to the current and then take him home and we have to have access to our newsletter. So if you see up here we didn't use London. Let's get our newsletter. Here's something important. I have a news letter from Don splosh components newsletter newsletter underscore. OK so we're getting our newsletter. We're importing it into our bootstrap digest. And now we can use it on our newsletter and newsletter and that set up awesome. Let's close out of this since we won't be using it anymore and we ever newsletter content. Let's close out of this since we have our own here already with our. And let's close out of our ad and vote. So all we're looking at now is the newsletter digests. Let's head over to the browser and see if we can get to it. So here's how. And remember just remove the page and you should see these letters. Let's go ahead and tap that button. So it's taking us to newsletter's slash who we ever had on our body when we hit save. It says time to handle it undefined undefined. So the reason I'm saying that fine is because we're trying to access our title in our body but it is not equal to anything. And the reason is not equal to anything is pretty obvious because we haven't had anything in here. So let's try typing in a title and nobody is saying zero happens so long as we have access to our data when we hit save. [00:06:50][101.8]
[00:06:51] So now all we need to do is pass that into a function or a action that we can then use redux function and perform requests where we can add this to our server. Our new item if you remember like I showed you in post man that's simply going to be the same exact route we have set up on our local grounds. So just want to really emphasize this you understand might be a little confusing when you see this link right here and it says newsletter out and then we go to our app and it says newsletter. They look extremely similar. And that's because of all routes but they're on different apps completely different apps. This is our server or backend and this is in our local or local application which we very clearly just declared in our routes in our bootstrap. So I just want to make sure that you understand that these are separate from our server. These are specifically part of our local app. Our client side application if you google client you might be able to get a good description of its own client application verse server application I'm typing off screen home bring that over year. So I just googled Clay application server application and you can see it says a client server applications majorly used by global law. Right. And it says basically clients around certain clients I patients get a little bit weird of a description but essentially the client is where deals with the with the server and then the server is the server. So our vocation that we have here that we've been building is a client application and client side and then the server would be web server application. [00:09:00][128.6]
[00:09:02] So and you can have both of those like you could we couldn't make a server here and if I did if I made the server in python I would have shown how to do that. But I made it in JavaScript since I'm more skilled at javascript so I didn't include that in the course but basically the idea of like we can we could have created a server in here and we'd be kind of together and that's what they're saying here client server application it's really a server as well as the like. Basically you can add them together but we are separate. Anyway I want to emphasize the difference between this route and the post now. So let's commit Arko let's say get status get out get commit. I'm going to say set up a newsletter and set up a newsletter component and route and corresponding right. OK. But talking to the next guy where we will start developing the action and use redux to perform a get request to our server. We will retrieve or a post request my the tour server or we will save our new item. [00:09:02][0.0]
[535.8]