ihgrant

const Controller = (function () {
  let currentRows = [];
  const addRow = function (newRow) {
    // add a new row to our local variable
    render();
  };
  const render = function () {
    ReactDOM.render(<Form onSubmit={addRow}/>, document.getElementById('myform'));
    ReactDOM.render(<Rows rows={currentRows}/>, document.getElementById('myrows'));
  };

ihgrant

var Question = React.createClass({
    onChangeTitle: function (e) {
        this.props.qTitleCallback(this.props.ordering, e);
    },
    onChangeType: function (e) {
        this.props.qTypeCallback(this.props.ordering, e);
    },
    render: function() {
        return (
            <div>

ihgrant

{
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "jquery": false

ihgrant

const server = new WebSocket("ws://localhost:3000");

export default const server = {
  sendmessage: () => {
    return server.onmessage = () => {}
  }
}

ihgrant

const sql = require('mssql');
const Promise = require('bluebird');

Promise.promisifyAll([
    sql.Connection,
]);

const createConnection = connectionOptions => {
    const connection = new sql.Connection(connectionOptions);
    return connection.connectAsync().then(() => {

ihgrant

import App from './App';
import './index.css';
import {render} from './statemachine';

render(
    App,
    {},
    document.getElementById('root')
);

ihgrant

const React     = require('react');
const ReactDOM  = require('react-dom');
const TodoInput = require('./todo_input.js');
const TodoList  = require('./todo_list.js');

var tasks = [
  { text : 'buy milk' },
  { text : 'do exercises' }
];

ihgrant

export function tryparseJson(jsonstring) {
  try {
    return JSON.parse(jsonstring);
  } catch (e) {
    return false;
  }
}

ihgrant

class Example extends React.Component {
    onClick(e, id) {
        ...
    }
    render() {
        return <ul>{this.props.items.map((el, i) => <li onClick={this.onClick.bind(this, el.id)}>{el.description}</li>)</ul>
    }
}

/// OR........

ihgrant

naïve approach

• rely on files property being set
• fails because while clicking on the input and selecting files will set the property correctly, dragging and dropping does not actually interact with the input and set the property. The property cannot be set manually (react-dropzone/react-dropzone#131) using javascript for security reasons.
• thus when the form is submitted the file input has no files property and nothing is uploaded.

let's use javascript, then!

• submit the form using fetch, create a FormData from the form and manually set the files field using state set using the onDrop callback from Dropzone
• only set the files field if it's not set (because the user could have clicked and chosen files instead of dragging and dropping)
• FormData has a great API for inspecting its keys and values! I'll use FormData#getAll() and see if the files are populated
• works great in chrome and ff!