[00:00:00] Hi and welcome back to the reactor building out the property management up in the sky. We're going to add any functionality even though we said we would add in the new newsletter functionality. So basically the idea of that is to be able to click edit button and this is located on the detail component. And on the content component because we need to be able to edit the current one for the day. And basically the idea behind this is that you hit this button and it takes us to this form where we can edit it and save it and it changes the data on the back end. So pretty straightforward and we will first be implementing this functionality is straight on the not in the detail screen but in here. So it's got a button in here. And don't worry too much about placement yet since we're going to get around to the styling later but we just need a button that when we pick it it will take us to. It will take us to a new router here which is going to be let's see what our design says. Our sitemap here is going to be a newsletter. Edit So we have newsletter detail and added newsletter. It's going to take us there and we will be able to see this forum with it in a component that will have a form. Yeah. So let's and get started let's go over to our app here and let's first create a new filing or newsletter directory. [00:01:32][92.3]
[00:01:33] Let's call it newsletter underscore it and make sure you add the dodgiest in there so newsletter added J.S. then that's put in our visa react component code here so import React components from react in say Class Newsletter. Edit and you might as well just call it edit newsletter. I just wanted to give it the same kind of naming we have for our other components for the file so KLOS added newsletter extends Component render return div. And let's actually make a form right away because we know we're going to be using redux form. And then let's just say export default added newsletter that sets up AR4. Let's go ahead and go to the browser. Actually we first have to import it and we have to set the router slots so we have a component. Now it's because of the router and bootstrap dodginess. Let's just copy this put right here and I'm going to separate these routes a little bit so we are off. And then we have our comments what we ever Hauff and then we have our newsletter and then no other requests follow. So newsletter detail Id want to change this to News newsletter. Edit And same thing id and then we want to change this to news. Added. Edit newsletter. My bad. And I mean he's the auto import here. If you don't that just import it. This following my import. Edit letter from component's newsletter newsletter and it that gives us around. Now we just need a button that will take us to that route and show us our form or whatever we have in here. So I'm just going to say in her newsletter form 4 added just so we can see it on the ground in the browser. [00:03:34][120.9]
[00:03:35] Not because of the Producer Price. It's close up the detail file so we have our edit here and we have our Boonstra. Let's get rid of our bootstrap vote we'll leave it open just because it has arrived and we modified it in this file. In this video let's head over to our news our newsletter contest because if you remember our newsletter has the three components here the archive that is going to have this and then has our contents within in the content Kamboni because while this is the content. So let's go ahead and add it just below the age too so it's right underneath the H1 hearing or the age. And again I where you are placement right now. You just want to get the general structures we get the functionality done and then we move on to size. So it's adding up but let's just say 12 we actually we can just you added and we can stylize and then we could put a week but since we're not going to style it let's just put it did and let's say add newsletter or edit newsletter and then let's just wrap it with a link to import data. So if you remember in poor link from reactor router Dom and then pretty straight forward from here we can just cut the Zao right out of link here. And then throating in here and then just say 2. And then if you remember our route slash newsletter slash it and then are ID so you have to make a will to use string concatenation here so that is thrown in right here are ID. So we're going to get this from our items. [00:05:36][120.8]
[00:05:37] We just have to say this stuff crops latest item DAAD ID that will give us our ID. Now all we have to do is click it should be brought to that route and or components load up so it's going to the browser and see if it's working. Okay so we're still of the details. Let's go to just newsletter. We have about added newsletter. Looking pretty nice there and even without the styles. Now it's just hit it and we're brought to our form as form for added and we have right here. So the next thing we need to do is add in redux form like we did with our signing component at the very beginning of this application. Now we get to that now so we need to add in a form like this so we can basically have a way to edit it and actually enter into a new content. After that we will get into the action we need to create and use redux thug to use so we can perform request in our action and then we will dispatch an action and other action to save that into our database. Our local database so to speak our archive and. So let's go ahead and computer code and then hop into the next guide to the status. Get a good commit and let's just say implementing route 4 added from news that it was implemented route component and above and for let's say implemented button to get it implemented throughout the should and what was it the components also kept people employed. I was just really bothered by that implemented route button and the component itself added newsletter component. [00:07:47][130.5]
[00:07:52] All right now I'm struggling typing that out. We will hop into the next guide where we will start developing her for. [00:07:52][0.0]
[464.4]