<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import fetch from 'isomorphic-fetch';
import {
  concat,
  isEqual,
  without,
} from 'lodash';

import Dropzone from 'react-dropzone';
import { GridList, GridTile } from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import DeleteButton from 'material-ui/svg-icons/action/delete';

import { grey300 } from 'material-ui/styles/colors';

import { API_ROOT } from '../actions/common';

export default class PhotosList extends Component {
  static propTypes = {
    input: PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.arrayOf(PropTypes.string),
      ]).isRequired,
      onChange: PropTypes.func.isRequired,
    }).isRequired,
  }

  static styles = {
    gridList: {
      display: 'flex',
      flexWrap: 'nowrap',
      overflowX: 'auto',
    },
    uploadedImage: {
      maxHeight: '200px',
    },
    dropzone: {
      width: '7rem',
      height: '7rem',
      backgroundColor: grey300,
      borderRadius: '5px',
    },
    dropzoneHide: {
      width: '7rem',
      height: '2rem',
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
    },
    uploadText: {
      verticalAlign: 'middle',
      textAlign: 'center',
    },
  }

  componentWillMount() {
    this.setState({
      photos: this.props.input.value || [],
    });
  }

  componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.input.value, nextProps.input.value)) {
      this.setState({
        photos: nextProps.input.value || [],
      });
    }
  }

  handleDeletePhoto = photo => () => {
    const photos = without(this.state.photos, photo);
    this.setState({ photos });
    this.props.input.onChange(photos);
  }

  handleDropAccepted = (files) => {
    let numFiles = this.state.photos.length;
    files.forEach((file) => {
      if (numFiles >= 5) { return; }
      numFiles += 1;

      const formData = new FormData();
      formData.append('file', file);

      fetch(`${API_ROOT}/photos`, {
        method: 'POST',
        body: formData,
        credentials: 'include',
      })
      .then(res => res.json())
      .then((data) => {
        const photos = concat(this.state.photos, [data.location]);
        this.setState({ photos });
        this.props.input.onChange(photos);
      })
      .catch((err) => {
        console.error('error while uploading file:', err);
      });
    });
  }

  photoFilename = photo => decodeURIComponent(photo.split('/').pop())

  render() {
    const styles = PhotosList.styles;

    return (
      <div>
        { this.state.photos.length < 5 &&
          <Dropzone
            style={this.state.photos.length > 0 ? styles.dropzoneHide : styles.dropzone}
            accept="image/*"
            data={{ type: 'picture' }}
            maxSize={+10e6/* 10MB */}
            disablePreview
            onDropAccepted={this.handleDropAccepted}
          >
            <div
              style={{
                ...styles.uploadText,
                lineHeight: this.state.photos.length > 0 ? '2rem' : '7rem',
              }}
            ><commit_msg>Change max image size per discussion with Casey<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import fetch from 'isomorphic-fetch';
import {
  concat,
  isEqual,
  without,
} from 'lodash';

import Dropzone from 'react-dropzone';
import { GridList, GridTile } from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import DeleteButton from 'material-ui/svg-icons/action/delete';

import { grey300 } from 'material-ui/styles/colors';

import { API_ROOT } from '../actions/common';

export default class PhotosList extends Component {
  static propTypes = {
    input: PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.arrayOf(PropTypes.string),
      ]).isRequired,
      onChange: PropTypes.func.isRequired,
    }).isRequired,
  }

  static styles = {
    gridList: {
      display: 'flex',
      flexWrap: 'nowrap',
      overflowX: 'auto',
    },
    uploadedImage: {
      maxHeight: '200px',
    },
    dropzone: {
      width: '7rem',
      height: '7rem',
      backgroundColor: grey300,
      borderRadius: '5px',
    },
    dropzoneHide: {
      width: '7rem',
      height: '2rem',
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
    },
    uploadText: {
      verticalAlign: 'middle',
      textAlign: 'center',
    },
  }

  componentWillMount() {
    this.setState({
      photos: this.props.input.value || [],
    });
  }

  componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.input.value, nextProps.input.value)) {
      this.setState({
        photos: nextProps.input.value || [],
      });
    }
  }

  handleDeletePhoto = photo => () => {
    const photos = without(this.state.photos, photo);
    this.setState({ photos });
    this.props.input.onChange(photos);
  }

  handleDropAccepted = (files) => {
    let numFiles = this.state.photos.length;
    files.forEach((file) => {
      if (numFiles >= 5) { return; }
      numFiles += 1;

      const formData = new FormData();
      formData.append('file', file);

      fetch(`${API_ROOT}/photos`, {
        method: 'POST',
        body: formData,
        credentials: 'include',
      })
      .then(res => res.json())
      .then((data) => {
        const photos = concat(this.state.photos, [data.location]);
        this.setState({ photos });
        this.props.input.onChange(photos);
      })
      .catch((err) => {
        console.error('error while uploading file:', err);
      });
    });
  }

  photoFilename = photo => decodeURIComponent(photo.split('/').pop())

  render() {
    const styles = PhotosList.styles;

    return (
      <div>
        { this.state.photos.length < 5 &&
          <Dropzone
            style={this.state.photos.length > 0 ? styles.dropzoneHide : styles.dropzone}
            accept="image/*"
            data={{ type: 'picture' }}
            maxSize={+15e6/* 15MB */}
            disablePreview
            onDropAccepted={this.handleDropAccepted}
          >
            <div
              style={{
                ...styles.uploadText,
                lineHeight: this.state.photos.length > 0 ? '2rem' : '7rem',
              }}
            >
{'fraction_non_alphanumeric': 0.14796079671198228, 'fraction_numerical': 0.009800822004426177, 'mean_word_length': 2.2748447204968945, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 31, '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': '5983025', 'n_tokens_mistral': 1975, 'n_tokens_neox': 1914, 'n_words': 389}