Implement basic shopping list display. Add List component

recipes/src/components/List/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import List, {ListItem, ListItemText, ListItemMeta} from '@material/react-list';
+
+import '@material/react-list/dist/list.css';
+
+type ListProps = {
+  nonInteractive?: boolean,
+  dense?: boolean,
+  items: {
+    primaryText: string,
+    secondaryText?: string,
+  }[]
+}
+
+const CBKList = (props: ListProps) => (
+  <List dense={props.dense} nonInteractive={props.nonInteractive}>
+    {
+      props.items.map((item, index) => (
+        <ListItem key={index}>
+          <ListItemText
+            primaryText={item.primaryText}
+          />
+        </ListItem>
+      ))
+    }
+  </List>
+);
+
+export default CBKList

recipes/src/containers/ShoppingCart/List/index.tsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { AppState } from 'store/configureStore';
+import { connect } from 'react-redux';
+import Navbar from 'components/Navbar';
+import { Grid, Row, Cell } from '@material/react-layout-grid';
+import List from 'components/List';
+import ShoppingItem from 'src/types/shopping-cart';
+
+interface ShoppingListProps extends RouteComponentProps {
+  items: ShoppingItem[],
+}
+
+class ShoppingList extends Component<ShoppingListProps, {}> {
+  render () {
+    console.log(this.props)
+    return (
+      <div className='cbk-shopping-list'>
+        <Navbar
+          title='Shopping List'
+        >
+
+        </Navbar>
+        <div>
+          <List
+            dense
+            items={this.props.items.map((item) => ({
+              primaryText: item.name
+            }))}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return state.shoppingCart;
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {}
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShoppingList);

recipes/src/containers/ShoppingCart/actions.ts

@@ -4,21 +4,9 @@ import ShoppingItem from 'types/shopping-cart';
 export const ADD_TO_CART = 'ADD_TO_CART';
 export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
 
-const getIngredients = (recipe: DBRecipe): ShoppingItem[] => {
-  return recipe.ingredients.reduce((ingredients, subRecipe) => {
-    return [
-      ...ingredients,
-      ...subRecipe.ingredients.map(ingredient => ({
-        ...ingredient,
-        recipeId: recipe._id
-      })),
-    ]
-  }, [] as ShoppingItem[])
-} 
-
 export const addToCart = (recipe: DBRecipe): AddToCart => ({
   type: ADD_TO_CART,
-  payload: getIngredients(recipe)
+  payload: recipe
 })
 
 export const removeFromCart = (recipe: DBRecipe): RemoveFromCart => ({
@@ -28,7 +16,7 @@ export const removeFromCart = (recipe: DBRecipe): RemoveFromCart => ({
 
 export type AddToCart = {
   type: typeof ADD_TO_CART,
-  payload: ShoppingItem[]
+  payload: DBRecipe
 }
 
 export type RemoveFromCart = {

recipes/src/containers/ShoppingCart/reducers.ts

@@ -1,14 +1,29 @@
 import ShoppingItem from 'types/shopping-cart';
 import { ActionTypes, ADD_TO_CART, REMOVE_FROM_CART } from './actions';
+import { DBRecipe } from 'src/types/recipes';
 
 type ShoppingCartState = {
-  cart: ShoppingItem[]
+  items: ShoppingItem[],
+  recipesId: string[],
 }
 
 const initialState: ShoppingCartState = {
-  cart: []
+  items: [],
+  recipesId: []
 };
 
+const getIngredients = (recipe: DBRecipe): ShoppingItem[] => {
+  return recipe.ingredients.reduce((ingredients, subRecipe) => {
+    return [
+      ...ingredients,
+      ...subRecipe.ingredients.map(ingredient => ({
+        ...ingredient,
+        recipeId: recipe._id
+      })),
+    ]
+  }, [] as ShoppingItem[])
+} 
+
 const shoppingCartReducer = (
   state = initialState,
   action: ActionTypes
@@ -16,16 +31,18 @@ const shoppingCartReducer = (
   switch (action.type) {
     case ADD_TO_CART:
       return {
-        cart: [
-          ...state.cart,
-          ...action.payload
-        ]
+        items: [
+          ...state.items,
+          ...getIngredients(action.payload)
+        ],
+        recipesId: state.recipesId.concat([action.payload._id])
       }
     case REMOVE_FROM_CART: 
       return {
-        cart: state.cart.filter(
+        items: state.items.filter(
           item => item.recipeId !== action.payload
-        )
+        ),
+        recipesId: state.recipesId.filter(item => item !== action.payload)
       }
     default:
       return state

recipes/src/route.config.tsx

@@ -4,9 +4,9 @@ import RecipesContainer from 'containers/Recipes';
 import CreateRecipe from 'containers/Recipes/Create';
 import ViewRecipe from 'containers/Recipes/View';
 import EditRecipe from 'containers/Recipes/Edit';
+import ShoppingList from 'containers/ShoppingCart/List';
 
 const emptyRoute = (title: string) => (props: any) => {
-  console.log(props);
   return (<h1>{title} {props.match.params && props.match.params.id}</h1>);
 };
 
@@ -34,7 +34,7 @@ const routes = [
     }]
   }, {
     path: '/shoplist',
-    component: emptyRoute('shopping list'),
+    component: ShoppingList,
   }
 ];