Promise homework - Stephanie's solution

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -1,28 +1,86 @@
-.App {
-  text-align: center;
+
+* {
+  margin: 0;
+  padding: 0;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body {
+  font-family: sans-serif;
+}
+
+
+input[type="text"], input[type="submit"], button {
+  appearance: none;
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+  outline: none;
+  border: 2px solid #ee4e7a;
+  border-radius: 4px;
+  margin-right: 0.4rem;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+input[type="submit"], button {
+  background-color: #ee4e7a;
+  color: #fff;
+  cursor: pointer;
 }
 
-.App-title {
-  font-size: 1.5em;
+.error-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+  font-size: 1.4rem;
+  color: #444;
 }
 
-.App-intro {
-  font-size: large;
+.search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem 0;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.list {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.list ul {
+  list-style: none;
+}
+
+.list li {
+  border: 1px solid #eee;
+  padding: 1rem 1.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #444;
+}
+
+.list--title {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.list li a {
+  color: #444;
+}
+
+.list li img {
+  width: 80px;
+  height: 80px;
+  margin-right: 1rem;
+}
+
+
+.list span {
+  /*flex: 1;*/
+  background-color: #eee;
+  color: #ee4e7a;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
 }

src/App.js

@@ -1,18 +1,114 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
 
+import { RecipeList } from './components/RecipeList';
+import { SearchBar } from './components/SearchBar';
+
+import { APP_ID, APP_KEY } from './config/';
+
+const ErrorMessage = ({message, isLoading}) => {
+  return (
+    <div className="error-message">
+      {
+        isLoading ? "Loading recipes..." : message
+      }
+    </div>
+  );
+};
+
 class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+      searchTerm: '',
+      recipes: {
+        fetchedList: [],
+        errorMessage: ''
+      },
+      isLoading: false
+    }
+  }
+
+  updateSearchTerm = (e) => {
+    this.setState({
+      searchTerm: e.target.value
+    });
+  }
+
+  onClickSearch = (e) => {
+    e.preventDefault();
+    this.fetchRecipes(this.state.searchTerm);
+  }
+
+  fetchRecipes = (searchTerm) => {
+    const BASE_ENDPOINT = `https://api.edamam.com/search?q=${searchTerm}&app_id=${APP_ID}&app_key=${APP_KEY}`;
+
+    this.setState({
+      isLoading: true
+    });
+
+    fetch(BASE_ENDPOINT)
+    .then(res => res.json())
+    .then(recipes => {
+      if(recipes.hits.length > 0) {
+        const data = recipes.hits.map(({recipe}) => {
+          return Object.assign({}, {
+            name: recipe.label,
+            calories: Math.floor(recipe.calories),
+            image: recipe.image,
+            url: recipe.url
+          });
+        });
+        this.setState({
+          searchTerm: '',
+          recipes: {
+            fetchedList: data,
+            errorMessage: []
+          },
+          isLoading: false
+        });
+      }
+      else {
+        this.setState({
+          recipes: {
+            fetchedList: [],
+            errorMessage: `Sorry. We cannot find recipes of ${this.state.searchTerm}. Please search for another food item.`
+          },
+          isLoading: false
+        });
+      }
+    })
+    .catch(err => {
+      this.setState({
+        recipes: {
+          fetchedList: [],
+          errorMessage: 'Oops...Failed to load recipes. Please let us know what went wrong!'
+        },
+        isLoading: false
+      });
+    });
+  };
+
+  componentDidMount(){
+    this.fetchRecipes('cake');
+  }
+
   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>
+        <SearchBar
+          inputValue={this.state.searchTerm}
+          updateSearchTerm={this.updateSearchTerm}
+          onClickSearch={this.onClickSearch}
+        />
+        {
+          this.state.recipes.fetchedList.length > 0 ?
+          <RecipeList recipes={this.state.recipes.fetchedList} /> :
+          <ErrorMessage
+            isLoading={this.state.isLoading}
+            message={this.state.recipes.errorMessage}
+          />
+        }
       </div>
     );
   }

src/components/RecipeList.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const RecipeList = ({recipes}) => {
+  return(
+    <ul className="list">
+      {
+        recipes.map(({name, calories, url, image}, idx) => {
+          return (
+            <li key={idx}>
+              <div className="list--title">
+                <img src={image} />
+                <h3><a href={url}>{name}</a></h3>
+              </div>
+              <span>{calories} kcals</span>
+            </li>
+          )
+        })
+      }
+    </ul>
+  );
+};

src/components/SearchBar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const SearchBar = ({inputValue, onClickSearch, updateSearchTerm}) => {
+  return (
+    <form className="search" onSubmit={onClickSearch}>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={updateSearchTerm}
+      />
+    <input type="submit" value="Search"/>
+    </form>
+  );
+};

src/config/index.js

@@ -0,0 +1,2 @@
+export const APP_ID = '9f1497b3';
+export const APP_KEY = 'd489d7c7d4bec18f15a54e7467e0e936';

src/index.js

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