Flux Architecture: Component Wrap Up

[00:00] So now that we have our routing and our Flux architecture all in place we're going to go ahead and wrap up our application. Here on the right we've got our current application, here on the left we've got our target application, this is our completed application. So starting right here on the home page we're looking at our catalog component. We can see that each of these items in addition to an Add Cart button has a Learn More button, when we click on that it takes us to this stand-alone page for that where we can add to cart and we can continue shopping.

[00:30] So we'll start by creating that button and that route, so to create the route we're just going to copy our cart route and instead of going to cart or instead of our path being cart it's going to be item/:item now this colon item becomes a variable which gets passed into our component as a prop. Now our component is going to be called catalogDetail and we're going to need to create that, so let's go ahead and import it now, catalogDetail from that's going to come from our product directory which we created earlier, we're just going to call that app-catalogdetail.

[01:09] So we'll go ahead and create that now, app-catalogdetail.js. So we're going to need to bring in a handful of things here. We've got React, AppStore, or StoreWatchMixin, App Actions, our cart button and link from router. We actually jump over here to our catalog item that we're using in the catalog component and use a bit of that code here. So we're not going to worry about these columns, we've got our title, we're not going to worry about our image being responsive, rather than our summary, we're going to show the description, we'll have the cost, we've got all the same elements here.

[01:58] We're going to wrap our cart button in a buttonGroup, and we'll drop in a link component into that group, and our path, again this is for our continue shopping button, let me go ahead and get that text in there. So our path is just going to be a path back to the home page.

[02:17] We'll go ahead and add some class on this to match our other button, which will be button, button default, button small. We're actually going to update this to a constant called catalogDetail, and when we export that we'll wrap it in our StoreWatchMixin, pass in our catalogDetail component and then we're going to need a state callback which we're going to call getCatalogItem, and we'll create that right up here, getCatalogItem.

[02:48] What we're going to do is we're going to say item is equal to AppStore.getCatalog, so now we've got our entire catalog, we're going to use the array method of find. We're going to destructure our item to get the ID of the item, then we'll just say that that ID equal our props.params. Now that's how we get values that are passed in from React router.item. We'll just return our state of item with that item. So we can save that, and we'll jump over to our catalogItem which is in our catalog component.

[03:33] We just need to add that Learn More button here. So we're going to bring in link from react router and we're going to route this in a button group, drop our cart button in there and create another link component, its inner content is going to be "Learn More," and it's to value, rather than being a string, will be an interpolated string. So I have item/props.item.ID and again we'll add some class here to match our other button, so it will be button, button default, and button small.

[04:11] So let's go ahead and jump over to our applications which are starting to look fairly identical. Our add to cart and all that is still working, let's jump to learn more. We're getting an error there, so let's check that out. We've got props not defined in catalog details.

[04:29] So, you know what? We are not passing in our props there, so if you remember it all when we created our StoreWatchMixin, our state callback gets a value of props, and we need that in this particular state callback in order to get the item that was passed in from React routers. So we'll save that, try this out one more time, and there is our catalog page, so add to cart, add to cart, learn more, and we can add to cart here, everything seems to be working just fine.

[05:02] Looks like we're missing a little bit of styling on our catalog item, so we'll jump right here and say let itemstyle equal and we'll do a border bottom of 1 pixel, solid, we'll go with CCC, and we'll also give that a padding on the bottom of 15 pixels, we'll just drop that right here. See how we're looking, cool. That is clearly identical. So if we jump over to our cart, one thing that we're missing is a very simple continue shopping link right there at the bottom.

[05:44] We'll jump to our cart, we'll bring in link from react router and right here at the end of our table we'll drop in a link component with a to value equal to our home route, and we'll just say "continue shopping." Cool, so that worked. Everything in our application seems to match up with our target application.