Created
July 4, 2019 11:52
-
-
Save perborgen/565c435986dbe96304ba59169bcbc24f to your computer and use it in GitHub Desktop.
Full code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from "react"; | |
import ReactDOM from "react-dom"; | |
import "./styles.css"; | |
const getData = async (search) => { | |
const proxyurl = "https://cors-anywhere.herokuapp.com/"; | |
const url = `http://www.recipepuppy.com/api/?q=${search}`; | |
const response = await fetch(proxyurl + url).catch(() => | |
console.log("Can’t access " + url + " response. Blocked by browser?") | |
); | |
const json = await response.json(); | |
return json.results; | |
}; | |
// If you're following this tutorial in an HTML file, | |
// copy from the line below... | |
const useRecipePuppyApi = () => { | |
const [recipes, setRecipes] = useState([]); | |
const [search, setSearch] = useState(""); | |
useEffect(() => { | |
const fetchRecipes = async () => { | |
const results = await getData(search); | |
setRecipes(results); | |
}; | |
fetchRecipes(); | |
}, [search]); | |
const doFetch = query => { | |
setSearch(query); | |
}; | |
return { recipes, doFetch }; | |
}; | |
function App() { | |
const [ingredients, setIngredients] = useState(""); | |
const { recipes, doFetch } = useRecipePuppyApi(); | |
return ( | |
<div className="App"> | |
<div className="Header"> | |
<h1 className="lead">Amazing Recipes</h1> | |
<form | |
onSubmit={e => { | |
doFetch(ingredients); | |
e.preventDefault(); | |
}} | |
> | |
<input | |
placeholder="Your favourite food" | |
onChange={e => setIngredients(e.target.value)} | |
value={ingredients} | |
/> | |
<button type="submit"> | |
<span>Find something tasty</span> | |
<span role="img" aria-label="avocado"> | |
🥑 | |
</span> | |
</button> | |
</form> | |
</div> | |
<ul> | |
{recipes.map(recipe => ( | |
<li key={recipe.title}> | |
{recipe.thumbnail ? ( | |
<img alt={recipe.title} src={recipe.thumbnail} /> | |
) : ( | |
<img alt="default-meal" src="http://i65.tinypic.com/maateu.png" /> | |
)} | |
<a href={recipe.href} target="_blank" rel="noopener noreferrer"> | |
<span>{recipe.title}</span> | |
</a> | |
</li> | |
))} | |
</ul> | |
</div> | |
); | |
} | |
//...until the line above | |
const rootElement = document.getElementById("root"); | |
ReactDOM.render(<App />, rootElement); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment