All right welcome back to the course and the last video we kind of set things up a little bit better we finished off the purchase history purchases. Now we're going to make an action. So when we click this we can set the item, the detail item, to the one we clicked, so that we can use it in the purchase detail.

All right let's go into our actions. Let's close out the terminal, let's going to user.js. and let's say export function setPurchaseDetail and here we will return an object and we'll say type is SET_PURCHASE_DETAIL and the payload will be the ID of what we click. So let's have this accept an ID. You need to create this type in our types folder, so let's go to types.js. And let's say SET_PURCHASE_DETAIL equal to SET_PURCHASE_DETAIL. Now let's close out of our types and actually do something in the reducer. So set SET_PURCHASE_DETAIL is called, we go to the reducer or user reducer. The user reducer has a case called SET_PURCHASE_DETAIL and SET_PURCHASE_DETAIL, what we're going to want to do, is we're going to want to say okay constant detail is equal to purchases. Here's all we'll do, we will say let detail purchase and just not do anything with it yet. Then we'll say state.purchases.map, and then we'll say purchase and then we'll say okay if purchase._is is equal to action.payload which is the ID, then purchaseDetail will be set to that purchase. And then, we'll just return state and purchaseDetail.

Okay. Get that in there. And then up here we want to introduce another variable called purchaseDetail. Okay. Well that's another attribute to be purchaseDetail. And this is just going to be an empty object at first because we haven't selected anything. Okay so get this logic in here, we're saying okay we have a purchase detail variable or let statement and then we're mapping over our existing purchases when this is called. And then if the ID matches up with the action.payload, which is the ID passed into the SET_PURCHASE_DETAIL function, we're overriding purchaseDetail which is previously null, and setting it to purchase. We're then returning our existing state with all of our purchases, but then at the end we're overriding purchaseDetail to be the one that we clicked on.

Okay. So what we want to do now is get out of our user reducer and we want to take our SET_PURCHASE_DETAIL call function and we want to go into index.js and import it, and then export it. Now what we want to do, now we have access to this is get out of here get our user and we want to go into purchases..js. We then want to make this, instead of a div, we want to make it in an a tag. We want to pass in an onClick function, and since we already set up our actions and connect function we have access to this function immediately.

So all we have to say is this.props.setPurchaseDetail and pass in purchase._id. So let's test if this works, and then I'll walk you through the flow one more time so you understand fully what's going on here.

Let's go to our application. Look's like might have an error somewhere. Let's inspect the element, let's go to console and it looks like setPurchaseDetail is not defined. So we need to do is make sure we're importing this in our combined reducers call. Okay, combined reducers, user reduce, we need to import it. Okay we should be good. Let's go back to our application. All right, looks good to me. Let's go ahead and click this, looks like nothing happens, but that's because we're not displaying it anywhere. So we need to do is open the Redux dev tools to the left and see what's happening when we click it. It looks like purchase detail is still empty. That's interesting.

Let's go to our application code and we'll see what's happening. Okay. So we're mapping over it, action.payload, purchase. Okay, purchaseDetails is equal to purchase. So we're returning state inside of the map function. What we want to do is return it after we go through the map function. Otherwise it's going to think that we're trying to basically return this object to now be state purchases.

OK so let's go in here and let's click it, let's go to our dev tools. You'll see when you click an object it fills up with one of the purchase items. It's got the user, with the name and the shipping. It's got the credit card. It's got the order date. It's got the the order number, the total, and the seven, the ID. Okay cool. So now all we need to do is develop this component, okay, the purchase detail. We need to basically give it a lot of JSX, and some styling to take in these items and display them in the purchase detail. Okay, we already have access to it. We just need to implement map state to props in this method. I mean this component. And then fill it up with JSX and the information, and then we can move on to the account information tab. Okay. We're also going to need to fix this bug. Okay. So let's go ahead and let's go to our code and fix that bug now. Okay so what we need to do to fix that, is-- let's actually leave it for now. Let's commit our code.
Terminal

git status
git add .
git commit -m "implemented set purchase detail action creator and reducer"

All right I'll see in the next video.

Resources

Source code