Adds ability to search for recipe & search for errors

src/App.js

@@ -1,18 +1,67 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import "./App.css";
+import { Recipe } from "./Components/Recipe";
+import { Search } from "./Components/Search";
+
+const APP_ID = "fc6f60d3";
+const APP_KEY = "bd93df5272c4eb7bc29fd506cea911b9";
+const BASE_ENDPOINT = `https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_KEY}`;
+
+const withErrorHandling = WrappedComponent => ({ error, children }) => {
+  return (
+    <WrappedComponent>
+      {error ? <div className="error-message">Error! {error}</div> : children}
+    </WrappedComponent>
+  );
+};
+
+const ErrorWrapper = withErrorHandling(({ children }) => <div>{children}</div>);
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      error: false,
+      recipeList: [],
+      query: ""
+    };
+  }
+
+  callApiWithQuery = query => {
+    fetch(`${BASE_ENDPOINT}&q=${query}`)
+      .then(response => response.json())
+      .then(
+        response =>
+          response.hits.length > 0
+            ? this.setState({ recipeList: [...response.hits], error: null })
+            : this.setState({ error: "Nothing to see here!", recipeList: "" })
+      )
+      .catch(error => this.setState({ error: error.message }));
+  };
+
+  componentDidMount() {
+    this.callApiWithQuery("cake");
+  }
+
+  updateSearch = e => {
+    this.setState({ query: e.target.value });
+    this.callApiWithQuery(this.state.query);
+  };
+
   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>
+        <Search onChange={this.updateSearch} value={this.state.query} />
+        <ErrorWrapper error={this.state.error}>
+          {this.state.recipeList &&
+            this.state.recipeList.map(recipe => (
+              <Recipe
+                name={recipe.recipe.label}
+                calories={recipe.recipe.calories}
+                key={recipe.recipe.url}
+              />
+            ))}
+        </ErrorWrapper>
       </div>
     );
   }

src/Components/Recipe.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const Recipe = ({ name, calories }) => {
+  return (
+    <div key={name}>
+      Name: {name}
+      <br />
+      Calories: {calories}
+    </div>
+  );
+};

src/Components/Search.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Search = ({ onChange, value }) => {
+  return <input value={value} onChange={e => onChange(e)} />;
+};

yarn.lock

@@ -5126,7 +5126,7 @@ react-dev-utils@^5.0.0:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
@@ -5183,7 +5183,7 @@ [email protected]:
   optionalDependencies:
     fsevents "^1.1.3"
 
-[email protected]:
+react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies: