Skip to content
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

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

stephanie56
Copy link

app: https://stephanie56.github.io/react-promise-homework/

  • Make api request to the edamam api for cakes and display a list of cake
  • Handle errors
  • Make the API request happen in a reusable function
  • Implement a search bar
  • Create a higher order component that can conditionally show either an error or a list
  • Write test for any components

import { RecipeList } from './components/RecipeList';
import { SearchBar } from './components/SearchBar';

import { APP_ID, APP_KEY } from './config/';

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 (

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 returns 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}`;

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}) => {

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants