-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Promise homework - Stephanie's solution #7
base: master
Are you sure you want to change the base?
Conversation
- add api keys to config file - try to fetch data from edamam
- Update search behaviour: empty search term after successful fetch - Add search bar styles
import { RecipeList } from './components/RecipeList'; | ||
import { SearchBar } from './components/SearchBar'; | ||
|
||
import { APP_ID, APP_KEY } from './config/'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice job, moving keys into a new file
import { APP_ID, APP_KEY } from './config/'; | ||
|
||
const ErrorMessage = ({message, isLoading}) => { | ||
return ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like to write my functions without return
s if I can get away with it, like here!
} | ||
|
||
fetchRecipes = (searchTerm) => { | ||
const BASE_ENDPOINT = `https://api.edamam.com/search?q=${searchTerm}&app_id=${APP_ID}&app_key=${APP_KEY}`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would even consider moving the BASE_ENDPOINT into it's own file.
.then(res => res.json()) | ||
.then(recipes => { | ||
if(recipes.hits.length > 0) { | ||
const data = recipes.hits.map(({recipe}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice use of map!
Remember that passing in your adaption function is good for code reuse. Also, you don't need Object.assign here, but I like that you're making sure your being immutible.
You could do:
return {
name: recipe.label,
calories: Math.floor(recipe.calories),
image: recipe.image,
url: recipe.url
}
which returns a new object (without mutations)
app: https://stephanie56.github.io/react-promise-homework/