From c7be7f364fc4d580bd2474a9d2cb773503eee1cc Mon Sep 17 00:00:00 2001
From: AntiBlueQuirk <AntiBlueQuirk@users.noreply.github.com>
Date: Thu, 4 May 2017 20:34:49 -0500
Subject: [PATCH] added: any ingredient can now be collapsed

---
 calc.jsx        |  4 ++--
 ingredients.jsx | 11 +++++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/calc.jsx b/calc.jsx
index 14fb7be..d846bab 100644
--- a/calc.jsx
+++ b/calc.jsx
@@ -101,10 +101,10 @@ var Calc = React.createClass({
     if (this.state.result) {
       var self = this;
       results = this.state.result.recipes.map(function(recipe) {
-        return (<Ingredients key={recipe.name} req={recipe} ingredients="toggle" onRemove={recipe.name == self.state.input.recipe ? null : self.removeRecipe}/>);
+        return (<Ingredients key={recipe.name} req={recipe} ingredients="off" onRemove={recipe.name == self.state.input.recipe ? null : self.removeRecipe}/>);
       });
       subtotals = this.state.result.totals.map(function(total) {
-        return (<Ingredients key={total.name} req={total} onExplain={self.explain}/>);    
+        return (<Ingredients key={total.name} req={total} ingredients="never" onExplain={self.explain}/>);    
       });
     }
     var header = (
diff --git a/ingredients.jsx b/ingredients.jsx
index ab994d3..792e85b 100644
--- a/ingredients.jsx
+++ b/ingredients.jsx
@@ -3,10 +3,9 @@
 var Ingredients = React.createClass({
   getInitialState: function() {
     return {
-      showIngredients: false
+      showIngredients: this.props.ingredients == "on"
     };
   },
-
   toggleShowIngredients: function(event) {
     event.preventDefault();
     this.setState({showIngredients: !this.state.showIngredients});
@@ -32,7 +31,7 @@ var Ingredients = React.createClass({
       inputs = (
         <div className="inputs">
           {this.props.req.ingredients.map(function(ingredient){
-            return <Ingredients key={ingredient.recipe.name} req={ingredient.recipe} ingredients="always"/>;
+            return <Ingredients key={ingredient.recipe.name} req={ingredient.recipe} ingredients="on"/>;
           })}
         </div>
       );
@@ -82,10 +81,10 @@ var Ingredients = React.createClass({
     }
 
     var name;
-    if (this.props.ingredients == "toggle") {
-      name = (<div className="name"><a href onClick={this.toggleShowIngredients}>{this.props.req.name}</a></div>);
-    } else {
+    if (this.props.ingredients == "always" || this.props.ingredients == "never" || !this.props.req.ingredients || !this.props.req.ingredients.length) {
       name = (<div className="name">{this.props.req.name}</div>);
+    } else {
+      name = (<div className="name"><a href onClick={this.toggleShowIngredients}>{this.state.showIngredients ? "-" : "+"} {this.props.req.name}</a></div>);
     }
 
     return (