main.js

import React, { Component } from 'react'
import Nav from './nav'
import Jumbotron from './jumbotron'
import Recommended from './recommended'
import rakutenHelper from '../utils/rakutenHelper'
import xmlJsonify from 'xml-jsonify'
import Card from './card'
import helpers from '../utils/helpers'

class Main extends Component {
  constructor(props) {
      super(props)
      this.state = {value: '', token: '', lessons: [], price: ''}

      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
      this.showData = this.showData.bind(this)
    }

    componentDidMount() {
        let self = this
        rakutenHelper.getToken().then(function(response){
          var token = 'Bearer ' + response.data.access_token
          self.setState({token: token}) 
        });
    }
    
    showData(event) {
      let self = this
      event.preventDefault()
      rakutenHelper.getProducts(this.state.token, this.state.value).then(function(response) {
        const xml = response.data
        xmlJsonify(xml, (err, data) => {
           self.setState({lessons: data.item[0]})
        });
      })
    }
    handleSubmit(event) {
      event.preventDefault()
      console.log(event.target.price)
      helpers.saveData(this.state).then(response => {
        console.log(response)
      })
    }

    handleChange(event) {
      this.setState({ value: event.target.value})
    }

    render() {
      const lesson = this.state.lessons
     
      return (
        <div>
        <Nav />
          <div className="container">
              <div className="row">
                  <div className="col-md-8 col-md-offset-2">
                      <div className="panel panel-default">
                          <div className="panel-heading">Dashboard</div>
                          <div className="panel-body">
                            <form onSubmit={this.handleSubmit}>
                              <div className="input-group">
                                <input type="text" name="link" value={this.state.value} className="form-control" onChange={this.handleChange} />
                                <span className="input-group-btn">
                                  <button className="btn btn-default" type="button" onClick={this.showData}>Go!</button>
                                </span>
                              </div>
                              <Card lesson={this.state.lessons} />
                              <div className="input-group pull-right"> 
                                <input type="submit" value="Submit" className="btn btn-default"/>
                              </div>
                            </form>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      )
    }
}

export default Main