[00:00:01] Hi welcome back to the reactor. And this guy we're going to be setting up a few basic things we need to get this component on its way. So this out the newsletter component is going to contain a bunch of other components. We have our archive. We have a current newsletter which we're going to call newsletter latest to call this newsletter archive and then we need a couple routes because we're going to be able to have the functionality add and edit newsletters. So we're going to be doing this for now admin mean I may have said that we would be doing it for a standard service since we are logging in with the admin user. We will handle all the functionality and admin and revoke it. We will not give access to it to users who do not have the property set to true. So if I go to the site map here you can see that we have newsletter list your new newsletter and a newsletter newsletter detail. So that's another route we will need to do is newsletter detail when you click on one of these. You can see a newsletter and then here the ad can edit it and so on. So first thing we want to do is Fengjun these newsletters so we can have our newsletter list so we can just read. We should name rename our newsletter route newsletter list because that's what the sitemap says. So let's go ahead and do that really quick. Let's go to well let's leave it because our file structure is newsletter and we don't want to mess that all change later. [00:01:47][105.9]
[00:01:48] If we want to refactor it so we're going to refer to this as newsletter and newsletter or request. So we go to our database. I went ahead and I added some items for native databases for kind of building this backwards. We don't have a way that I Deason yet so we just need to be able to fetch some and we can fetch any if there are none. So I created some of that into the database so I could get newsletters. You'll see that I added in a few of these using post man river journal which is a placeholder. If you're to go to the if you're going to go to this your owl you'll see that it just gives us a placeholder image the size that we need. So I'm going to go ahead and read where I got that information is right here. 258 960. That's where I got the size of the image. That's why I put in the image url now. Now you could. You'll notice here is an ID title and body. There's a unique ID title a body and an image you are l. Don't worry about this underscore the piece of data. We don't need to worry about that. So when this data we can tensioning provocations we want to see this. So let's go to our application and let's get started on this. We need to Let's do this in the browser if you copy this link and you head over to the browser right now. I took off the. [00:03:21][93.6]
[00:03:23] I mean it's what's not protected but by the time you're watching this it will probably probably be protected so you probably won't be able to do this trade in your browser but if you copy this and then slash newsletter archive it's going to return the data solely to campiness data and throw it into our app. Basically it into our archive component. So the first step in doing all this is to create or archive components and then fetch it into there but then you'll notice this also has it. So we don't want to search directly in the archive component. We want to do it in the newsletter component and then feed it into each one of these components. So let's do it directly in newsletter digest. Solid start by saying import import connect from. React redux. And then we want to import our actions. Import start as actions. Sloshed sloshy actions. And then once connected on so and then once wooled persons write out our map state Prakoso function Knapp's state prompts date so we can have access to it and thus just returns state for now. Now here is a connect. The map still prompts past actions and then finally type in newsletter. Looks like there's an error up here and that's because from expected actions from actions. Okay now that set up let's go ahead and we need to dispatch an action to reduce register so we can actually fetch this data with you or else up here with these Literotica. So let's go ahead and write out that action. First we need a time so let's create a file interactions directory here and call it types I guess. I don't see a constant wall for constant search archive or let's just say for each newsletter archive. [00:05:42][139.3]
[00:05:47] Okay now in our index yes for our actions we need to import this and dispatch it or allow us to dispatch it. So let's say let's return all this at the top the import and might remember we just have to type in the action we were on which is fetch Newsletter Item can copy Kabia from our flash types. Now all we need to do is have a function that returns this type so that back in the component that is that is calling this function. We can dispatch it to our store so the export function fetch newsletter and then we don't want to pass on anything. We just want to return to our job harder our time and we don't need a payload because we're not passing anything although we'll probably come back to this because we'll well let's just do nothing. So we need to pass in our token so we have access because technically this is a protected route. So we need to make it so we can access this so we don't have our token so was just passing our token over and over here. The same token let's say action or what's the payload the token so that is when we can just get it from local storage so we'll just do this in a different guy. But I understand that in the end we need to pass in a token token so we can Baladi we can tell the server that we are indeed authenticated to receive this information that were signed. So let's go ahead and let's head over to our newsletter digest and will step out component didna. [00:07:51][123.3]
[00:07:53] We're doing it in here because we want to immediately fetch it right as the components and what you should do is actually perform where you're getting all your requests in the base level component. So eventually we will move this down to probably our route component. Yes in this case yes. So here we just want to see this thought process stuff that each and the name of the function which was fetch newsletter archive don't have a parameter it will start and fetch it. We've put our actions in here so it's going to work. But now we need to go to our instance dispatching we need to read reducer. So it's great. Nixon Yes. And you never forget. But we need another set to release another set of functions. So let's go to reducers and hit new file. Let's just call this one off and off. We need are actions let's say import fach. Well we'll typed up that newsletter archive and you'll see it work. If it doesn't do that for you just have an import fetch newsletter archive from actions types. Make sure you put in the double dot seat and go out of the reducers and into the actions out with this so we have on our clipboards and paste it and let's get started with our reducer. All right so to get started we just need to say thanks for the fall. Function state is equal to empty an action which we won't be using yet. Know what a statement. Actioner time so we can determine which type we're on. Case pension is an archive and we will return some stay real quick with details. The default case and investors archive. [00:10:05][131.4]
[00:10:06] Let's just return or stay. And then a piece of state. We don't want to actually pass an authenticated because we're searching in our data but we'll get around to that. So dot dot dot state. And then we want to say what it is we don't want to actioning this. We want to name this one newsletter. So what's the name of the newsletter. And since we're dealing with a newsletter actions here analysts say return state archive and then in bracket action. Or you could just say enough the Ogot. So that's going to give us Archa. So this archive is going to contain all of our objects which you see right here. So let's go ahead and test this out and see if it's working. But real quick we have to actually touch it. So we need our we need action to do. Similarly what we were doing with with our previous requests the signing. So let's go to our actions and we're not getting the data from anywhere here. The actual not payload. So what we need to do is get this out and instead use some to function and dispatch and then make a post request using x zeroes. So what we want to do is say X CEOs get in brackets here put you are out and then let's slash newsletter arcanas. Okay. Now we have that set up ProComp inputs in brackets in the same headers with say authorization. [00:12:05][119.2]
[00:12:08] And the reason is we can authenticate it's basically once I change it back to an authentic hated route we won't be able to access it because we haven't not a token that is not a token talking which is going to be the one we receive when we sign it and then response. And then in here we want to dispatch our fashion newsletter archive because now we have the data so we can see dispatch time News newsletter archive haloed response. So basically what's happening is we're calling news letter archive on our Heroku up here receiving the data the then part of our promise and then we are dispatching it to a producer with the payload. So then producer here resing action haloed which is archive data. So let's go to our newsletter our fetching him now in state. We don't want to put in the whole state. We just want the newsletter archive so it's the state of mind that says the newsletter. This site is an archive. So basically we can access our archive. Now this prompts archive. So here we want to put them in a list but real quick. Let's just take a breather here by logging and seeing if we're actually getting it. So as a console though long as a state newsletter archive. Let's go back to our browser and see if we didn't miss anything. See for actually getting the data. And of course we missed something because that's programming area we have cannot read property archived undefined. So basically what we need to do is we need to give this this component a default set of props because well that shouldn't be the problem. It should work. Regarde once read this again you cannot read archive of undefined function maps props. Okay so we have state done newsletters archive. Let's go to our newsletter. [00:14:41][152.7]
[00:14:41] Here we have our archive and this is indeed. Oh because we are important to reduce. Introducer next Friday sundried users say import on the same newsletter. Rudy's there was just a newsletter newsletter. These are from newsletters. None under me it's a newsletter newsletter Release. Now if we were to change this to just newsletter we can just say a but it might get confusing. I think it's a component. You might think it's a model. Let's just change it to a newsletter and while we're at it for a third time Let's rename our newsletter digest here reducers to newsletter deserve because we need to kind of have some clarity here because get confused because we have a component called newsletter digest. We need to be more specific so no comments and rumor indicating with files and stuff like that. So I was just reading what it means to reduce her. Let's go back to our newsletter not just make sure it's saved we should be worn out. I can see there is no such. Okay so the reason for doing this is because we're importing newsletter releasers somewhere which is obviously not reducers here and it's saying it's not. There a newsletter released back here page and sure enough we're receiving our data which is great for body image or or title and or Id just like you see here right here. So let's go ahead and utilizes data and put into a list inside of our newsletter component here. Let's do that in the next guy. So on single status get the commit set up direction and get requests. To receive or to newsletter. [00:16:58][137.0]
[00:17:02] All right let's go ahead and get into putting this into our component in the next guide. I'll see. [00:17:02][0.0]
[1002.4]