<commit_before>//@flow

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import fuzzy from 'fuzzy';
import _ from 'lodash';
import {fetchJson} from '../../services/backend';

import styles from './style.css'

const Start = React.createClass({
    getInitialState() {
      return {
        searchString: '',
        songs: [],
        filteredSongs: []
      };
    },

    componentDidMount() {
      ReactDOM.findDOMNode(this.refs.searchInput).focus();
      this.debouncedPerformSearch = _.debounce(this.performSearch, 300);
        fetchJson('/api/songs.json').then(songs => {
          var sortedSongs = songs.sort(function(a, b) {
            return (a.artist > b.artist ? 1 : (a.artist < b.artist ? -1 :
                    (a.title > b.title ? 1 : (a.title < b.title ? -1 : 0))));
          });
          this.setState({
            songs: sortedSongs,
            filteredSongs: sortedSongs
          })
        });
    },

    renderSong(song) {
      return (
        <div key={song.id} className={styles.song}>
          {song.imageUrl != null
            ? <img src={song.imageUrl} className={styles.cover} />
            : <img src="/default_cover.png" className={styles.cover} />}
          <div className={styles.info}>
            <div className={styles.title}>{song.title}</div><commit_msg>use hash as path for image<commit_after>//@flow

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import fuzzy from 'fuzzy';
import _ from 'lodash';
import {fetchJson} from '../../services/backend';

import styles from './style.css'

const Start = React.createClass({
    getInitialState() {
      return {
        searchString: '',
        songs: [],
        filteredSongs: []
      };
    },

    componentDidMount() {
      ReactDOM.findDOMNode(this.refs.searchInput).focus();
      this.debouncedPerformSearch = _.debounce(this.performSearch, 300);
        fetchJson('/api/songs.json').then(songs => {
          var sortedSongs = songs.sort(function(a, b) {
            return (a.artist > b.artist ? 1 : (a.artist < b.artist ? -1 :
                    (a.title > b.title ? 1 : (a.title < b.title ? -1 : 0))));
          });
          this.setState({
            songs: sortedSongs,
            filteredSongs: sortedSongs
          })
        });
    },

    renderSong(song) {
      return (
        <div key={song.id} className={styles.song}>
          {song.imageUrl != null
            ? <img src={`/images/${song.mp3hash}.png`} className={styles.cover} />
            : <img src="/default_cover.png" className={styles.cover} />}
          <div className={styles.info}>
            <div className={styles.title}>{song.title}</div>
{'fraction_non_alphanumeric': 0.1588126159554731, 'fraction_numerical': 0.006307977736549165, 'mean_word_length': 2.160609613130129, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2219633', 'n_tokens_mistral': 851, 'n_tokens_neox': 805, 'n_words': 162}