var React = require('react');
var TopRanking = require('kaku-core/modules/TopRanking');
var TracksComponent = require('../shared/tracks');

var TopRankingComponent = React.createClass({
  getInitialState: function() {
    return {
      tracks: []
    };
  },

  componentDidMount: function() {
    TopRanking.on('topRanking-changed', () => {
      TopRanking.get().then((tracks) => {
        this.setState({
          tracks: tracks
        });
      });
    });

    TopRanking.get().then((tracks) => {
      this.setState({
        tracks: tracks
      });
    });
  },

  render: function() {
    let tracks = this.state.tracks;
    let controls = {
      trackModeButton: true,
      playAllButton: true,
      deleteAllButton: false
    };

    /* jshint ignore:start */
    return (
      <TracksComponent
        headerL10nId="topranking_header"
        headerIconClass="fa fa-fw fa-line-chart"
        controls={controls}
        tracks={tracks}
      />
    );
    /* jshint ignore:end */
  }
});

module.exports = TopRankingComponent;

@@ -1,37 +1,51 @@
-var React = require(
+import React, %7B Componet %7D from 
 'react'
-)
 ;%0A
-var
+import
  Top
@@ -52,26 +52,21 @@
 Ranking 
-= require(
+from 
 'kaku-co
@@ -91,14 +91,16 @@
 ing'
-)
 ;%0A
-var
+import
  Tra
@@ -116,18 +116,13 @@
 ent 
-= require(
+from 
 '../
@@ -139,15 +139,16 @@
 cks'
-)
 ;%0A%0A
-var
+class
  Top
@@ -168,103 +168,83 @@
 ent 
-= React.createClass(%7B%0A  getInitialState: function() %7B%0A    return %7B%0A      
+extends Componet %7B%0A  constructor() %7B%0A    super();%0A    this.
 tracks
-:
+ =
  %5B%5D
-%0A    %7D
 ;%0A  %7D
-,
 %0A%0A  
@@ -260,26 +260,16 @@
 DidMount
-: function
 () %7B%0A   
@@ -541,17 +541,16 @@
  %7D);%0A  %7D
-,
 %0A%0A  rend
@@ -555,18 +555,8 @@
 nder
-: function
 () %7B
@@ -963,18 +963,16 @@
 */%0A  %7D%0A%7D
-);
 %0A%0Amodule

rewrite src/views/componets/topranking (#452)