[00:00:01] Hi welcome back to the reactor building the property management app and react J.S. and the last guy we go out our basic newsletter component with our form by going off of our newsletter component copy and paste the code in there and make the necessary adjustments. And I also have a follow the route to that component and a leak button. We could access that component of that route. So I also explained how the route works on the server and a little bit about client server side applications and what the differences are. Also talked a bit about the gate object and here that comes from when we generate new slaughter and that's when this is just a data that is generated when we are all Magli. So let's go ahead and build out the action with redux Thung so we can dispatch or so we can return a promise we can a price fetch or post to this. Rather our new data. So we need access to our title or body or image or so later on in the app. We will be adding images and we're going to do a slightly different industry of uploading an image or. So for now just ignore the image you are. We're just going to focus on adding in a title body like we did with the edtech component. [00:01:36][94.6]
[00:01:37] So let's go ahead and I'm going to close this and let's close our bootstrap digest and let's go ahead and go into our index that Jason actions and we need to provide a function similar to our same newsletter at it and instead just call it what some call on this and actually call it say new newsletter. We want to take the same parameters except for we don't want to go back because while we don't want to go back for now we'll just leave this and then we'll do whatever feels right when we're using the application. We may redirect the user back to NEWS We will keep them on the line they just safely can view it but we'll do that when we get to it. I have a feeling we're just going to keep this functionality and because there's there's no Wyke view for that. But yeah I guess there's the detail but I'm going off on a tangent I need to focus on that. So we need to take a title on the body we needed taking the parameter. Well the idea but we don't because we don't have an ID. We're making a new one and if I go to post man again let me just explain it better. So you see that when we are editing we know we're passing an idea and I don't need to go back and show you that but when we're editing on the show when we're editing one of these we're using this ID to get from our store and then get the day after that I put in her form for it. So that's what it is. But obviously we're having new item. We don't need to do anything with Negi because we don't even have one because it's a new item. And you'll see here in the response we have an Navy back that's because it exists at that point. So I'm going to close this again and we don't need to pass on it. [00:03:44][127.1]
[00:03:46] So let's get rid of that. There. We are going to leave the call for now. And that in the future we will instead push to the route of the detail and basically show the detail of the of the components were put into detail here. So we'll get to that. For now we have our Save Newsletter Item or action passing a title underbody and we call back. So this is not the word you're avocational crash you're trying to handle forms have been at this point because we don't have this function. We're importing our actions and we are connecting them when we're not connecting them down here because we knew we did it. But we need to connect these so let's quickly import connect from reactionary docs and let us use this down there. I was about to say downstairs well let's use it downtime and connect our actions to our component. OK so export you for connect and then we. So normally when we do this we want to put our component in here. But when we do this we can just type in Mounsey approx because we're using Mopsy prospered in this and this form in this file we're not going to use fancy props so we just want to put in our actions that you can just put in actions like this because this function is going to think that we're putting in Mousie props. So we have to do is just type and all and then actions right here. And if we really need to in the future I don't think there's any data we need to get from the of the store. [00:05:29][103.6]
[00:05:30] But if we need to we will implement the map state to process function and here where we will be able to access our application store. But for now let's put no. And I think for all eternity you know there but basically will change that we and some actions. Now we have access to our actions. Well it's going to save newsletter action in our actions or source actions and they stop J.S. Watts see where all of these are and let's see if we can we are saying we have fach what we should do is in a future guide of leases you'll see that we have down here in reducers newsletter reducers and index stodginess what we should do in the future. I guess that doesn't apply to the reducers because we don't have a signing reducer and need to handle an auction need. So basically what we'll do in the future is we will separate these into separate files because we not signing in and sign up all that junk to be and it's on file and they don't have to be but it really increases readability and helps other devs working on Project Help yourself. Basically a million reasons but there's good reasons to separate these. We put all the newsletters in one file. Kind of like we're dealing with this. We'll put it in a folder or have a file because these are don't be viable. Basically you will kind of separate them in the future. But basically from this we need to not enter a function which is say new newsletter takes in the same parameters as it except for the ID. [00:07:13][103.2]
[00:07:14] So let's just copy this and let's put it right below it and I'm going to move fax newsletter write the above newsletter and I'm going to put a comment right in between. Just to kind of separate that at it and say this is the fach and this is Darca put one a Baucom archive as well. These are temporary comments. But I do it so I can kind of separate things before they're in the files. But basically we have our added function twice. Now let's rename it to say new newsletter. Let's proceed to get rid of the ID. So we have title our body callback. So the idea here is to instead of it. So let's say newsletter slash had we don't need to pass an ID and we have our title embody. So now if I pull up post that again we have the same kind of situation going on here and I'm just going to show you how this works because I have a flash they're not doing flash so I'm going to change up this content to that and just say another or another one and then I'm going to hit send and see if this works. OK. So posts that flash just needed to let you know that we didn't slash. Let's head back to our code. We have this and we have a title to somebody Nkosinathi we have this image or how we don't need that. I remember I told you that we would handle this in a later guy. We over time our body we have our authorization which we have not really talked too much about the local storage with the token and that's for to determine if you're signed in or saying now. [00:09:17][123.0]
[00:09:19] So all these routes require that we pass in a header or they will by the time that you are taking this course. So we don't need to pass in a token so that we can all drive. We can determine if these are threats. And the reason I'm leaving these all in here is because when you're when you're doing this these are going to be protected routes you're going to have to be signed in and you'll have. So let's go ahead and continue with the flow here. We have a news alert. We have our dispatch team here that once it's added We will take the call you know redirect us. So I'm going to comment out this callback just so it doesn't redirect us initially. I mean it's still fetch the newsletter archive of the newsletter archives. The same is that it is just going to read it. It's going to have a new item in there and then it's going to thrown into or out. And this is going to introduce an era into our because we're going it's going to we're going to go back to our newsletter and it's actually not going to display until we refreshed entire application and we'll show you why. But first let's just cancel Waag response that date. And it should say it should give us the item that we are saving back like this with a title and an image or out of body unity. So let's go here. We have these letters. I'm just going to take this up a bit newsletter. [00:10:54][95.6]
[00:10:56] I'm now going to query the consul here for Tyrolean input new newsletter for Bonnie I'm going to say some content is safe. And it says failure. It says For us for nothing. And that's category's input and nursing post memories and post. That's because the point we're trying to hit is it doesn't have an option for put. We haven't declared one supposed is we're going to have to use such changes to post what's safe. Let's go to our application here and let's log in or not. That's right. New item say new new title you and save and create really smooth. We had our printout we had our post requests for news and then fetch news over our. And then news letter archive finished. OK so if we go back we hit cancel it should display our new item. But I don't think it will. OK. Now it did. OK. Also says his new album title. Yes. OK. So the reason I thought it wouldn't work is because if you had over to our newsletter archive when we're receiving our props we're saying we're pushing to write it. We're pushing to the list. And it's only happening when receiving props and it sense we are actually mapping this state in our content in our newsletter. I thought it wouldn't work but then I realized OK flows that she read render this because this is going to receive new which or archiving our latest item. Now it's going to be around these. OK so let's close the newsletter. Let's close off the header. I don't know how that's happened and let's introduce your callback back into our saved New newsletter. Let's head over to our map and let's roll the page. [00:13:28][151.5]
[00:13:29] I'm going to add newsletter so I can make canso. And let's just notice what is on here on the screen. It's going to be unique for you is going to be different. So for me it's new item title new item so I can kind of see what changes when I come back. I don't need a newsletter and I'm going to say this is a unique item object content. Body going to save it saves it takes us back and it's immediately there we don't even notice it going and it's automatically there. So that's great. Let's go ahead and commit Arko before we commit our code to the console and we don't have to clear that 24/7. And there's always those long console lines in there. Let's go ahead and get rid of all of our console logs and so far because we don't want them to clutter up. So I just got rid of that one. Now your code I can hit command ship death and it brings up the search and we can just type in something that will search out to console the log shows us all of our console logs. So the first one is in server Tajai. We don't need to worry about that. That's just our app getting started up not only runs once and we want that and they said yes we we can leave an error log newsletter. Let's get rid of this. You don't want to display this again. Let's see each newsletter at it dodgiest get into the same comment same place and newsletter dot. [00:15:08][98.4]
[00:15:08] J.S. let's get rid of this so we just deleted three item prints which is why we're seeing so many before. But if we have back to our map and we are going through make sure it's reload first. We have Núñez have newsletter and we say Tido body and save. We don't get all those cons. logs except for our network request because we need those filings so let's go to network than that rooftop and just want to point out that this is a pretty good resource that you should check out. So whenever we make a request it's going to show up and here it's going to show the response to preview this preview. The whole thing is to show the headers and yeah so you'll also notice that request headers here has authorization which contains or token which is what's allowing us to get this content back. So response shows it and timing. That's a bunch of cool junk that you don't really need to worry about. Okay so it's all working. We got rid of our laws and we implemented the action with redux. Likewise disfavoring I am to the server. So that's it for NEWS for now. Let's go and commit. Code status. GET OUT. GET command that say how did that new newsletter hack shame and with redoes thunk and promise to all right. So that's it for news letters. For now we saw a couple of things we've had such as the images and the permissions are displaying certain things. And of course the beautiful styles and. Yeah. And then another component here when we get around. But the next guy we are going to get into our requests. [00:17:30][141.8]
[00:17:32] So when we visit 3000 are you running on flash quest we don't have anything. And basically what the requests are are pulled the design here. I'll just leave it in here. So basically the requests are these. So we're going to learn how to add in this component is going to be a few components here. I'll just go over it and the next guy where we will get an overview of this feature. This bigger feature will feature inside. So we have code committed and we are ready to hop into that. I'll see you in the next guy. [00:17:32][0.0]
[1038.9]