Merge pull request #40 from FoodBuddyApp/RecipeDetail

Recipe detail
FoodBuddyApp · Apr 30, 2018 · dc95bdd · dc95bdd
2 parents 14a1c36 + ef33110
commit dc95bdd
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 4 deletions.
diff --git a/scripts/actions/actionCreators.js b/scripts/actions/actionCreators.js
@@ -17,6 +17,16 @@ export function searchRecipes(url, cb) {
    }
 }
 
+export function getRecipeDetail(body, cb) {
+   return (dispatch, prevState) => {
+      api.getRecipeDetail(body)
+         .then((response) => {
+            console.log(response)
+            dispatch({type: 'GET_RECIPE_DETAIL', recipe: response})
+         })
+         .then(() => cb())
+}
+
 export function updateDiet(diet) {
    return (dispatch, prevState) => {
       dispatch({type: 'UPDATE_DIET', diet});

diff --git a/scripts/api.js b/scripts/api.js
@@ -63,4 +63,9 @@ export function del(endpoint) {
 export function getRecipes(url) {
    return get(url)
       .then((res) => res.json())
+}
+
+export function getRecipeDetail(body) {
+   return get('recipe/' + body.id)
+      .then((res) => res.json())
 }
diff --git a/scripts/components/Main/Main.jsx b/scripts/components/Main/Main.jsx
@@ -5,7 +5,7 @@ import {
 } from 'react-bootstrap';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
-import {Search, Recipes} from '../index.js'
+import {Search, Recipes, RecipeDetail} from '../index.js'
 
 export default class Main extends Component {
    constructor(props) {
@@ -20,7 +20,7 @@ export default class Main extends Component {
                <Navbar>
                   <Navbar.Header>
                      <Navbar.Brand>
-                        <a href="#home">Food Buddy</a>
+                        <a href="/">Food Buddy</a>
                      </Navbar.Brand>
                   </Navbar.Header>
                </Navbar>
@@ -30,7 +30,29 @@ export default class Main extends Component {
                   <Route exact path='/'
                      render={() => <Search {...this.props} />} />
                   <Route path='/recipes'
-                     render={() => <Recipes {...this.props} />} />
+                     render={() => {
+                        if(this.props.Recipes)
+                           return <Recipes {...this.props} />
+                        else
+                           return <Redirect to='/' />
+                     }}
+                  />
+                  <Route path='/detail/:id'
+                     render={({match}) => {
+                        console.log(match)
+                        var recipe = this.props.Recipes.find((recipe) => 
+                           recipe.id == match.params.id)
+                        if(recipe) {
+                           return <RecipeDetail 
+                                    {...recipe}
+                                    {...this.props} 
+                                  />
+                        }
+                        else {
+                           return <Redirect to='/' />
+                        }
+                     }}
+                  />
                </Switch>
             </div>
          </div>

diff --git a/scripts/components/RecipeDetail/RecipeDetail.css b/scripts/components/RecipeDetail/RecipeDetail.css
@@ -0,0 +1,43 @@
+.image {
+   display: block;
+}
+
+.ingredient-list {
+   text-align: left;
+}
+
+.instructions {
+   text-align: left;
+}
+.left {
+   text-align: left;
+}
+.center {
+   text-align: center;
+
+}
+.text {
+   float: left;
+   margin-left: 10px
+}
+
+.info {
+   position: absolute;
+   bottom: 0;
+}
+
+.right {
+   text-align: right;
+}
+
+
+cell {
+   border-style: solid;
+   border-radius: 30px;
+   border-color: black;
+   overflow: hidden;
+   width: 100%;
+   text-align: left;
+   margin-bottom: 10px;
+}
+
diff --git a/scripts/components/RecipeDetail/RecipeDetail.jsx b/scripts/components/RecipeDetail/RecipeDetail.jsx
@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import './RecipeDetail.css';
+import { Image, Button } from 'react-bootstrap';
+
+export default class RecipeDetail extends Component {
+   constructor(props) {
+      super(props);
+
+      this.state = {};
+
+   }
+   render() {
+      return (
+         <div className="centered-div">
+            <h1>{this.props.title}</h1>
+            <div className="cell ">
+               <div className="image">
+                  <Image src={this.props.image} responsive/>
+               </div>
+               <div className="text right">
+                  <h2>Recipe info</h2>
+                  <h4 className="left">Servings: {this.props.RecipeDetail.servings}</h4>
+                  {this.props.RecipeDetail.preparationMinutes &&
+                  <h4 className ="left">Prep Time: {this.props.RecipeDetail.preparationMinutes} Minutes</h4>}
+                  {this.props.RecipeDetail.cookingMinutes > 0 ?
+                     (this.props.RecipeDetail.cookingMinutes > 60 ?
+                        <h4>Cooking Time: {this.props.RecipeDetail.cookingMinutes/60} Hours</h4> :
+                        <h4>Cooking Time: {this.props.RecipeDetail.cookingMinutes} Minutes</h4>)
+                     : <h4 className="left">Ready In {this.props.RecipeDetail.readyInMinutes} Minutes</h4>}
+               </div>
+            </div>
+            <div className="cell center">
+               <h2>Ingredients</h2>
+               {this.props.missedIngredients.map((user) => {
+                  return <div key={user.id}><h4>{user.originalString}</h4></div>;
+               })}
+               {this.props.usedIngredientCount > 0 &&
+                  this.props.usedIngredients.map((user, i) => {
+                     return <div key={i}><h4>{user.originalString}</h4></div>;
+                  }) 
+               }
+            </div>
+               {this.props.RecipeDetail.analyzedInstructions.length > 0 &&
+                  <div className="cell left">
+                     <h2 className="center">Cooking Instructions</h2>
+                     {this.props.RecipeDetail.analyzedInstructions[0].steps.map((user) => {
+                        return <div key={user.number}><h4><b>Step {user.number}:</b> {user.step}</h4></div>;
+                     })}
+                  </div>
+               }
+         </div>
+      );
+   }
+}
+
diff --git a/scripts/components/RecipeSummary/RecipeSummary.jsx b/scripts/components/RecipeSummary/RecipeSummary.jsx
@@ -10,9 +10,14 @@ export default class Recipes extends Component {
       this.state = {};
 
       this.recipeClicked = this.recipeClicked.bind(this)
+      this.transitionToDetail = this.transitionToDetail.bind(this)
    }
 
    recipeClicked() {
+      this.props.getRecipeDetail({id: this.props.id}, this.transitionToDetail)
+   }
+
+   transitionToDetail() {
       this.props.history.push('/detail/' + this.props.id)
    }
 

diff --git a/scripts/components/index.js b/scripts/components/index.js
@@ -1,2 +1,3 @@
 export {default as Search} from './Search/Search';
 export {default as Recipes} from './Recipes/Recipes';
+export {default as RecipeDetail} from './RecipeDetail/RecipeDetail';
diff --git a/scripts/reducers/RecipeDetail.js b/scripts/reducers/RecipeDetail.js
@@ -0,0 +1,11 @@
+function RecipeDetail(state = {}, action) {
+   switch(action.type) {
+      case 'GET_RECIPE_DETAIL':
+         return action.recipe;
+      case 'TEST':
+      default:
+         return state;
+   }
+}
+
+export default RecipeDetail;
diff --git a/scripts/reducers/rootReducer.js b/scripts/reducers/rootReducer.js
@@ -2,7 +2,8 @@ import { combineReducers } from 'redux';
 
 import Recipes from './Recipes';
 import Options from './Options';
+import RecipeDetail from './RecipeDetail';
 
-const rootReducer = combineReducers({Recipes, Options});
+const rootReducer = combineReducers({Recipes, Options, RecipeDetail});
 
 export default rootReducer;