Skip to content

Promise homework - Stephanie's solution - #7

Open
stephanie56 wants to merge 11 commits into
bridge-school:masterfrom
stephanie56:stephanie-zeng
Open

Promise homework - Stephanie's solution#7
stephanie56 wants to merge 11 commits into
bridge-school:masterfrom
stephanie56:stephanie-zeng

Conversation

@stephanie56

Copy link
Copy Markdown

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

Comment thread src/App.js
import { RecipeList } from './components/RecipeList';
import { SearchBar } from './components/SearchBar';

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

Copy link
Copy Markdown

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

Comment thread src/App.js
import { APP_ID, APP_KEY } from './config/';

const ErrorMessage = ({message, isLoading}) => {
return (

Copy link
Copy Markdown

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!

Comment thread src/App.js
}

fetchRecipes = (searchTerm) => {
const BASE_ENDPOINT = `https://api.edamam.com/search?q=${searchTerm}&app_id=${APP_ID}&app_key=${APP_KEY}`;

Copy link
Copy Markdown

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.

Comment thread src/App.js
.then(res => res.json())
.then(recipes => {
if(recipes.hits.length > 0) {
const data = recipes.hits.map(({recipe}) => {

Copy link
Copy Markdown

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