<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
} from 'material-ui/Card';
import { List, ListItem } from 'material-ui/List';
import RaisedButton       from 'material-ui/RaisedButton';
import { connect }        from 'react-redux';
import { creators }       from '../actions/playlist';
import tryGet             from '../utils/tryGet';
import datePrettify       from '../utils/datePrettify';
import { getUrl }         from '../model/Playlist';
import {
  NO_IMAGE,
  DEAD_IMAGE,
  getImageOfProvider,
} from '../utils/thumbnail';

class PlaylistDetail extends React.Component {
  static get propTypes() {
    return {
      item:                    PropTypes.object.isRequired,
      handleUpdateButtonClick: PropTypes.func.isRequired,
    };
  }
  render() {
    const id          = tryGet(this.props.item, 'id', 'unknown id');
    const state       = tryGet(this.props.item, 'state', 'unknown state');
    const ownerId     = tryGet(this.props.item, 'owner_id', 'unknown');
    const ownerName   = tryGet(this.props.item, 'owner_name', 'unknown');
    const title       = tryGet(this.props.item, 'title', 'No Title');
    const description = tryGet(this.props.item, 'description', 'No Description');
    const provider    = tryGet(this.props.item, 'provider', 'No Service');
    const identifier  = tryGet(this.props.item, 'identifier', 'No ID');
    const artworkUrl  = tryGet(this.props.item, 'artwork_url', NO_IMAGE);
    const publishedAt = datePrettify(tryGet(this.props.item, 'published_at', null));
    const createdAt   = datePrettify(tryGet(this.props.item, 'created_at', null));
    const updatedAt   = datePrettify(tryGet(this.props.item, 'updated_at', null));
    const url         = getUrl(this.props.item);
    const overlay = (
      <CardTitle
        title={title}
        subtitle={description}
      />
    );
    const style = {
      margin: 'auto',
      width:  'calc(75vh)',
    };
    return (
      <Card>
        <CardHeader
          title={title}
          subtitle={this.props.item.url}
          avatar={getImageOfProvider(provider)}
        />
        <CardMedia style={style} overlay={overlay} >
          <img alt="artwork" src={state === 'alive' ? artworkUrl : DEAD_IMAGE} />
        </CardMedia>
        <CardTitle title={title} />
        <CardActions>
          <RaisedButton
            primary
            label={`View on ${provider}`}
            href={url}
          />
          <RaisedButton
            primary
            label="Update"
            onClick={() => this.props.handleUpdateButtonClick(this.props.item)}
          />
        </CardActions>
        <CardText>
          <List>
            <ListItem primaryText="id" secondaryText={id} />
            <ListItem primaryText="title" secondaryText={title} />
            <ListItem primaryText="state" secondaryText={state} />
            <ListItem primaryText="provider" secondaryText={provider} />
            <ListItem primaryText="identifier" secondaryText={identifier} />
            <ListItem primaryText="owner id" secondaryText={ownerId} />
            <ListItem primaryText="owner name" secondaryText={ownerName} />
            <ListItem primaryText="published" secondaryText={publishedAt} />
            <ListItem primaryText="created" secondaryText={createdAt} />
            <ListItem primaryText="updated" secondaryText={updatedAt} />
          </List>
        </CardText>
      </Card>
    );
  }
}

function mapStateToProps(state) {
  return {
    item: state.playlists.item,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    handleUpdateButtonClick: item => dispatch(creators.update.start(item)),
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PlaylistDetail));
<commit_msg>Update PlaylistDetail that has 3 tabs (summary, props, tracks)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
} from 'material-ui/Card';
import { Tabs, Tab }      from 'material-ui/Tabs';
import { List, ListItem } from 'material-ui/List';
import RaisedButton       from 'material-ui/RaisedButton';
import { connect }        from 'react-redux';
import { creators }       from '../actions/playlist';
import tryGet             from '../utils/tryGet';
import datePrettify       from '../utils/datePrettify';
import { getUrl }         from '../model/Playlist';
import {
  NO_IMAGE,
  DEAD_IMAGE,
  getImageOfProvider,
} from '../utils/thumbnail';

class PlaylistDetail extends React.Component {
  static get propTypes() {
    return {
      item:                    PropTypes.object.isRequired,
      handleUpdateButtonClick: PropTypes.func.isRequired,
    };
  }
  renderSummaryCard() {
    const state       = tryGet(this.props.item, 'state', 'unknown state');
    const title       = tryGet(this.props.item, 'title', 'No Title');
    const description = tryGet(this.props.item, 'description', 'No Description');
    const provider    = tryGet(this.props.item, 'provider', 'No Service');
    const artworkUrl  = tryGet(this.props.item, 'artwork_url', NO_IMAGE);
    const url         = getUrl(this.props.item);
    const overlay = (
      <CardTitle
        title={title}
        subtitle={description}
      />
    );
    const style = {
      margin: 'auto',
      width:  'calc(75vh)',
    };
    return (
      <Card>
        <CardHeader
          title={title}
          subtitle={this.props.item.url}
          avatar={getImageOfProvider(provider)}
        />
        <CardMedia style={style} overlay={overlay} >
          <img alt="artwork" src={state === 'alive' ? artworkUrl : DEAD_IMAGE} />
        </CardMedia>
        <CardTitle title={title} />
        <CardActions>
          <RaisedButton
            primary
            label={`View on ${provider}`}
            href={url}
          />
          <RaisedButton
            primary
            label="Update"
            onClick={() => this.props.handleUpdateButtonClick(this.props.item)}
          />
        </CardActions>
        <CardText />
      </Card>
    );
  }
  renderPropsList() {
    const id          = tryGet(this.props.item, 'id', 'unknown id');
    const title       = tryGet(this.props.item, 'title', 'No Title');
    const state       = tryGet(this.props.item, 'state', 'unknown state');
    const provider    = tryGet(this.props.item, 'provider', 'No Service');
    const identifier  = tryGet(this.props.item, 'identifier', 'No ID');
    const ownerId     = tryGet(this.props.item, 'owner_id', 'unknown');
    const ownerName   = tryGet(this.props.item, 'owner_name', 'unknown');
    const publishedAt = datePrettify(tryGet(this.props.item, 'published_at', null));
    const createdAt   = datePrettify(tryGet(this.props.item, 'created_at', null));
    const updatedAt   = datePrettify(tryGet(this.props.item, 'updated_at', null));
    return (
      <List>
        <ListItem primaryText="id" secondaryText={id} />
        <ListItem primaryText="title" secondaryText={title} />
        <ListItem primaryText="state" secondaryText={state} />
        <ListItem primaryText="provider" secondaryText={provider} />
        <ListItem primaryText="identifier" secondaryText={identifier} />
        <ListItem primaryText="owner id" secondaryText={ownerId} />
        <ListItem primaryText="owner name" secondaryText={ownerName} />
        <ListItem primaryText="published" secondaryText={publishedAt} />
        <ListItem primaryText="created" secondaryText={createdAt} />
        <ListItem primaryText="updated" secondaryText={updatedAt} />
      </List>
    );
  }
  renderTrackList() {
    if (!this.props.item.tracks) {
      return null;
    }
    const items = this.props.item.tracks.map((track, index) => (
      <ListItem primaryText={`${index + 1} ${track.title}`} secondaryText={track.id} />
    ));
    return <List>{items}</List>;
  }
  render() {
    return (
      <Tabs>
        <Tab label="Summary">
          {this.renderSummaryCard()}
        </Tab>
        <Tab label="Props">
          {this.renderPropsList()}
        </Tab>
        <Tab label="Tracks" >
          {this.renderTrackList()}
        </Tab>
      </Tabs>
    );
  }
}

function mapStateToProps(state) {
  return {
    item: state.playlists.item,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    handleUpdateButtonClick: item => dispatch(creators.update.start(item)),
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PlaylistDetail));

{'fraction_non_alphanumeric': 0.1384703852788959, 'fraction_numerical': 0.0006900517538815411, 'mean_word_length': 2.6661045531197303, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 70, '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': '914060', 'n_tokens_mistral': 2549, 'n_tokens_neox': 2538, 'n_words': 528}