Generalized code

app/js/components/addToken.js

@@ -70,6 +70,8 @@ class AddToken extends Component {
           price: ''
         });
 
+        this.props.loadShipsForSale();
+
         // TODO: show success
       })
       .catch((err) => {

app/js/components/ship.js

@@ -40,8 +40,13 @@ class Ship extends Component {
             })
             .then(receipt => {
                 console.log(receipt);
+
+                this.props.onBuy();
+
                 // TODO: show success
                 // TODO: hide ship
+
+                return true;
             })
             .catch((err) => {
                 console.error(err);

app/js/components/shipList.js

@@ -0,0 +1,20 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import web3 from "Embark/web3"
+import React, { Component, Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
+import Ship from './ship';
+
+class ShipList extends Component {
+
+  render = () => {
+    const { list, title, id, wallet, onBuy } = this.props;
+    return <div id={id}>
+      <h3>{title}</h3>
+      { list.map((ship, i) => <Ship onBuy={onBuy} wallet={wallet} key={i} {...ship} />) }
+     </div>;
+  }
+}
+
+
+export default ShipList;

app/js/components/shipyard.js

@@ -1,55 +0,0 @@
-import EmbarkJS from 'Embark/EmbarkJS';
-import web3 from "Embark/web3"
-import React, { Component, Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
-import Ship from './ship';
-
-class Shipyard extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      shipList: []
-    }
-  }
-
-  componentDidMount(){
-    EmbarkJS.onReady((err) => {
-      this._loadShipsForSale();
-    });
-  }
-
-  _loadShipsForSale = async () => {
-    const { shipsForSaleN, shipsForSale, spaceshipPrices, spaceships } = SpaceshipToken.methods;
-
-    const total = await shipsForSaleN().call();
-    const list = [];
-    if(total){
-      for (let i = total-1; i >= 0; i--) {
-        const shipForSale = await shipsForSale(i).call();
-        const _info = await spaceships(shipForSale).call();
-        const _price = await spaceshipPrices(shipForSale).call();
-
-        const ship = {
-          price: _price,
-          id: shipForSale,
-          ..._info
-        };
-        list.push(ship);
-      }
-    }
-    this.setState({shipList: list.reverse()});
-  }
-
-  render = () => {
-    const { shipList } = this.state;
-    return <div id="shipyard">
-      <h3>Tienda</h3>
-      { shipList.map((ship, i) => <Ship  wallet={false} key={i} {...ship} />) }
-     </div>;
-  }
-}
-
-
-export default Shipyard;

app/js/index.js

@@ -2,7 +2,7 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import React, { Fragment, Component } from 'react';
 import ReactDOM from 'react-dom';
 import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
-import Shipyard from './components/shipyard.js';
+import ShipList from './components/shipList.js';
 import WithdrawBalance from './components/withdrawBalance.js';
 import AddToken from './components/addToken.js';
 import MyShips from './components/myShips.js';
@@ -13,16 +13,24 @@ class App extends Component {
         super(props);
         this.state = {
             isOwner: false,
-            hidePanel: false
+            hidePanel: false,
+            shipsForSale: [],
+            myShips: []
         }
     }
 
     componentDidMount(){
         EmbarkJS.onReady((err) => {
             this._isOwner();
+            this._loadEverything();
         });
     }
 
+    _loadEverything(){
+        this._loadShipsForSale();
+        this._loadMyShips();
+    }
+
     _isOwner(){
         SpaceshipToken.methods.owner()
             .call()
@@ -32,8 +40,50 @@ class App extends Component {
             });
     }
 
+    _loadShipsForSale = async () => {
+        const { shipsForSaleN, shipsForSale, spaceshipPrices, spaceships } = SpaceshipToken.methods;
+    
+        const total = await shipsForSaleN().call();
+        const list = [];
+        if(total){
+          for (let i = total-1; i >= 0; i--) {
+            const shipId = await shipsForSale(i).call();
+            const _info = await spaceships(shipId).call();
+            const _price = await spaceshipPrices(shipId).call();
+    
+            const ship = {
+              price: _price,
+              id: shipId,
+              ..._info
+            };
+            list.push(ship);
+          }
+        }
+        this.setState({shipsForSale: list.reverse()});
+    }
+
+    _loadMyShips = async () => {
+        const { balanceOf, tokenOfOwnerByIndex, spaceships } = SpaceshipToken.methods;
+    
+        const total = await balanceOf(web3.eth.defaultAccount).call();
+        const list = [];
+        if(total){
+          for (let i = total-1; i >= 0; i--) {
+            const myShipId = await tokenOfOwnerByIndex(web3.eth.defaultAccount, i).call();
+            const _info = await spaceships(myShipId).call();
+    
+            const ship = {
+              id: myShipId,
+              ..._info
+            };
+            list.push(ship);
+          }
+        }
+        this.setState({myShips: list.reverse()});
+      }
+
     render(){
-        const { isOwner, hidePanel } = this.state;
+        const { isOwner, hidePanel, shipsForSale, myShips } = this.state;
 
         return (
         <Fragment>
@@ -41,11 +91,11 @@ class App extends Component {
                 <div id="management">
                     <span className="close" onClick={ (e) => this.setState({'hidePanel': true})}>cerrar</span>
                     <WithdrawBalance />
-                    <AddToken />
+                    <AddToken loadShipsForSale={this._loadShipsForSale} />
                 </div> : '' 
             }
-            <MyShips />
-            <Shipyard />
+            <ShipList title="Mis Naves" id="myShips" list={myShips} wallet={true}  />
+            <ShipList title="Tienda" id="shipyard" list={shipsForSale} onBuy={(e) => this._loadEverything()} />
         </Fragment>);
     }
 }