Playlist Issue

PlaylistIndex

(function() {
    'use strict';

    var React = require('react/addons');
    var PlaylistList = require('./_PlaylistList');

    require('./AllPlaylists.css');


    var AllPlaylists = module.exports = React.createClass({
        getInitialState : function() {
            return {
                sample_data : {
                    id : 0,
                    playlist_name : '临时歌单1',
                    playlist_cover : '',
                    voice_command : '我的歌单',
                    songs_count: 10
                }
            };
        },
        render : function() {
            var data = this.props.data.playlists;
            console.log('rendering all playlist index');

            return (
                <section className="cAllPlaylists">
                    <header className="listTitle">
                        <h1>歌单列表</h1>
                    </header>
                    <PlaylistList data={data} />
                </section>
            );
        }
    });
})();

PlaylistItem

(function() {
    'use strict';

    var DND = require('react-dnd');
    var React = require('react/addons');
    var Image = require('../common/Image');
    var PropTypes = React.PropTypes;
    var DragSource = DND.DragSource;

    var OnePlaylistItem = module.exports = React.createClass({
        propTypes : {
            data             : PropTypes.object.isRequired,
            showPlaylistCode : PropTypes.func.isRequired
            //connectDragSource : PropTypes.func.isRequired
        },
        render    : function() {
            return (
                <div className="cOnePlaylistItem">
                    <Image className="playlistCover" src={this.props.data.playlist_cover} useLazyLoad={true} onClick={this.props.showPlaylistCode}>
                        <div className="playlistCode i mfi-qr-code" onClick={this.props.showPlaylistCode(this.props.data.id)}></div>
                    </Image>
                    <div className="itemName">
                        <p className="textGrey">{this.props.data.playlist_name}</p>
                        <p className="itemCommand">{this.props.data.voice_command}</p>
                    </div>
                    <p className="itemCount textGrey">共{this.props.data.songs_count}首</p>
                </div>
            );
        }
    });
})();

PlaylistList

(function() {
    'use strict';

    var qwest = require('qwest');
    var React = require('react/addons');
    var Code = require('../common/QRCode');
    var PlaylistItem = require('./_PlaylistItem');

    var playlistInterval = false;


    var AllPlaylists = module.exports = React.createClass({
        getInitialState      : function() {
            return {
                isLoggedIn       : !!_data.user,
                isCodeVisible    : false,
                playlistCodeData : ''
            };
        },
        componentWillUnmount : function() {
            if(playlistInterval) clearTimeout(playlistInterval);
        },
        hideCodeData         : function() {
            this.setState({isCodeVisible : false});
            clearInterval(playlistInterval);
        },
        getPlaylistCodeData : function(playlistId) {
            //Show the overlay - issue with method called while mounted
            if(!this.state.isCodeVisible) {
                this.setState({isCodeVisible: true});
            }

            var apiUrl = CONFIG.API_PREFIX + 'playlists/playlist/qrcode';

            if(this.state.isLoggedIn) {
                apiUrl += '?playlist_id=' + playlistId;
            } else {
                //TODO: get local playlist song ids
                apiUrl += '?song_ids=';
            }

            qwest.get(apiUrl).then(function(result) {
                if(result.status == 200) {
                    this.setState({playlistCodeData: result.data.image_data});
                    playlistInterval = setTimeout(function() {
                        this.getPlaylistCodeData(playlistId);
                    }.bind(this), result.data.valid_duration * 1000);
                }
            }.bind(this));
        },
        render               : function() {
            /* This also somehow enters an infinite loop of rendering */
            var playlists = this.props.data.map(function(playlist) {
                return (
                    <PlaylistItem
                        key={playlist.id}
                        data={playlist}
                        showPlaylistCode={this.getPlaylistCodeData} />
                );
            }.bind(this));

            //an array of data objects
            console.log('rendering playlist list', this.props);
            var codeClassName = 'qrcodeWrapper hOverlay';
            codeClassName += this.state.isCodeVisible ? 'isVisible' : '';

            return (
                <div>
                    <div className="cListItems clearfix">
                        {playlists}
                    </div>
                    <div className={codeClassName} onClick={this.hideCodeData}>
                        <Code data={this.state.playlistCodeData} />
                    </div>
                </div>
            );
        }
    });
})();