Feedback on Recipe Box project

Code Feedback
1

Hi,
I recently finished the Recipe Box project. This is my 3rd version of this project and I really learned a lot about React from doing it. I would probably re-engineer it if starting completely over.

One important thing I finally accepted was to use existing libraries to make your life easier. It’s not cheating! Anyway, I would appreciate your feedback. Thanks!

https://genestd.github.io/recipebox/

1 Like
2

So when someone deletes somthing it gets deleted for everyone? I think i deleted your soup xD Looks cool by the way

3

the recipes are saved in localStorage, so it’s only deleted for you. If localStorage is unavailable i read the default recipes from a file. I think you could also clear cache to restore it.

Thanks for looking!

4

looks cool!
It would be nice if the edit function also allowed you to add ingredients (if it does, it’s not really obvious how). But over all, great job!

I took the liberty of snooping around and looking at your code on github. That looks good too. Very readable and well organized.

One suggestion, though that is more a matter of preference… if you have many input fields in a component, and a lot of functions of the type:

  handleUrlChange = (event) =>{
    this.setState({
      url: event.target.value
    })
  }

you could instead handle all your input with one function, like this:

  handleInput(key,e){
    let nextState = {};
    nextState[key] = e.target.value;
    //for example, if the key is 'url', you get nextState[url] = 'whatever the url is'
    //or more clearly: nextState={'url':'whatever the url is'}
    this.setState(nextState);
   //so this.setState({url:'whatever the url is});
  }

your input field would look like this:

          <input type="text"
                 value={this.state.url}
                 //you use .bind to pass in parameters to your onChange function
                 onChange={this.handleInput.bind(this,'url')}
          />

you may or may not need to bind this before ‘url’. I always have difficulty with working with ‘this’. I usually get that right by trial and error :blush:

5

Great suggestion, that would really make the code more efficient. I have seen that pattern before but dont totally understand it yet. Will try to do this with some logging and figure it out!

Good catch on the ingredients…you cannot currently add ingredients while editing, it will take a bit of refactoring to make that work. Thank you for taking the time to review and comment.

6

I added a few explanations to the code. Hope that helps.

7

In order to make it work, i had to set the onChange property like this to pass the event to the handler:

onChange={(e)=>this.handleInputChange(e)}

then, in the handler I could get the name/value by doing this:
handleInputChange = (event) =>{
let nextState = {};
nextState[event.target.name] = event.target.value;
this.setState(nextState);
}

8

Nice!

Only issues I saw were that the Add mouse-over gets hidden when you are on a populated view.

Also I could not figure out how to add a recipe in Edit mode.

9

Here is the link of my Recipe Box Project. Feedback is appreciated :slight_smile: