app.js

import React from "react";
import Header from "./Header";
import Order from "./Order";
import Inventory from "./Inventory";
import Fish from "./Fish";
import samples from "../sample-fishes";
import base from "../base";

class App extends React.Component {
  constructor() {
    //get init state
    super();
    //initial state
    this.state = {
      fishes: {},
      order: {},
    };
    this.addFish = this.addFish.bind(this);
    this.loadSamples = this.loadSamples.bind(this);
    this.add2order = this.add2order.bind(this);
    this.updateFish = this.updateFish.bind(this);
    this.addFish = this.addFish.bind(this);
    this.removeFish = this.removeFish.bind(this);
    this.removeOrder = this.removeOrder.bind(this);




  }

  updateFish(k, f){
    // debugger
    const fishes = {...this.state.fishes}
    fishes[k]=f
    this.setState({fishes})
  }

  removeOrder(k){
    // debugger
    const order = {...this.state.order}
    order[k] = --order[k]
    order[k] < 1 ? delete order[k] : null
    this.setState({order})
  }

  addFish(k, f){
    // debugger
    const fishes = {...this.state.fishes}
    fishes[k]=f
    this.setState({fishes})
  }

  removeFish(k){
    // debugger
    const fishes = {...this.state.fishes}
    const order = {...this.state.order}
    fishes[k] = null
    delete order[k]
    this.setState({fishes, order})
  }

  componentWillMount() {
    this.ref = base.syncState(`${this.props.params.storeId}/fishes`, {
      context: this,
      state: "fishes",
    });

    const localStorageR = localStorage.getItem(`order-${this.props.params.storeId}`);
    //
    console.log(localStorageR)
    if (localStorageR) {
      this.setState({ order: JSON.parse(localStorageR) });
    }
  }

  componentWillUnmount() {
    base.removeBinding(this.ref);
    // ceheck if data in loco storage

  }

  loadSamples() {
    this.setState({ fishes: samples });
  }

  componentWillUpdate(nextProps, nextState) {
    localStorage.setItem(`order-${this.props.params.storeId}`, JSON.stringify(nextState.order));
  }

  add2order(k) {
    const order = { ...this.state.order };
    order[k] = order[k] + 1 || 1;
    this.setState({ order });
  }

  addFish(f) {
    //clone state
    const fishes = { ...this.state.fishes }; //make new one
    //unique id
    const ts = Date.now();
    //change cloned state
    fishes[`f-${ts}`] = f;
    //setting state
    this.setState({ fishes });
  }

  render() {
    return (
      <div className="catch-of-the-day">
        <div className="menu">
          <Header tagline="fresh seafood!" />
          <ul>
            {Object.keys(this.state.fishes).map(k =>
              <Fish key={k} ind={k} add2order={this.add2order} deets={this.state.fishes[k]} />,
            )}
          </ul>
        </div>

        <Order removeOrder={this.removeOrder} fishes={this.state.fishes} orders={this.state.order} params={this.props.prams} />
        <Inventory removeFish={this.removeFish} addFish={this.addFish} loadSamples={this.loadSamples} updateFish={this.updateFish} fishes ={this.state.fishes} />
      </div>
    );
  }
}

export default App;