From df4e51678a6ca731e5ef3e8740ddd9ff5a3515ae Mon Sep 17 00:00:00 2001
From: Katie Davis <katiejbdavis@gmail.com>
Date: Mon, 26 Feb 2018 09:43:41 -0500
Subject: [PATCH 1/2] adds api call and HOC error handling

---
 src/App.js               | 62 +++++++++++++++++++++++++++++++++-------
 src/Components/Recipe.js | 11 +++++++
 yarn.lock                |  4 +--
 3 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 src/Components/Recipe.js

diff --git a/src/App.js b/src/App.js
index 203067e..843a9a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,60 @@
-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";
+
+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 DivWithErrorHandling = withErrorHandling(({ children }) => (
+  <div>{children}</div>
+));
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      error: null,
+      recipeList: [],
+      searchText: ""
+    };
+  }
+
+  componentDidMount() {
+    fetch(`${BASE_ENDPOINT}&q=cake`)
+      .then(response => response.json())
+      .then(
+        response =>
+          response.hits.length > 0
+            ? this.setState({ recipeList: [...response.hits] })
+            : this.setState({ error: "No recipes found" })
+      )
+      .catch(error => this.setState({ error: error.message }));
+  }
+
   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>
+        <DivWithErrorHandling error={this.state.error}>
+          <div className="recipe-list">
+            {this.state.recipeList.map(recipe => (
+              <Recipe
+                name={recipe.recipe.label}
+                calories={recipe.recipe.calories}
+                key={recipe.recipe.calories}
+              />
+            ))}
+          </div>
+        </DivWithErrorHandling>
       </div>
     );
   }
diff --git a/src/Components/Recipe.js b/src/Components/Recipe.js
new file mode 100644
index 0000000..16dbc57
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 4713834..164bfc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5126,7 +5126,7 @@ react-dev-utils@^5.0.0:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@16.2.0:
+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 @@ react-scripts@1.1.1:
   optionalDependencies:
     fsevents "^1.1.3"
 
-react@16.2.0:
+react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:

From 19e28adc2fab82744a99c35067765514a4611524 Mon Sep 17 00:00:00 2001
From: Katie Davis <katiejbdavis@gmail.com>
Date: Mon, 26 Feb 2018 10:21:39 -0500
Subject: [PATCH 2/2] adds search

---
 src/App.js               | 43 +++++++++++++++++++++++-----------------
 src/Components/Recipe.js |  2 +-
 src/Components/Search.js |  5 +++++
 3 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 src/Components/Search.js

diff --git a/src/App.js b/src/App.js
index 843a9a3..23d33bf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,60 +1,67 @@
 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 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}
+      {error ? <div className="error-message">Error! {error}</div> : children}
     </WrappedComponent>
   );
 };
 
-const DivWithErrorHandling = withErrorHandling(({ children }) => (
-  <div>{children}</div>
-));
+const ErrorWrapper = withErrorHandling(({ children }) => <div>{children}</div>);
 
 class App extends Component {
   constructor() {
     super();
     this.state = {
-      error: null,
+      error: false,
       recipeList: [],
-      searchText: ""
+      query: ""
     };
   }
 
-  componentDidMount() {
-    fetch(`${BASE_ENDPOINT}&q=cake`)
+  callApiWithQuery = query => {
+    fetch(`${BASE_ENDPOINT}&q=${query}`)
       .then(response => response.json())
       .then(
         response =>
           response.hits.length > 0
-            ? this.setState({ recipeList: [...response.hits] })
-            : this.setState({ error: "No recipes found" })
+            ? 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">
-        <DivWithErrorHandling error={this.state.error}>
-          <div className="recipe-list">
-            {this.state.recipeList.map(recipe => (
+        <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.calories}
+                key={recipe.recipe.url}
               />
             ))}
-          </div>
-        </DivWithErrorHandling>
+        </ErrorWrapper>
       </div>
     );
   }
diff --git a/src/Components/Recipe.js b/src/Components/Recipe.js
index 16dbc57..19e3383 100644
--- a/src/Components/Recipe.js
+++ b/src/Components/Recipe.js
@@ -5,7 +5,7 @@ export const Recipe = ({ name, calories }) => {
     <div key={name}>
       Name: {name}
       <br />
-      Calories: {calories}}
+      Calories: {calories}
     </div>
   );
 };
diff --git a/src/Components/Search.js b/src/Components/Search.js
new file mode 100644
index 0000000..6c6d5e6
--- /dev/null
+++ b/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)} />;
+};