text: import React, { Component } from "react";
  import { API } from "aws-amplify";
  import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
  import LoaderButton from "../components/LoaderButton";
  import { s3Upload } from "../libs/awsLib";
  import config from "../config";
  import "./NewArtwork.css";
  
  export default class NewArtwork extends Component {
    constructor(props) {
      super(props);
  
      this.file = null;
  
      this.state = {
        isLoading: null,
        content: ""
      };
    }
  
    createArtwork(artwork) {
      return API.post("artworks", "/artworks", {
        body: artwork
      });
    }
  
    validateForm() {
      return this.state.content.length > 0;
    }
  
    handleChange = event => {
      this.setState({
        [event.target.id]: event.target.value
      });
    };
  
    handleFileChange = event => {
      this.file = event.target.files[0];
    };
  
    handleSubmit = async event => {
      event.preventDefault();
  
      if (this.file && this.file.size > config.MAX_ATTACHMENT_SIZE) {
        alert(
          `Please pick a file smaller than ${config.MAX_ATTACHMENT_SIZE /
            1000000} MB.`
        );
        return;
      }
  
      this.setState({ isLoading: true });
  
      try {
        const attachment = this.file ? await s3Upload(this.file) : null;
  
        await this.createArtwork({
          attachment,
          content: this.state.content
        });
        this.props.history.push("/");
      } catch (e) {
        alert(e);
        this.setState({ isLoading: false });
      }
    };
  
    render() {
      return (
        <div className="NewArtwork">
          <form onSubmit={this.handleSubmit}>
            <FormGroup controlId="content">
              <FormControl
                onChange={this.handleChange}
                value={this.state.content}
                componentClass="textarea"
              />
            </FormGroup>
            <FormGroup controlId="file">
              <ControlLabel>Attachment</ControlLabel>
              <FormControl onChange={this.handleFileChange} type="file" />
            </FormGroup>
            <LoaderButton
              block
              bsStyle="primary"
              bsSize="large"
              disabled={!this.validateForm()}
              type="submit"
              isLoading={this.state.isLoading}
              text="Create"
              loadingText="Creating…"
            />
          </form>
        </div>
      );
    }
  }
  