Show recipes' ingredient list

recipes/src/components/RecipeCard/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import IRecipe from '../../types/recipes';
+import IRecipe, { IIngComponent, IIngredient } from '../../types/recipes';
 import Card, {
   CardActions,
   CardActionButtons,
@@ -16,6 +16,41 @@ import { ReactComponent as Servings } from 'svgs/servings.svg';
 
 import './styles.scss';
 
+
+type ShowIngredientsProps = {
+  ingredients: IIngComponent[]
+};
+
+function ShowIngredients(props: ShowIngredientsProps) {
+  const { ingredients } = props;
+  return (
+    <div className="cbk-ingredient-list">
+      {
+        ingredients.map((item, i) => (
+          <ul key={i}>
+            {
+              item.name ? 
+                <li className="section-name">
+                  {item.name}
+                </li>
+                : null
+            }
+            {
+              item.ingredients.map((ing, j) => (
+                <li className='ingredient' key={j}>
+                  <span>{ing.name}</span>
+                  <span>{ing.quantity + ing.unit}</span>
+                </li>
+              ))
+            }
+          </ul>
+        ))
+      }
+    </div>
+  )
+}
+
+
 type RecipeCardProps = {
   recipe: IRecipe,
 }
@@ -51,6 +86,7 @@ function CBKRecipeCard(props: RecipeCardProps) {
       </div>
       <div className='cbk-recipe-card__content'>
         <div className='cbk-recipe-card__content__ingredients'>
+          <ShowIngredients ingredients={recipe.ingredients} />
         </div>
         <div className='cbk-recipe-card__content__instructions'>
           <ol>

recipes/src/components/RecipeCard/styles.scss

@@ -1,5 +1,46 @@
 @import 'styles/_variables.scss';
 
+.cbk-ingredient-list {
+  font-family: $font-family-display;
+  font-size: $font-size-large;
+  color: $grey-700;
+
+  li.section-name {
+    font-weight: $font-weight-bold;
+  }
+
+  li.ingredient {
+    display: table;
+    span {
+      display: table-cell;
+    }
+
+    span:first-child {
+      position: relative;
+      overflow: hidden;
+    }
+
+    span:first-child:after {
+      content: '';
+      position: absolute;
+      bottom: 0.2em;
+      margin-left: 0.5em;
+      width: 100%;
+      border-bottom: 2px dotted $grey-400;
+    }
+    span + span {
+      text-align: right;
+      width: 1%;
+      vertical-align: bottom;
+      padding-left: 0.5em;
+    }
+  }
+
+  li.ingredient:last-child {
+    margin-bottom: $spacing-small;
+  }
+}
+
 .cbk-recipe-card {
   border: 0px;
   padding: $spacing-large;
@@ -32,7 +73,6 @@
         display: block;
         margin: 0 auto;
         width: 50px;
-        /* height: 50%; */
         margin-top: -20px;
         border-bottom: 16px solid;
         border-bottom-color: $grey-300;

recipes/src/containers/recipes.tsx

@@ -62,6 +62,7 @@ class Recipes extends Component<RecipesContainerProps> {
               data.map((recipe: any, i: number) => {
                 return (
                   <Card
+                    key={i}
                     title={recipe.name}
                     onClick={this.handleRecipeSelection(recipe)}
                     summary={recipe.summary}

recipes/src/types/recipes.ts

@@ -1,3 +1,14 @@
+export interface IIngredient { 
+  name: string,
+  quantity: number,
+  unit: string,
+  _original: string,
+}
+export interface IIngComponent {
+  name: string,
+  ingredients: IIngredient[]
+}
+
 export default interface IRecipe {
   _id: string,
   author: {
@@ -8,15 +19,7 @@ export default interface IRecipe {
     cookingTime: string,
     servings: number
   },
-  ingredients: {
-    name: string,
-    ingredients: {
-      name: string,
-      quantity: number,
-      unit: string,
-      _original: string,
-    }[]
-  }[],
+  ingredients: IIngComponent[],
   instructions: string[],
   name: string,
   summary: string,