Kristen lutz

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "git": "^0.1.5",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.1.1"
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,20 +1,75 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import {RecipeCard} from './features/recipe-card.js';
+import {Header} from './components/header.js';
+import {Input} from './components/input.js';
+import {Button} from './components/button.js';
 import './App.css';
 
+const APP_ID = 'd1b52cd4'; // your app id here, provided to you when you sign up
+const APP_KEY = '04041818465822777105a1e7de33699c'; // your app key here, provided to you when you sign up
+
+// this would be what I would make for the final URL
+const BASE_ENDPOINT = `https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_KEY}`;
+// an example API request with a cake query would be
+// `${BASE_ENDPOINT}&q=cake`
+// use this to fetch data
+
+
+
+
 class App extends Component {
-  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>
+
+  constructor() {
+    super();
+    this.state = {
+      searchTerm: 'cake',
+      recipeList: [],
+      error:false,
+      errorMessage:"",
+      recipeHeader:"",
+    };
+  }
+  fetchRecipes=()=> {
+    return fetch(`${BASE_ENDPOINT}&q=${this.state.searchTerm}`)
+    .then(response => response.json())
+    .then(
+      response => 
+        response.hits.length > 0
+          ? this.setState({ recipeList: [...response.hits], recipeHeader: this.state.searchTerm })
+          : this.setState({ error: true })
+    )
+    .catch(error => 
+      this.setState({ error: true, errorMessage: error.message})
     );
+  };
+  componentDidMount() {
+    this.fetchRecipes();
+  }
+
+  saveSearchTerm = (event) => this.setState({ searchTerm: event.target.value});
+
+  render() {
+    if(!this.state.error){
+      return (
+        <div>
+          <Header>Search some Edamam recipes in this hood</Header>
+          <Input
+            onInputChange={this.saveSearchTerm}/>
+          <Button
+            onClick={this.fetchRecipes}>Search</Button>
+          <RecipeCard
+            searchTerm = {this.state.recipeHeader}
+            recipes = {this.state.recipeList}/>
+        </div>
+      );
+    }else{
+      return (
+        <div>Error message: {this.state.errorMessage}</div>
+      )
+      //render error display 
+    }
+
+
   }
 }
 

src/components/button.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Button = ({children, onClick}) => {
+    return <button onClick = {onClick}>{children}</button>;
+};

src/components/header.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Header = ({children}) => {
+    return <h1>{children}</h1>;
+};
+//default indicates you can name it whatever you want on import
+//export default Button;
+//export const Button = ButtonComponent rename it (last line and can't be renamed)

src/components/input.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Input = ({onInputChange, inputValue}) => {
+    return <input onChange = {onInputChange} value={inputValue}/>;
+};

src/features/recipe-card.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { Recipe } from './recipe';
+
+const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+
+export const RecipeCard = ({ searchTerm, recipes }) => {
+  return (
+
+    <table>
+      <tr>
+        <th align='left'>{capitalizeFirstLetter(searchTerm)} Recipe Names</th>
+        <th>Calories</th>
+      </tr>
+      {recipes.map(recipe => <Recipe 
+        label = {recipe.recipe.label}
+        calories = {recipe.recipe.calories} />)}
+    </table>
+  );
+}; 

src/features/recipe.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Recipe = ({ label, calories }) => {
+  return (
+    <tr>
+        <td><i> {label}</i></td>
+        <td> {parseFloat(calories).toFixed(2)}</td>
+    </tr>
+  );
+};