<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import ToggleDisplay from 'react-toggle-display';

class Playlists extends Component {
  constructor() {
    super();
  }


  render() {
    return(
        <div>
          <ToggleDisplay id="playlist-toggle" show={this.props.loadingplaylist}>
              <div className="modal fade playlist" id="loadingModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div className="modal-dialog" role="document">
                <div className="modal-content-loading">
                  <div className="modal-body loading-animation" >
                    <img className="loading-ring" src="./assets/ring.svg" />
                  </div>
                </div>
              </div>
            </div>
            </ToggleDisplay>

        <ToggleDisplay id="show-playlist" show={this.props.showplaylist}>
          <div className="modal fade playlist" id="homePlaylistModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 className="modal-title" id="myModalLabel">Gigify Spotlight Playlist</h4>
              </div>
              <div className="modal-body">
                <iframe
                  src={this.props.showplaylist ? `https://embed.spotify.com/?uri=spotify:user:${this.props.playlistid[0]}:playlist:${this.props.playlistid[1]}&theme=dark` : 'about:blank'}
                  width="100%" height="600" frameBorder="0" allowTransparency="true"
                />
              </div>
            </div>
          </div>
        </div>
      </ToggleDisplay>
    </div>
    )
  }

}

const mapStatetoProps = ({ loadingplaylist, showplaylist, playlistid }) => ({
  loadingplaylist,
  showplaylist,
  playlistid,
});

export default connect(mapStatetoProps, {})(Playlists);<commit_msg>refactor(playlists): refactors for style guide<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import ToggleDisplay from 'react-toggle-display';
import PropTypes from 'prop-types';

class Playlists extends Component {
  constructor() {
    super();
  }


  render() {
    return (
      <div>
        <ToggleDisplay id="playlist-toggle" show={this.props.loadingplaylist}>
          <div
            className="modal fade playlist"
            id="loadingModal"
            tabIndex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
          >
            <div className="modal-dialog" role="document">
              <div className="modal-content-loading">
                <div className="modal-body loading-animation" >
                  <img
                    alt="./assets/loadingicon.gif"
                    className="loading-ring"
                    src="./assets/ring.svg"
                  />
                </div>
              </div>
            </div>
          </div>
        </ToggleDisplay>

        <ToggleDisplay id="show-playlist" show={this.props.showplaylist}>
          <div
            className="modal fade playlist"
            id="homePlaylistModal"
            tabIndex="-1" role="dialog"
            aria-labelledby="myModalLabel"
          >
            <div
              className="modal-dialog"
              role="document"
            >
              <div className="modal-content">
                <div className="modal-header">
                  <button
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                  <h4 className="modal-title" id="myModalLabel">Gigify Spotlight Playlist</h4>
                </div>
                <div className="modal-body">
                  <iframe
                    src={this.props.showplaylist ? `https://embed.spotify.com/?uri=spotify:user:${this.props.playlistid[0]}:playlist:${this.props.playlistid[1]}&theme=dark` : 'about:blank'}
                    width="100%" height="600" frameBorder="0" allowTransparency="true"
                  />
                </div>
              </div>
            </div>
          </div>
        </ToggleDisplay>
      </div>
    );
  }

}

const mapStatetoProps = ({ loadingplaylist, showplaylist, playlistid }) => ({
  loadingplaylist,
  showplaylist,
  playlistid,
});

Playlists.propTypes = {
  loadingplaylist: PropTypes.bool.isRequired,
  showplaylist: PropTypes.bool.isRequired,
  playlistid: PropTypes.string.isRequired,
};

export default connect(mapStatetoProps, {})(Playlists);
{'fraction_non_alphanumeric': 0.1364744110479285, 'fraction_numerical': 0.005280259951259139, 'mean_word_length': 1.9142011834319526, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 2, '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': '2734487', 'n_tokens_mistral': 1366, 'n_tokens_neox': 1307, 'n_words': 231}