NewArticle.js

import React from 'react';
import {
  Form,
  FormInput,
  FileDragAndDrop,
  FileUpload,
  FormField,
  Row,
  Col,
  Container,
  FormNote,
  Button,
} from 'elemental';
import { connect } from 'react-redux';
import debounce from 'lodash/debounce';
import isString from 'lodash/isString';
import { withRouter } from 'react-router';

import { saveEvent } from '../lib';
import { onDrop, onTitleChange, onTextChange, onImageSelected } from '../actions/newArticle';
import { postArticle } from '../actions/request';

const styles = {
  newArticle: {
    backgroundColor: '#C0C0C0',
  },
};

const handleSubmit = (push, postArticle, article, title, images, isString) => {
  return () => {
    //1. validate crap from the store
    //2. do async action to post it
    //3. navigate to the new url
  };
};

const NewArticle = ({ onDrop, onTitleChange, onTextChange, onImageSelected, match, location, history, article, title, images, postArticle }) => (
  <Container style={styles.newArticle}>
    <Row>
      <Col sm="1">
        <div className="lead" style={{ textAlign: 'center' }}>
          <h3>Create A Fake Story And Trick All Your Friends!</h3>
          <h3>Simply Create Your Own News And Then Share It On Your Social Network Pages!</h3>
        </div>
        <hr />
      </Col>
      <Col sm="3/5">
        <Form type="horizontal">
          <FormField label="Title" htmlFor="supported-controls-input">
            <FormInput
              placeholder="Title Of Your Article"
              name="supported-controls-input"
              onChange={onTitleChange}
            />
          </FormField>
          <FormField label="Text" htmlFor="supported-controls-textarea">
            <FormInput
              placeholder=""
              name="supported-controls-textarea"
              multiline
              onChange={onTextChange}
            />
            <FormNote>
              Aim to make it somewhat believable so that it takes off and goes viral.
            </FormNote>
          </FormField>
          <h2>File Upload</h2>
          <FormField label="Image">
            <FileUpload
              buttonLabelInitial="Upload Image"
              buttonLabelChange="Change Image"
              accept="image/jpg, image/gif, image/png"
              onChange={onImageSelected}
            />
          </FormField>
          <FormField offsetAbsentLabel>
            <FileDragAndDrop files={[]} onDrop={onDrop} />
          </FormField>
          <FormField offsetAbsentLabel>
            <Button onClick={handleSubmit(history.push, postArticle, article, title, images, isString)} submit>Submit</Button>
          </FormField>
        </Form>
      </Col>
      <Col sm="2/5">
        <p><strong>Tips:&nbsp;</strong>You must be creative but keep in mind to make it fun.</p>
        <p><strong>Fake Title:&nbsp;</strong>Choose a catchy title for your joke. Make your
          friends curious.</p>
        <p><strong>Description:&nbsp;</strong>Be creative and make your friends curious.</p>
        <p><strong>Image:&nbsp;</strong>Upload one or search one via google images.</p>
      </Col>
    </Row>
  </Container>
);

const mapStateToProps = state => ({
  article: state.create.article,
  title: state.create.title,
  images: state.create.images,
});

const mapDispatchToProps = dispatch => ({
  onDrop: data => { dispatch(onImageSelected(data))},
  onImageSelected: (e, data) => dispatch(onDrop(data)),
  onTitleChange: saveEvent(debounce(title => dispatch(onTitleChange(title)), 250)),
  onTextChange: saveEvent(debounce(text => dispatch(onTextChange(text)), 250)),
  postArticle: url => dispatch(postArticle(url)),
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(NewArticle));