Tahuana's assignment

src/App.css

@@ -26,3 +26,8 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.Input {
+  width: 20em;
+  height: 1.3em;
+}

src/App.js

@@ -1,21 +1,76 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { Credentials } from './config/Config.js'
+import Recipe from './components/Recipe.js'
+import Error from './components/Error.js'
+import SearchBar from './components/SearchBar'
+
+
+const branch = (test, ComponentOnPass, ComponentOnFail) => props => test ? props.errorMessage.map(error => <Error message={error} />) :  props.recipeList.map(recipe => <Recipe myRecipe = {recipe} />)
 
 class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+      search: "cakes",
+      lastSearch: "",
+      recipeList: [],
+      errorMessage: [],
+      hasError: false
+    }
+  }
+
+  updateSearch = (event) => {
+    this.setState({search: event.target.value})
+  }
+
+  handleErrors = (response) => {
+    if (this.state.lastSearch.length === 0) {
+      throw {message: "Empty search"};
+    };
+    if (this.state.recipeList.length === 0) {
+      throw {message: "No recipes found"};
+    };
+    return response;
+  }
+
+  fetchRecipes = (query) => {
+    const endpoint = `${Credentials.URL}?app_id=${Credentials.APP_ID}&app_key=${Credentials.APP_KEY}&q=${query}`
+    this.setState({
+      lastSearch: this.state.search,
+      hasError: false,
+      errorMessage: []
+    })
+
+    fetch(endpoint)
+    .then(response => response.json())
+    .then(response => this.setState({recipeList: response.hits}))
+    .then(this.handleErrors)
+    .catch((error) => this.setState({hasError: true, errorMessage: [error.message], recipeList: []}))
+  }
+
+  componentDidMount() {
+    this.fetchRecipes(this.state.search);
+  }
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+          <h1 className="App-title">Welcome to Edamam Recipes</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <div className="recipe-list">
+          <SearchBar updateSearch={this.updateSearch} search={this.fetchRecipes} query={this.state.search}/>
+          <p>Recipe List for "{this.state.lastSearch}":</p>
+            {branch(this.state.hasError, Recipe, Error)(this.state)}
+        </div>
       </div>
     );
   }
 }
 
 export default App;
+
+

src/components/Error.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Error = (props) => 
+    <div>
+        <p>Ops...: {props.message}</p>
+    </div>
+
+
+export default Error;
+

src/components/Recipe.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Recipe = (props) => (
+    <p key={props.myRecipe.recipe.label} >Name: {props.myRecipe.recipe.label} - Calories: {Math.floor(props.myRecipe.recipe.calories)}</p>
+)
+
+export default Recipe;
+

src/components/SearchBar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SearchBar = ({updateSearch, search, query}) => (
+    <div>
+        <input className="Input" type="text" placeholder="Search you recipe..." onChange={(event) => updateSearch(event)} />
+        <button onClick={()=> search(query)}>Search</button>
+    </div>
+)
+
+export default SearchBar;
+

src/config/Config.js

@@ -0,0 +1,9 @@
+export const Credentials = {
+    APP_ID: 'd16f0366',
+    APP_KEY: '67b7336730c87b15ed22e731e1723c47',
+    URL: 'https://api.edamam.com/search'
+}
+
+// an example API request with a cake query would be
+// `${BASE_ENDPOINT}&q=cake`
+//BASE_ENDPOINT: `https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_KEY}`