Added removeFish method and removeOrder method

src/components/App.js

@@ -2,9 +2,7 @@ import React from 'react';
 import Header from './Header';
 import Order from './Order';
 import Inventory from './Inventory';
-//we must import sampleFishes
 import sampleFishes from  '../sample-fishes';
-//import Fish component
 import Fish from './Fish';
 import base from '../base';
 
@@ -16,6 +14,8 @@ class App extends React.Component {
         this.loadSamples = this.loadSamples.bind(this);
         this.addToOrder = this.addToOrder.bind(this);
         this.updateFish = this.updateFish.bind(this);
+        this.removeFish = this.removeFish.bind(this);
+        this.removeFromOrder = this.removeFromOrder.bind(this);
 
         this.state = {
             fishes: {},
@@ -24,18 +24,14 @@ class App extends React.Component {
     }
 
     componentWillMount() {
-        //this runs right before <App> is rendered
       this.ref = base.syncState(`${this.props.match.params.storeId}/fishes`, {
           context: this,
           state: 'fishes'
       });
 
-      //check if there is any refernce in localStorage
       const localStorageRef = localStorage.getItem(`order-${this.props.match.params.storeId}`);
 
       if(localStorageRef) {
-         // update our App component's order state
-            //however we must convert string back to object with JSON.parse
          this.setState({
              order: JSON.parse(localStorageRef)
          });
@@ -53,37 +49,43 @@ class App extends React.Component {
 
 
     addFish(fish) {
-        //update state
         const fishes = {...this.state.fishes};
-
-        //add in new fish
         const timestamp = Date.now();
-        // we are taking fish object from AddFishForm component and passing to this method.
         fishes[`fish-${timestamp}`] = fish;
-
-        //set state - we tell react that we have updated a particular piece of state
         this.setState({ fishes })
     }
 
-    //this method allows us to pass updatedFish from Inventory.js to App.js
     updateFish (key, updatedFish) {
         const fishes = {...this.state.fishes};
         fishes[key] = updatedFish;
         this.setState({ fishes });
     }
 
+    //delete item
+    removeFish(key) {
+        const fishes = {...this.state.fishes};
+        //to delete with firebase we must set fish to null
+        fishes[key] = null;
+        this.setState({ fishes });
+    }
+
     loadSamples() {
         this.setState({
             fishes: sampleFishes
         });
     }
 
     addToOrder(key) {
-        //take a copy of state
         const order = {...this.state.order};
-        //update order or add the new number of fish ordered
         order[key] = order[key] + 1 || 1;
-        //update state
+        this.setState({ order });
+    }
+
+    //delete from order
+    removeFromOrder(key) {
+        const order = {...this.state.order};
+        //since oder is stored in local storage we can use delete order[key] rather than setting to null (as in removeFish()).
+        delete order[key];
         this.setState({ order });
     }
 
@@ -104,9 +106,11 @@ class App extends React.Component {
                     fishes={this.state.fishes}
                     order={this.state.order}
                     params={this.props.match.params}
+                    removeFromOrder={this.removeFromOrder}
                 />
             <Inventory
                 addFish={this.addFish}
+                removeFish={this.removeFish}
                 loadSamples={this.loadSamples}
                 fishes={this.state.fishes}
                 updateFish={this.updateFish}

src/components/Inventory.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import AddFishForm from './AddFishForm';
 
-
-//now we must add our inventory management system.
-    //first we loop over all of the fishes we have with {Object.keys(this.props.fishes).map(this.renderInventory))}
-        //NOTE that we first passed down the fishes to our inventory state in App.js.
 class Inventory extends React.Component {
     constructor () {
         super();
@@ -14,24 +10,16 @@ class Inventory extends React.Component {
 
     handleChange(e, key) {
         const fish = this.props.fishes[key];
-        //take a copy of that fish and update it with new data
         const updatedFish = {
-            ...fish, // copy fish with spread operator
-
-            //now overlay our new properties on top of it.
-                //e.target gives us the element itself, and 'name' is the property. e.target.value is the new properties that will be overlayed.
-                //we use a 'computed property' where the property we are changings is e.target.name, and it will be replaced with whatever has changed - i.e. value e.target.value.
+            ...fish,
             [e.target.name]: e.target.value
-            ////now we must take updatedFish and pass it to App.js
         }
-        //now we pass the updated fish object back.
         this.props.updateFish(key, updatedFish);
     }
 
 
     renderInventory(key) {
         const fish = this.props.fishes[key];
-        //listen for change on each input. When input is changed we need to update corresonding state.
         return (
             <div className='fish-edit' key={key}>
                 <input type='text' name='name' value={fish.name} placeholder='Fish Name' onChange={(e) => this.handleChange(e, key)}/>
@@ -42,6 +30,7 @@ class Inventory extends React.Component {
                 </select>
                 <textarea type='text' name='desc' value={fish.desc} placeholder='Fish Desc' onChange={(e) => this.handleChange(e, key)}></textarea>
                 <input type='text' name='image' value={fish.image} placeholder='Fish Image' onChange={(e) => this.handleChange(e, key)}/>
+                <button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
             </div>
         )
     }

src/components/Order.js

@@ -9,14 +9,16 @@ class Order extends React.Component {
     renderOrder(key) {
         const fish = this.props.fishes[key];
         const count = this.props.order[key];
+        //now we create the button. NOTE you can store jsx in a variable.
+        const removeButton = <button onClick={() => this.props.removeFromOrder(key)}>&times;</button>
 
         if(!fish || fish.status === 'unavailable') {
-            return <li key={key}> Sorry, {fish ? fish.name : 'fish'} is no longer available! </li>
+            return <li key={key}> Sorry, {fish ? fish.name : 'fish'} is no longer available! {removeButton}</li>
         }
 
         return (
             <li key={key}>
-                <span>{count}lbs {fish.name}</span>
+                <span>{count}lbs {fish.name} {removeButton}</span>
                 <span className='price'>{formatPrice(count * fish.price)}</span>
             </li>
         )
@@ -51,3 +53,5 @@ class Order extends React.Component {
 }
 
 export default Order;
+
+//{orderIds.map((key) => { return this.renderOrder(key) })}