<commit_before>import React, {Component} from "react";

import ServiceClient from "../service/ServiceClient";
import TimeUtil from "../util/TimeUtil";

export default class TrackTableView extends Component {
    static defaultProps = {
        playlistId: null
    }

    static propTypes = {
        playlistId: React.PropTypes.number
    }

    state = {
        selectedTrack: null,
        data: []
    }

    constructor(props) {
        super(props);
        this._initData();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.playlistId !== nextProps.playlistId) {
            if (nextProps.playlistId && nextProps.playlistId !== "") {
                ServiceClient.getInstance().getPlayListDetail(nextProps.playlistId).then((result) => {
                    if (result && result.tracks && result.tracks !== this.state.data) {
                        this.setState({data: result.tracks});
                        this._offerTrackInfo(result, true);
                    }
                });
            }
        }
    }

    render() {
        const headerData = {
            id: "header",
            content: {
                name: "歌曲标题",
                time: "时长",
                artists: "歌手",
                album: "专辑"
            }
        };
        const $header = this.createItem(headerData);
        const $trs = this.state.data.map(track => {
            const data = {
                id: track.id,
                content: {
                    name: track.name,
                    timer: TimeUtil.formateTime(track.lmusic ? track.lMusic.playTime : track.duration),
                    artists: track.artists.map(artist => artist.name).join(","),
                    album: track.album.name
                }
            };
            return this.createItem(data, track);
        });
        return (
            <table className={ this.props.className }>
                <thead>{$header}</thead>
                <tbody>{$trs}</tbody>
            </table>
        );
    }

    createItem(data, track) {
        const $tds = [];
        for (const key in data.content) {
            $tds.push((<td key={ key + data.id }>{data.content[key]}</td>))
        }
        return (
            <tr key={ data.id}
                ref={ data.id }
                className={ this.state.selectedID === data.id ? "selected" : "" }
                onClick={ () => {
                    this._selectedItem(data.id);
                    this.props.handleSelectionChange(track);
                    this._offerTrackInfo(track, false);
                }}
            >
                {$tds}
            </tr>
        );
    }

    async _initData() {
        if (this.props.playlistId) {
            const data = await ServiceClient.getInstance().getPlayListDetail(this.props.playlistId);
            this.setState({data: data});
        }
    }

    _selectedItem(id) {
        if (id !== this.state.selectedID && id !== "header") {
            const $oldTarget = $(this.refs[this.state.selectedID]);
            const $curTarget = $(this.refs[id]);

            this.setState({"selectedID": id});
<commit_msg>Cancel the association between trackTable and TrackInfo.<commit_after>import React, {Component} from "react";

import ServiceClient from "../service/ServiceClient";
import TimeUtil from "../util/TimeUtil";

export default class TrackTableView extends Component {
    static defaultProps = {
        playlistId: null
    }

    static propTypes = {
        playlistId: React.PropTypes.number
    }

    state = {
        selectedTrack: null,
        data: []
    }

    constructor(props) {
        super(props);
        this._initData();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.playlistId !== nextProps.playlistId) {
            if (nextProps.playlistId && nextProps.playlistId !== "") {
                ServiceClient.getInstance().getPlayListDetail(nextProps.playlistId).then((result) => {
                    if (result && result.tracks && result.tracks !== this.state.data) {
                        this.setState({data: result.tracks});
                        this._offerTrackInfo(result, true);
                    }
                });
            }
        }
    }

    render() {
        const headerData = {
            id: "header",
            content: {
                name: "歌曲标题",
                time: "时长",
                artists: "歌手",
                album: "专辑"
            }
        };
        const $header = this.createItem(headerData);
        const $trs = this.state.data.map(track => {
            const data = {
                id: track.id,
                content: {
                    name: track.name,
                    timer: TimeUtil.formateTime(track.lmusic ? track.lMusic.playTime : track.duration),
                    artists: track.artists.map(artist => artist.name).join(","),
                    album: track.album.name
                }
            };
            return this.createItem(data, track);
        });
        return (
            <table className={ this.props.className }>
                <thead>{$header}</thead>
                <tbody>{$trs}</tbody>
            </table>
        );
    }

    createItem(data, track) {
        const $tds = [];
        for (const key in data.content) {
            $tds.push((<td key={ key + data.id }>{data.content[key]}</td>))
        }
        return (
            <tr key={ data.id}
                ref={ data.id }
                className={ this.state.selectedID === data.id ? "selected" : "" }
                onClick={ () => {
                    this._selectedItem(data.id);
                    this.props.handleSelectionChange(track);
                }}
            >
                {$tds}
            </tr>
        );
    }

    async _initData() {
        if (this.props.playlistId) {
            const data = await ServiceClient.getInstance().getPlayListDetail(this.props.playlistId);
            this.setState({data: data});
        }
    }

    _selectedItem(id) {
        if (id !== this.state.selectedID && id !== "header") {
            const $oldTarget = $(this.refs[this.state.selectedID]);
            const $curTarget = $(this.refs[id]);

            this.setState({"selectedID": id});

{'fraction_non_alphanumeric': 0.13210249880630273, 'fraction_numerical': 0.0, 'mean_word_length': 1.4441851419681058, 'pattern_counts': {'":': 2, '<': 23, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1868217', 'n_tokens_mistral': 1741, 'n_tokens_neox': 1676, 'n_words': 308}