react

react

// https://maxfarseer.gitbooks.io/react-course-ru/content/zhiznennii_tsikl_komponenta.html
// https://maxfarseer.gitbooks.io/react-course-ru/content/prodvinutoe_ispolzovanie.html
// https://reactjs.org/docs/faq-ajax.html
import React, { Component } from 'react';

import { Link } from "react-router-dom";
import { promisifyAll } from 'bluebird'
//import ReactDOM from 'react-dom';

import { getWeb3Async } from '../util/web3'
import ABIInterfaceArray from '../util/ABI.json'

const SMART_CONTRACT_INSTANCE = '0x9b8c096e9a73d92688a8ab10ba201a06296f950c'
const instancePromisifier = (instance) => promisifyAll(instance, { suffix: 'Async'})
//const constantsFromInterface = ABIInterfaceArray.filter( ABIinterface => ABIinterface.constant )
//const methodsFromInterface = ABIInterfaceArray.filter( ABIinterface => !ABIinterface.constant )

let web3;

const init = async () => {
  web3 = await getWeb3Async()
  window.web3 = web3;
}

init();


class Market extends Component {

  constructor(props) {
    super(props); 
    this.state = {
      web3: null,
      instance: null,
      isWeb3synced: false,
      bunnys: [],
      addressOwner: [],
    }
    this.callInterface = this.callInterface.bind(this);
    this.test = this.test.bind(this);
    this.readmoreClick = this.readmoreClick.bind(this);
    this.getInitialState = this.getInitialState.bind(this);
     
  }


  async callInterface(interfaceName) {
    const { instance } = this.state;
    const response = await instance[`${interfaceName}Async`]();
    console.log(`The result from calling ${interfaceName} is ${response}`);
  }


  readmoreClick(e) {
    this.setState({bunnys: []});
  }

  instantiateContract() {
    console.log(this.state.web3); // hopefully not undefined                           
  }
  

  async test(tt) {
 //   console.log(tt);
    
    if(web3.isConnected()) {
    // alert(this.props.params.page);
    //  var resultMarkets;


   //   let reviews = [];
    //  var resultArray={};
      var html;
      const abi = await web3.eth.contract(ABIInterfaceArray)
      var instance = instancePromisifier(abi.at(SMART_CONTRACT_INSTANCE))
      const contr = abi.at(SMART_CONTRACT_INSTANCE);
       
      contr.getBids(1, (error, result) => {
      if(!error){

      //  console.log(result);
         
          this.setState({
            bunnys: result[0],
            addressOwner: result[1], 
          });
      //    result;
          //it is integers and so on....

           

        }
      else
          console.error( error);
      });


    //  console.log( 'вызов' + html); 
      this.getInitialState(this.resultMarkets);

    } else {
    //   const listItems = resultMarket.map((number) =>
    //   <li key={number.toString()}>
    //     {number}
    //   </li>
    // );
     
 
   //   console.log(this.state.bunny);
  //  console.log('instance', instance); 
      this.setState({ web3: web3, isWeb3synced: true, instance: instance })
    }
  }



  getInitialState() {
  //  console.log(this.state.bunnys); 
 // console.log( this.resultMarkets);   
      // this.state.bunnys.map((todo, number) =>
      //       <li key={number}>
      //         {number}
      //       </li>
      //  )
   // console.log(this.state.bunnys);
  }

  onBtnClickHandler(e) {
    e.preventDefault();
    console.log(e);
     
    
    this.test();
   // console.log(ReactDOM.findDOMNode(this).value);
   // var author = ReactDOM.findDOMNode(this.refs.author).value;
   // var text = ReactDOM.findDOMNode(this.refs.text).value;
  //  alert(author + '\n' + text);
  };

  render() {
   // const { web3, isWeb3synced } = this.state;
   

    return (
      <section id="blog" className="container">
    <div className="text-center">
      <div className="wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
        <h2>
        
           </h2>
      </div>
    </div> 
    
    <div className="blog">
      <div className="row">
        <div className="col-md-8">
          <div className="blog-item">
            <div className="row"> 

              <div className="col-xs-12 col-sm-12 blog-content">

                <a href=""><img className="img-responsive img-blog" src="images/blog/blog1.jpg" width="100%" alt="" /></a>
                <h4>Consequat bibendum quam liquam viverra</h4>
               
 
              {
                this.state.bunnys.map(function(item, i){
             //     console.log(i);

//console.log(item);
           //  console.log(item.BigNumber);
         //    console.log(item.c[0]);
             console.log(web3.utils.toWei(item));

                   
                  <li>Test</li>
                })
              }


              </div>
            </div>
          </div> 
          <ul className="pagination pagination-lg"> 
            <li className="active"><a href="">1</a></li> 

            <li><Link onClick={this.test} to={'/market/3'} className="active">3</Link></li>
            <li><Link onClick={this.test} to={'/market/4'} className="active">4</Link></li>
            <li><Link onClick={this.test} to={'/market/5'} className="active">5</Link></li>
            <li><Link onClick={this.getInitialState} to={'/market/6'}  className="active">6</Link></li>
 
          </ul>
          {/* .pagination */}
        </div>
       
  
        <aside className="col-md-4">
          <div className="widget search">
            <form >
              <input type="text" className="form-control search_box"   onClick = {this.onClick} placeholder="Search Here"/>
            </form>
          </div> 
          <div className="widget categories">
   
          </div> 
          <div className="widget categories">
           
                    <div>
                  <h3>Categories</h3>
                  <div className="row">
                    <div className="col-sm-6">
                      <ul className="blog_category">
                        <li><a href="">Computers <span className="badge">04</span></a></li> 
                        <li><a href="">Computers <span className="badge">04</span></a></li> 
                        <li><a href="">Computers <span className="badge">04</span></a></li> 
                        <li><a href="">Computers <span className="badge">03</span></a></li> 
                      </ul>
                    </div>
                  </div>
                </div>  

          </div>  
        </aside>
      </div> 
    </div>
  </section>
    );
  }
}

export default Market;