First attempt at exercise 4

.gitignore

@@ -0,0 +1 @@
+copy contracts.bat

contracts/Customers.sol

@@ -1,21 +1,93 @@
 pragma solidity ^0.5.0;
+pragma experimental ABIEncoderV2;
 
 contract Customers {
 
+
+    /*** EVENTS ***/
+    /// The event emitted (useable by web3) when a token is purchased
+    event BoughtToken(address indexed buyer, uint256 tokenId);
+
+
     address[16] public customers;
 
+    /// Price set by contract owner for each token in Wei.
+    uint256 tokenPrice = 3000000000000000;
+
+
+    /// The Name of the Pet
+    mapping(uint256 => string) tokenPetName;
+
+    mapping(uint256 => uint) tokenPetAge;
+
+    mapping(uint256 => string) tokenPetBreed;
+
+    mapping(uint256 => string) tokenPetLocation;
+
+
+
     // Claiming a coupon
-    function claim(uint couponId) public returns (uint) {
-        require(couponId >= 0 && couponId <= 15);
+    function claim(
+        uint couponId, 
+        string memory tokenPetName_,
+        uint tokenPetAge_,
+        string memory tokenPetBreed_,
+        string memory tokenPetLocation_   
+
+    ) public payable returns (uint) {
+        require(couponId >= 0 && couponId <= 15, "");
+
+        //Buy adjusting the function to payable then you can require a certain amount of ETH must be spent
+        //require(msg.value >= tokenPrice, "Amount of Ether sent too small");
+
 
         customers[couponId] = msg.sender;
+        tokenPetName[couponId] = tokenPetName_;
+        tokenPetAge[couponId] = tokenPetAge_;
+        tokenPetBreed[couponId] = tokenPetBreed_;
+        tokenPetLocation[couponId] = tokenPetLocation_;
 
         return couponId;
     }
 
+
+
+
+
+
+
     // Retrieving the adopters
     function getCustomers() public view returns (address[16] memory) {
         return customers;
     }
 
+
+    // @notice Returns all the relevant information about a specific token
+    // @param _couponId The ID of the token of interest
+    function getToken(uint256 _couponId)
+        external
+        view
+        returns (		
+        uint tokenID_,
+        string memory tokenPetName_,
+        uint tokenPetAge_,
+        string memory tokenPetBreed_,
+        string memory tokenPetLocation_
+
+    ) {
+        // TODO: Add Token Score to the details returned
+        tokenID_ = _couponId;
+        tokenPetName_ = tokenPetName[_couponId];
+        tokenPetAge_ = tokenPetAge[_couponId];
+        tokenPetBreed_ = tokenPetBreed[_couponId];
+        tokenPetLocation_ = tokenPetLocation[_couponId];
+
+    }
+
+
+
+    function getOwner(uint tokenId) public view returns(address){
+        return customers[tokenId];
+    } 
+
 }

front/src/App.js

@@ -19,6 +19,11 @@ class App extends Component {
       account:null,
       web3:null,
       contract:null,
+      owners:null,
+      btext:'Claim',
+      tokenList:[
+        // {id:0, title:'Token Name', type: 2}
+      ]
     }
   }
 
@@ -28,52 +33,185 @@ class App extends Component {
     const accounts = await web3.eth.getAccounts()
 
     //Instantiate the smart contract
-    const contractInstance = new web3.eth.Contract(Customers.abi, '0x36d32F8a3582De966671dC61dc729E47364F61b4')
+    const contractInstance = new web3.eth.Contract(Customers.abi, '0x7E800d551028bf152f3514F9a52Fff6974f87096')
 
-    console.log(accounts, contractInstance)
+    console.log("d", contractInstance.methods.getToken(0));
 
-    this.setState({account:accounts[0],contract:contractInstance})
+    const getOwners = await contractInstance.methods.getCustomers().call();  
+
+    const tokenId = 0
+    //Get Owners
+    const ownerAddress = await contractInstance.methods.getOwner(tokenId).call();
+    console.log("e", getOwners, ownerAddress)
+
+
+    console.log("a", accounts, contractInstance)
+
+    this.setState({account:accounts[0],contract:contractInstance,getOwners})
+
+    this.getTokens(web3)
+
+
+  }
+
+
+  getItemInfo(id){
+
+    const {tokenList} = this.state;
+
+    var status = "Not Owned";
+    var token = tokenList.find(element => element.id == id);
+
+
+    if(token != null)
+    {
+
+      status = "Owned";
+
+    }
+
+    return status;
 
   }
 
-  handleAdopt = (data)=>{
+  handleAdopt = (thisbutton, data)=>{
     // e.preventDefault()
-    console.log(data)
-    const {contract, account} = this.state
+    console.log("b", data)
+    const {contract, account, web3} = this.state
 
-    contract.methods.claim(data.id).send({ from: account, gas: 1000000 })
+    contract.methods.claim(data.id,  data.name, data.age, data.breed, data.location).send({ from: account, gas: 1000000 })
       .then((result) => {
 
-        console.log(result)
+        console.log("c", result);
+
+        this.setState({ btext : "Claimed"  }) 
+
+        this.getTokens(web3)
 
       })
 
   }
 
+
+
+
+  getTokens = async (web3) => {
+
+
+    let token_array = []
+
+    const {contract, account} = this.state
+
+
+
+
+    contract.methods.getCustomers().call().then((result) => {
+
+      console.log("f", result)
+
+      for(var i=0;i<result.length;i++){
+
+        if(result[i] != 0){
+          var theaddress = result[i];
+          var theid = i;
+     //     alert(theid);
+          contract.methods.getToken(i).call()
+          .then((result2)=>{
+           //  console.log(result)
+            token_array.push(
+              {             
+                tokenAddress: theaddress, 
+                id:result2.tokenID_, 
+                tokenPetName: result2.tokenPetName_, 
+                tokenPetAge: result2.tokenPetAge_,
+                tokenPetBreed: result2.tokenPetBreed_,
+                tokenPetLocation: result2. tokenPetLocation_
+              })
+         //    console.log(token_array)
+              console.log("g", result[i]);
+
+            this.setState({ tokenList:token_array })
+          }) 
+
+
+        }
+
+
+      }
+
+    })
+
+
+
+  }
+
+
+
+
+
   render() {
 
+    const {tokenList} = this.state
+
+    const tokenTable =  tokenList.map(function (item) {
+     // console.log(item)
+      // map the new array to list items
+      return <tr><td>{item.id}</td><td>{item.tokenAddress}</td><td>{item.tokenPetName}</td><td>{item.tokenPetAge}</td><td>{item.tokenPetBreed}</td><td>{item.tokenPetLocation}</td></tr>
+    })
+
+
     const tableItems = data.map((value, key) =>
-      <tr key={value.id}>
+      <tr>
+        <td>{value.id}</td>
         <td>{value.name}</td>
         <td>{value.age}</td>
+        <td>{value.breed}</td>
         <td>{value.location}</td>
         <td><img height="100" src={value.picture}/></td>
-        <td><button onClick={()=>this.handleAdopt(value)}>Claim</button></td>
+        <td><button onClick={()=>this.handleAdopt(this, value)}> Claim</button></td>
+        <td> {this.getItemInfo(value.id)}</td>
       </tr>
     );
 
     return (
       <div className="App">
-        <table>
+
+      <h1>Pets</h1>
+        <table border="1">
           <thead>
+            <th>ID</th>
             <th>Name</th>
             <th>Age</th>
+            <th>Breed</th>
             <th>Location</th>
             <th>Photo</th>
             <th>Action</th>
+            <th>Status</th>
           </thead>
           {tableItems}
         </table>
+
+        <br/><br/>
+
+        <h1>Coupons</h1>
+
+        <table border="1">
+          <thead>
+            <th>ID</th>
+            <th>Address</th>
+            <th>Name</th>
+            <th>Age</th>
+            <th>Breed</th>
+            <th>Location</th>
+            {/* <th>Status</th> */}
+          </thead>
+          {tokenTable}
+        </table>
+
+
+
+
+
       </div>
     );
   }