content: import React from 'react';
  import {Link} from 'react-router';
  import FooterStore from '../stores/FooterStore'
  import FooterActions from '../actions/FooterActions';
  
  class Footer extends React.Component {
    constructor(props) {
      super(props);
      this.state = FooterStore.getState();
      this.onChange = this.onChange.bind(this);
    }
  
    componentDidMount() {
      FooterStore.listen(this.onChange);
      FooterActions.getTopCharacters();
    }
  
    componentWillUnmount() {
      FooterStore.unlisten(this.onChange);
    }
  
    onChange(state) {
      this.setState(state);
    }
  
    render() {
      let leaderboardCharacters = this.state.characters.map(function(character) {
        return (
          <li key={character.doubanId}>
            <img src={character.post.small} />
          </li>
        );
      });
  
      return (
        <footer className=".navbar-fixed-bottom">
          <div className='container '>
            <div className='row'>
              <div className='col-sm-5'>
                <h3 className='lead'><strong>Information</strong> and <strong>Copyright</strong></h3>
                <p>Powered by <strong>Node.js</strong>, <strong>MongoDB</strong> and <strong>React</strong> with Flux architecture and server-side rendering.</p>
                <p>You may view the <a href='#'>Source Code</a> behind this project on GitHub.</p>
                <p>© 2016 daiyingheng.</p>
              </div>
              <div className='col-sm-7 hidden-xs'>
                <h3 className='lead'><strong></strong> Top 5 Animes</h3>
                <ul className='list-inline'>
                  {leaderboardCharacters}
                </ul>
              </div>
            </div>
          </div>
        </footer>
      );
    }
  }
  
  export default Footer;