fetched recipes, handled errors, added search input

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .idea
+.env
 .DS_Store
 .env.local
 .env.development.local

src/App.js

@@ -1,18 +1,73 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import './styles/App.css';
+import { RecipeList } from './RecipeList.js';
+import SearchBar from './SearchBar.js';
+import { Error } from './Error.js';
+
+const app_id = process.env.REACT_APP_APP_ID;
+const app_key = process.env.REACT_APP_APP_KEY;
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      isLoading: false,
+      recipes: []
+    };
+  }
+
+  fetchRecipes = (foodItem = 'cake') => {
+    let recipeUrl = `https://api.edamam.com/search?&app_id=${app_id}&app_key=${app_key}&q=${foodItem}`;
+    return new Promise((res, rej) => {
+      return fetch(recipeUrl)
+        .then(res => res.json())
+        .then(
+          value => {
+            if (value.hits.length === 0) {
+              rej('No recipe found!');
+            } else {
+              const recipes = value.hits.map(foodItem => ({
+                name: foodItem.recipe.label,
+                calories: Math.round(foodItem.recipe.calories)
+              }));
+              res(recipes);
+            }
+          },
+          error => {
+            rej('Oops, something went wrong!');
+            throw error;
+          }
+        );
+    });
+  };
+
+  componentDidMount() {
+    this.fetchRecipes()
+      .then(recipes => {
+        this.setState({ recipes });
+      })
+      .catch(e => this.setState({ error: e }));
+  }
+
+  updateError = error => {
+    this.setState({ error });
+  };
+
+  updateRecipes = recipes => {
+    this.setState({ recipes });
+  };
+
   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>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        {this.state.error && <Error error={this.state.error} />}
+        <SearchBar
+          fetchRecipes={this.fetchRecipes}
+          updateError={this.updateError}
+          updateRecipes={this.updateRecipes}
+        />
+        <RecipeList recipes={this.state.recipes} />
       </div>
     );
   }

src/EachRecipe.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const EachRecipe = ({ recipe }) => {
+  return (
+    <li>
+      {recipe.name} {recipe.calories}
+    </li>
+  );
+};

src/Error.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Error = ({ error }) => {
+  return <p>{error}</p>;
+};

src/RecipeList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EachRecipe } from './EachRecipe.js';
+
+export const RecipeList = ({ recipes }) => {
+  return (
+    <ul>
+      {recipes.map((recipe, index) => (
+        <EachRecipe recipe={recipe} key={index} />
+      ))}
+    </ul>
+  );
+};

src/SearchBar.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+
+class SearchBar extends Component {
+  handleKeyPress = event => {
+    let value = this.textInput.value;
+    if (event.key === 'Enter' && value) {
+      this.props
+        .fetchRecipes(value)
+        .then(recipes => this.props.updateRecipes(recipes))
+        .catch(e => this.props.updateError(e));
+      this.textInput.value = '';
+    }
+  };
+
+  render() {
+    return (
+      <input
+        autoFocus
+        className="inputBox"
+        onKeyPress={this.handleKeyPress}
+        ref={input => {
+          this.textInput = input;
+        }}
+        type="text"
+        placeholder="Type to search for recipe"
+        required
+      />
+    );
+  }
+}
+
+export default SearchBar;

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './styles/index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';