Skip to content

Tahuana's assignment #6

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.

Sign up for GitHub

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

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

Tahuana's assignment #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6bde0d6
React-promise assignment: task 1, including stretch goal
tahuana Feb 27, 2018
0b25393
React-promise assignment: task 2, NOT including stretch goals
tahuana Feb 27, 2018
f781dbb
.
tahuana Feb 27, 2018
80c8b28
refactoring based on TA comments
tahuana Mar 4, 2018
e577d59
implementing: strech goal 3 - reusable function for API request; and …
tahuana Mar 4, 2018
f8638ec
improving error handling
tahuana Mar 5, 2018
5c48f0e
adding a higher order component that conditionally show either an err…
tahuana Mar 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import Recipe from './components/Recipe.js'
import Error from './components/Error.js'
import SearchBar from './components/SearchBar'


const branch = (test, ComponentOnPass, ComponentOnFail) => props => test ? props.errorMessage.map(error => <Error message={error} />) : props.recipeList.map(recipe => <Recipe myRecipe = {recipe} />)

Copy link

@jocelynjeffrey jocelynjeffrey Mar 6, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like you've got the concepts of a HOC down! Nice work 😄 - this is a really complicated concept!

One thing you could do to make this more generic is pass your props directly to your pass and fail components instead of manipulating the props here, similar to this:

const branch = (test, ComponentOnPass, ComponentOnFail) => props => 
test 
? < ComponentOnPass data={props} />
: <ComponentOnFail data={props} />

Then you can use the data however you'd like within the component itself, which means you could pass any components to your branch component and reuse your branch component multiple times.

One other thing to double check is that you're passing your parameters into your HOC in the order you expect them - when you call this on line 67 you're passing 1) your condition, 2) your success component (Recipe) and 3) your fail component (Error). Here, you're rendering your Error component as the success component (which I think is is what you actually want to render, since you're checking for hasError). It could be worth renaming your test boolean something like passCondition or similar so it's clear that the first returned component is the one you want rendered if your condition is true. And if you want your Recipe component to show with the success of your condition, you could change your boolean to !this.state.hasError.

Excellent work with Higher Order Components!

class App extends Component {
constructor(){
super();
Expand All @@ -23,12 +26,10 @@ class App extends Component {
}

handleErrors = (response) => {
//console.log("status: ", response.status)
//console.log("statusText: ", response.statusText)
if (this.state.lastSearch.length == 0) {
if (this.state.lastSearch.length === 0) {
throw {message: "Empty search"};
};
if (this.state.recipeList.length == 0) {
if (this.state.recipeList.length === 0) {
throw {message: "No recipes found"};
};
return response;
Expand Down Expand Up @@ -63,8 +64,7 @@ class App extends Component {
<div className="recipe-list">
<SearchBar updateSearch={this.updateSearch} search={this.fetchRecipes} query={this.state.search}/>
<p>Recipe List for "{this.state.lastSearch}":</p>
{this.state.recipeList.map(recipe => <Recipe myRecipe = {recipe} />)}
{this.state.errorMessage.map(error => <Error message={error} />)}
{branch(this.state.hasError, Recipe, Error)(this.state)}
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Error.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';

const Error = (props) =>
<div>
<p>Ops... we got an error: {props.message}</p>
<p>Ops...: {props.message}</p>
</div>


Expand Down