<commit_before>import React, { Component } from 'react'
import { connect } from 'react-redux'
import Dropzone from 'react-dropzone'
import axios from 'axios'
import _ from 'lodash'
import $ from 'jquery'

class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.onDrop.bind(this)
  }

  onDrop(files) {
    console.log('got the files ', typeof files)
    const data = new FormData()
    _.each(files, (file, i) => {
      console.log(file);
      data.append(`file-${i}`, file)
    })
    $.ajax({
      url: 'http://localhost:6969/upload',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
        console.log(data);
        let list = ''
        data.forEach(link => {
          list += `<li><img src="${link}" height="150px" /></li>`
        })
        $('.uploaded-images').html(list)
      },
      error: function(err) {
        console.log('error: ', err);
      }
    });
  }

  render() {
    return (
      <main className='dashboard'>
        <h2>Dashboard</h2>
        <h4>No Sidebar here</h4>
        <br/>
        <p>
          This drop zone is for photo upload to Amazon S3.
          It needs the server to be running to test out.
          Run 'nodemon server/server.js' if you want to test out photo upload
        </p>

        <Dropzone onDrop={this.onDrop}>
          <p>Drop a file here or click to select files to upload</p>
        </Dropzone>

        <p>
          Photos will render here once successfully uploaded to Amazon S3
        </p>

        <ul className="uploaded-images">
        </ul>
      </main>
    )
  }
}

export default connect()(Dashboard)<commit_msg>remove console.logs and update comments on dashboard to show 'npm run dev' instead of 'nodemon server/server.js'<commit_after>import React, { Component } from 'react'
import { connect } from 'react-redux'
import Dropzone from 'react-dropzone'
import axios from 'axios'
import _ from 'lodash'
import $ from 'jquery'

class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.onDrop.bind(this)
  }

  onDrop(files) {
    const data = new FormData()
    _.each(files, (file, i) => {
      data.append(`file-${i}`, file)
    })
    $.ajax({
      url: 'http://localhost:6969/upload',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
        console.log(data);
        let list = ''
        data.forEach(link => {
          list += `<li><img src="${link}" height="150px" /></li>`
        })
        $('.uploaded-images').html(list)
      },
      error: function(err) {
        console.log('error: ', err);
      }
    });
  }

  render() {
    return (
      <main className='dashboard'>
        <h2>Dashboard</h2>
        <h4>No Sidebar here</h4>
        <br/>
        <p>
          This drop zone is for photo upload to Amazon S3.
          It needs the server to be running to test out.
          Run 'npm run dev' if you want to test out the server and photo upload
        </p>

        <Dropzone onDrop={this.onDrop}>
          <p>Drop a file here or click to select files to upload</p>
        </Dropzone>

        <p>
          Photos will render here once successfully uploaded to Amazon S3
        </p>

        <ul className="uploaded-images">
        </ul>
      </main>
    )
  }
}

export default connect()(Dashboard)
{'fraction_non_alphanumeric': 0.1342378752886836, 'fraction_numerical': 0.007505773672055427, 'mean_word_length': 2.1104129263913824, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, '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': '1525141', 'n_tokens_mistral': 1088, 'n_tokens_neox': 1061, 'n_words': 312}