tuto3_Pokedex3.jsx

'use strict';

import React from 'react';
import Radium from 'radium';
import getPokemon from '../client/getPokemon';

class Pokedex extends React.Component {
  constructor() {
    super();
    this.state = {id : 0};
    this.arrowRight = this.arrowRight.bind(this);
    this.arrowLeft = this.arrowLeft.bind(this);
  }
  makeRequest(id) {
    return getPokemon(id)
      .then((data) => {
        console.log(data);
        this.setState({
          id
        });
      }
    );
  }
  arrowRight() {
    this.makeRequest(this.state.id + 1);
  }
  arrowLeft() {
    if (this.state.id) {
      this.makeRequest(this.state.id - 1);
    }
  }
  render() {
    return (
      <div style={styles.background}>
        <span>Hello World !</span>
        <button onClick={this.arrowLeft}>Left</button>
        <button onClick={this.arrowRight}>Right</button>
      </div>
    );
  }
};

const styles = {
  background : {
    backgroundImage : 'url(pokedex.png)',
    backgroundRepeat : 'no-repeat',
    height : '600px',
    position : 'relative'
  }
};

export default new Radium(Pokedex);