Recipes fecthing and searching

src/App.js

@@ -1,20 +1,46 @@
 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 {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      recipes: [],
+      error: '',
+      searchTerm: ''
+    }
+  }
+
+  defaultSearch = 'cake'
+
+  componentDidMount = () => {
+    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())
+      .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 (
-      <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>
+        <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>
-    );
+    )
   }
 }
 

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} />
+            )
+        }
+    }
+}

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>
+        )
+    }
+}

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>
+        )
+    }
+}

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} />
+        )
+    }
+}

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>
+        )
+    }
+}

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>
+        )
+    }
+}

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 }

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: