<commit_before>import React from 'react';
import ClippingsList from './ClippingsList';
import RandomClip from './RandomClip';
import DebounceInput from 'react-debounce-input';
import DropboxActions from '../actions/DropboxActions';
import ClippingsStore from '../stores/ClippingsStore';

class Main extends React.Component {

  constructor() {
    super();
    this.onChange = this.onChange.bind(this);
    this.state = ClippingsStore.getState();
  }

  componentDidMount() {
    DropboxActions.connect();
    ClippingsStore.listen(this.onChange);
  }

  componentWillUnmount() {
    ClippingsStore.unlisten(this.onChange);
  }

  onChange(state) {
    this.setState(state);
  }

  handleUserInput(filterText) {
    this.setState({
      filterText: filterText
    });
  }

  setMainContent() {
    if(this.state.clippings.length > 0) {
      if(this.state.filterText.length > 0) {
        return (
          <ClippingsList 
            clippings={this.state.clippings}
            filterText={this.state.filterText}
          />
        );
      } else {
        return (
          <RandomClip
            clippings={this.state.clippings}
          />
        );
      }
    }
  }

  render() {
    return (
      <div className="Main">
        <DebounceInput
          className="u-full-width SearchField"
          debounceTimeout={300}
          minLength={2}
          onChange={filterText => this.setState({filterText})}
          placeholder="Search..."
        />
        {this.setMainContent()}
      </div>
    );
  }
}

export default Main;<commit_msg>Include simple setup instructions<commit_after>import React from 'react';
import ClippingsList from './ClippingsList';
import RandomClip from './RandomClip';
import DebounceInput from 'react-debounce-input';
import DropboxActions from '../actions/DropboxActions';
import ClippingsStore from '../stores/ClippingsStore';

class Main extends React.Component {

  constructor() {
    super();
    this.onChange = this.onChange.bind(this);
    this.state = ClippingsStore.getState();
  }

  componentDidMount() {
    DropboxActions.connect();
    ClippingsStore.listen(this.onChange);
  }

  componentWillUnmount() {
    ClippingsStore.unlisten(this.onChange);
  }

  onChange(state) {
    this.setState(state);
  }

  handleUserInput(filterText) {
    this.setState({
      filterText: filterText
    });
  }

  setInputBar() {
    if(this.state.clippings.length > 0) {
      return (
        <DebounceInput
          className="u-full-width SearchField"
          debounceTimeout={300}
          minLength={2}
          onChange={filterText => this.setState({filterText})}
          placeholder="Search..."
        />
      );
    }
  }

  setMainContent() {
    if(this.state.clippings.length > 0) {
      if(this.state.filterText.length > 0) {
        return (
          <ClippingsList 
            clippings={this.state.clippings}
            filterText={this.state.filterText}
          />
        );
      } else {
        return (
          <RandomClip
            clippings={this.state.clippings}
          />
        );
      }
    } else {
      return (
        <div>
          <h4>To view your Kindle Clips...</h4>
          <p>Allow this app to connect to your Dropbox folder. Then add 'My Clippings.txt' to Dropbbox/Apps/Kindle Clippings Viewer</p>
        </div>
      );
    }
  }

  render() {
    return (
      <div className="Main">
        
        {this.setMainContent()}
      </div>
    );
  }
}

export default Main;
{'fraction_non_alphanumeric': 0.12628571428571428, 'fraction_numerical': 0.004285714285714286, 'mean_word_length': 2.2356746765249538, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 26, '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': '6778615', 'n_tokens_mistral': 1080, 'n_tokens_neox': 1042, 'n_words': 182}