From 73b5bfd3536d27cc0dba933bbe5d160e16728b9c Mon Sep 17 00:00:00 2001
From: talyh <taly.hotimsky@gmail.com>
Date: Sat, 24 Feb 2018 22:35:09 -0500
Subject: [PATCH 1/5] Basic list implemented

---
 src/App.js                   | 29 ++++++++++++++++++++---------
 src/components/RecipeCard.js | 14 ++++++++++++++
 src/components/RecipeList.js | 12 ++++++++++++
 src/data/API_Constants.js    |  6 ++++++
 yarn.lock                    |  4 ++--
 5 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 src/components/RecipeCard.js
 create mode 100644 src/components/RecipeList.js
 create mode 100644 src/data/API_Constants.js

diff --git a/src/App.js b/src/App.js
index 203067e..e785b62 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,30 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { BASE_ENDPOINT } from './data/API_Constants.js'
+import RecipeList from './components/RecipeList'
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      recipes: []
+    }
+  }
+
+
+  componentDidMount = () => {
+    fetch(`${BASE_ENDPOINT}&q=cake`)
+      .then(respone => respone.json())
+      .then(response => this.setState({ recipes: [...response.hits] }))
+  }
+
+
   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>
-      </div>
+      <RecipeList data={this.state.recipes} />
     );
   }
 }
diff --git a/src/components/RecipeCard.js b/src/components/RecipeCard.js
new file mode 100644
index 0000000..9b6edde
--- /dev/null
+++ b/src/components/RecipeCard.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+
+export default class RecipeCard extends Component {
+    render() {
+        const { label, calories } = this.props.data.recipe
+
+        return (
+            <li>
+                <div><label>Recipe: </label>{label}</div>
+                <div><label>Calories: </label>{Math.round(calories * 100) / 100}</div>
+            </li>
+        )
+    }
+}
diff --git a/src/components/RecipeList.js b/src/components/RecipeList.js
new file mode 100644
index 0000000..d410b10
--- /dev/null
+++ b/src/components/RecipeList.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import RecipeCard from './RecipeCard'
+
+export default class RecipeList extends Component {
+    render() {
+        return (
+            <div>
+                <ul>{this.props.data.map((item, index) => <RecipeCard data={item} />)}</ul>
+            </div>
+        )
+    }
+}
diff --git a/src/data/API_Constants.js b/src/data/API_Constants.js
new file mode 100644
index 0000000..051325a
--- /dev/null
+++ b/src/data/API_Constants.js
@@ -0,0 +1,6 @@
+const APP_ID = 'a0654b69';
+const APP_KEY = '2ce30d2c76c4084e15a9264fcb77b7c0';
+
+const BASE_ENDPOINT = `https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_KEY}`;
+
+export { BASE_ENDPOINT }
\ No newline at end of file
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 a4379c0b944e95d250ccf6608e41c7707ffb1159 Mon Sep 17 00:00:00 2001
From: talyh <taly.hotimsky@gmail.com>
Date: Sun, 25 Feb 2018 11:00:38 -0500
Subject: [PATCH 2/5] Error handling

---
 src/App.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index e785b62..078491c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,8 @@ class App extends Component {
     super(props)
 
     this.state = {
-      recipes: []
+      recipes: [],
+      error: ''
     }
   }
 
@@ -17,15 +18,23 @@ class App extends Component {
   componentDidMount = () => {
     fetch(`${BASE_ENDPOINT}&q=cake`)
       .then(respone => respone.json())
-      .then(response => this.setState({ recipes: [...response.hits] }))
+      .then(response => response.hits.length > 0 ? this.setState({ recipes: [...response.hits] }) : this.setState({ error: "No recipes found" }))
+      .catch(error => this.setState({ error: error.message }))
   }
 
 
   render() {
-
-    return (
-      <RecipeList data={this.state.recipes} />
-    );
+    console.log(this.state)
+    if (this.state.recipes.length > 0) {
+      return (
+        <RecipeList data={this.state.recipes} />
+      );
+    }
+    else {
+      return (
+        <div>{this.state.error}</div>
+      )
+    }
   }
 }
 

From 2e0d73ccab2dcfe8e184e575f2067b40272c7b9b Mon Sep 17 00:00:00 2001
From: talyh <taly.hotimsky@gmail.com>
Date: Sun, 25 Feb 2018 11:08:32 -0500
Subject: [PATCH 3/5] Content  and Error components created to display either
 list or errors

---
 src/App.js                | 14 ++------------
 src/components/Content.js | 20 ++++++++++++++++++++
 src/components/Error.js   |  9 +++++++++
 3 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Content.js
 create mode 100644 src/components/Error.js

diff --git a/src/App.js b/src/App.js
index 078491c..0e6c87a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { BASE_ENDPOINT } from './data/API_Constants.js'
-import RecipeList from './components/RecipeList'
+import Content from './components/Content'
 
 class App extends Component {
   constructor(props) {
@@ -24,17 +24,7 @@ class App extends Component {
 
 
   render() {
-    console.log(this.state)
-    if (this.state.recipes.length > 0) {
-      return (
-        <RecipeList data={this.state.recipes} />
-      );
-    }
-    else {
-      return (
-        <div>{this.state.error}</div>
-      )
-    }
+    return <Content list={this.state.recipes} error={this.state.error} />
   }
 }
 
diff --git a/src/components/Content.js b/src/components/Content.js
new file mode 100644
index 0000000..9e12847
--- /dev/null
+++ b/src/components/Content.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import RecipeList from './RecipeList'
+import Error from './Error'
+
+export default class Content extends Component {
+    render() {
+        const { list, error } = this.props
+
+        if (list.length > 0) {
+            return (
+                <RecipeList data={list} />
+            );
+        }
+        else {
+            return (
+                <Error message={error} />
+            )
+        }
+    }
+}
diff --git a/src/components/Error.js b/src/components/Error.js
new file mode 100644
index 0000000..b7ad544
--- /dev/null
+++ b/src/components/Error.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class Error extends Component {
+    render() {
+        return (
+            <div>{this.props.message}</div>
+        )
+    }
+}

From b33af70d784a1990c64333761c8153cef1773c65 Mon Sep 17 00:00:00 2001
From: talyh <taly.hotimsky@gmail.com>
Date: Sun, 25 Feb 2018 11:10:54 -0500
Subject: [PATCH 4/5] Search extracted in its own function

---
 src/App.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 0e6c87a..c0d82e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,11 @@ class App extends Component {
 
 
   componentDidMount = () => {
-    fetch(`${BASE_ENDPOINT}&q=cake`)
+    this.search('cake')
+  }
+
+  search = term => {
+    fetch(`${BASE_ENDPOINT}&q=${term}`)
       .then(respone => respone.json())
       .then(response => response.hits.length > 0 ? this.setState({ recipes: [...response.hits] }) : this.setState({ error: "No recipes found" }))
       .catch(error => this.setState({ error: error.message }))

From 046655e14bcebf0ef475a5b541dea73d77d34774 Mon Sep 17 00:00:00 2001
From: talyh <taly.hotimsky@gmail.com>
Date: Sun, 25 Feb 2018 11:37:08 -0500
Subject: [PATCH 5/5] Implemented Search

---
 src/App.js                     | 18 +++++++++++++++---
 src/components/FilterButton.js |  9 +++++++++
 src/components/FilterInput.js  |  9 +++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/components/FilterButton.js
 create mode 100644 src/components/FilterInput.js

diff --git a/src/App.js b/src/App.js
index c0d82e2..429c1ff 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { BASE_ENDPOINT } from './data/API_Constants.js'
+import FilterInput from './components/FilterInput'
+import FilterButton from './components/FilterButton'
 import Content from './components/Content'
 
 class App extends Component {
@@ -10,15 +12,19 @@ class App extends Component {
 
     this.state = {
       recipes: [],
-      error: ''
+      error: '',
+      searchTerm: ''
     }
   }
 
+  defaultSearch = 'cake'
 
   componentDidMount = () => {
-    this.search('cake')
+    this.setState({ searchTerm: this.defaultSearch }, () => this.search(this.state.searchTerm))
   }
 
+  setSearchTerm = ev => this.setState({ searchTerm: ev.target.value, error: '', recipes: [] })
+
   search = term => {
     fetch(`${BASE_ENDPOINT}&q=${term}`)
       .then(respone => respone.json())
@@ -28,7 +34,13 @@ class App extends Component {
 
 
   render() {
-    return <Content list={this.state.recipes} error={this.state.error} />
+    return (
+      <div>
+        <FilterInput value={this.state.searchTerm} onChange={this.setSearchTerm} />
+        <FilterButton onClick={() => this.search(this.state.searchTerm)}>Search</FilterButton>
+        <Content list={this.state.recipes} error={this.state.error} />
+      </div>
+    )
   }
 }
 
diff --git a/src/components/FilterButton.js b/src/components/FilterButton.js
new file mode 100644
index 0000000..ec94b19
--- /dev/null
+++ b/src/components/FilterButton.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class FilterButton extends Component {
+    render() {
+        return (
+            <button onClick={this.props.onClick}>{this.props.children}</button>
+        )
+    }
+}
diff --git a/src/components/FilterInput.js b/src/components/FilterInput.js
new file mode 100644
index 0000000..1816b9c
--- /dev/null
+++ b/src/components/FilterInput.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class FilterInput extends Component {
+    render() {
+        return (
+            <input value={this.props.value} onChange={this.props.onChange} />
+        )
+    }
+}