Add information about recipes

recipes/src/components/List/styles.scss

@@ -1,3 +1,4 @@
+@import 'styles/_variables';
 
 .cbk-list {
   padding: 8px 0;
@@ -15,5 +16,18 @@
     &:hover {
       background-color: rgba(0,0,0,0.04)
     }
+    .primary-text,
+    .secondary-text {
+      display: block
+    }
+    .secondary-text {
+      font-size: 0.75rem;
+      font-style: italic;
+      color: $grey-500;
+    }
+    .actions { 
+      display: flex;
+      align-items: center;
+    }
   }
 }

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

@@ -28,8 +28,11 @@ interface ShoppingListState {
 
 const renderItem = (actions: ActionsType) => (props: ShoppingItem) => (
   <>
-    <span>{props.name}</span>
     <span>
+      <span className='primary-text'>{props.name}</span>
+      <span className='secondary-text'>{props.recipeName && props.recipeName.join(', ')}</span>
+    </span>
+    <span className='actions'>
       <Button icon='delete' onClick={() => actions.removeItemFromCart(props.name)}/>
       <Button icon='remove'/>
       <input type='number' value={props.quantity} readOnly/>

recipes/src/containers/ShoppingCart/reducers.ts

@@ -16,7 +16,7 @@ const initialState: ShoppingCartState = {
         _original: '4 6oz Chicken Breast',
         suggestions: [],
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm', 'Fried Chicken']
       },
       {
         name: 'eggs',
@@ -25,7 +25,7 @@ const initialState: ShoppingCartState = {
         _original: '2 Eggs',
         suggestions: [],
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm']
       },
       {
         name: 'freshly grated parm',
@@ -34,7 +34,7 @@ const initialState: ShoppingCartState = {
         _original: 'Freshly Grated Parm',
         suggestions: [],
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm']
       },
       {
         name: 'bread crumbs',
@@ -58,7 +58,7 @@ const initialState: ShoppingCartState = {
           }
         ],
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm']
       },
       {
         name: 'salt and pepper, to taste',
@@ -67,7 +67,7 @@ const initialState: ShoppingCartState = {
         _original: 'Salt and Pepper, to taste',
         suggestions: [],
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm']
       },
       {
         name: 'light olive oil for shallow frying',
@@ -75,7 +75,7 @@ const initialState: ShoppingCartState = {
         unit: '',
         _original: 'Light Olive Oil for shallow Frying',
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
+        recipeName: ['Sunday Night Chicken Parm']
       },
       {
         name: 'olive oil',
@@ -83,7 +83,6 @@ const initialState: ShoppingCartState = {
         unit: 'tbsp',
         _original: '3 Tbsp of Olive Oil',
         recipeId: '5d37045aef8ef87af296cba7',
-        recipeName: 'Sunday Night Chicken Parm'
       },
     ],
     recipesId: [
@@ -98,7 +97,7 @@ const getIngredients = (recipe: DBRecipe): ShoppingItem[] => {
       ...subRecipe.ingredients.map(ingredient => ({
         ...ingredient,
         recipeId: recipe._id,
-        recipeName: recipe.name
+        recipeName: [recipe.name]
       })),
     ]
   }, [] as ShoppingItem[])

recipes/src/types/shopping-cart.ts

@@ -2,7 +2,7 @@ import Recipe, { Ingredient } from './recipes';
 
 interface ShoppingItem extends Ingredient {
   recipeId: string,
-  recipeName?: string
+  recipeName?: string[]
 }
 
 export default ShoppingItem;