gbenavid / bag-it-up Goto Github PK

toggleItems(key, marketClicked){ //line 26
    const properties = [];
    this.itemsListedRef.on("value", function(snapshot) {
      var marketObj = snapshot.val();
      var keysInMarketObj = Object.keys(marketObj);
      for(var i in keysInMarketObj){
        for(var j in marketObj[keysInMarketObj[i]]){
          if (marketObj[keysInMarketObj[i]].name ===  marketClicked ){
            properties.push(marketObj[keysInMarketObj[i]][j].itemName);
            // this.setState({listedItems: properties} );
          }
        }
      }
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
    this.setState({listedItems: properties} );
  }

  onClick(key, marketName){
    this.setState({childVisible: !this.state.childVisible});
    this.props.toggleItems();
    // this.setState({itemsToggled: !this.state.itemsToggled});
  }

class ShoppingList extends Component {
  constructor(props){
    super(props);
    this.state = {
      childVisible: false
    }
  }
/* Add conditional for listed items that also belong to the correct store to prevent unwanted items appearing under the wrong merchant */

  onClick(key, marketName){
    this.setState({childVisible: !this.state.childVisible});
    this.props.toggleItems();
  }

  render () {
    const { name, user, handleDelete, appendTo } = this.props;
    return ( 
      <article>
        <h3>{ name }</h3>
        <button onClick={ handleDelete }> Delete </button>
        <button onClick={()=> this.onClick()}> Select </button>
        {
          this.state.childVisible ?
            <ShowItems  user={this.props.user} 
                        appendTo={appendTo}
                        content={this.props.content}
            />
          : <span></span>
        }
      </article>
    );
  }
}

toggleItems(key, marketClicked){
    const properties = [];
    this.itemsListedRef.on("value", function(snapshot) {
      var marketObj = snapshot.val();
      var keysInMarketObj = Object.keys(marketObj);
      for (var i in keysInMarketObj){
        for (var j in marketObj[keysInMarketObj[i]]){
          if (marketObj[keysInMarketObj[i]].name ===  marketClicked){
            // add a conditional or something. 
            properties.push(marketObj[keysInMarketObj[i]][j].itemName);
            // this.setState({listedItems: properties} );
          }          
        }
      }
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
    this.setState({listedItems: properties} );
  }

   render () {
    const { shoppingListsRef, user } = this.props;
    return (
      <section>
          { map(shoppingListsRef, (shoppingList, key) => (
            <ShoppingList key={key} name={shoppingList.name} user={user} {...shoppingList}      
              handleDelete={ () => this.handleDelete(key)}
            />
          )) }
      </section>
    );
  }

      <section>
        {map(shoppingLists, (shoppingList, key) => (        
          <ShoppingList key={key} 
                        appendTo={key} 
                        user={user}
                        content={this.state.listedItems}
                        toggleItems={ () => this.toggleItems(key,shoppingList.name)}
                        handleDelete={ () => this.handleDelete(key)}
                        {...shoppingList}
          />
        ))}
      </section>

  render () {
    const { name, user, handleDelete, appendTo } = this.props;
    return ( 
      <article>
        <h3>{ name }</h3>
        <button onClick={ handleDelete }> Delete </button>
        <button onClick={()=> this.clicked(appendTo, name)}> Select </button>
        {
          this.state.childVisible ?
            <ShowItems  user={this.props.user} 
                        appendTo={appendTo}
                        content={this.props.content}
            />
          : <span></span>
        }
      </article>
    );
  }

  clicked(key, marketName){
    this.setState({childVisible: !this.state.childVisible}); /* We need to only toggle for the specific element with the same id as the item being clicked. */
    this.props.toggleItems(key, marketName);
    // this.setState({itemsToggled: !this.state.itemsToggled});
  }