package.json

@@ -9,7 +9,9 @@
     "start": "node speech.js",
     "lint": "eslint .",
     "fix": "eslint . --fix",
-    "precommit": "eslint ."
+    "precommit": "eslint .",
+    "babel": "babel",
+    "webpack": "webpack"
   },
   "repository": {
     "type": "git",

react/app.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dropzone from './components/dropzone.jsx';
+import PublishDetails from './components/publishDetails.jsx';
+import PublishStatus from './components/publishStatus.jsx';
+
+const WAITING = 'WAITING';
+const READY = 'READY';
+const PUBLISHING = 'PUBLISHING';
+
+class Uploader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      componentStatus : WAITING,  // WAITING, DETAILS, or PUBLISHING
+      publishingStatus: 'starting status',
+      files           : [],
+    };
+    // bind class methods with `this`
+    this.handleClick = this.handleClick.bind(this);
+    this.updateComponentStatus = this.updateComponentStatus.bind(this);
+  }
+  handleClick (e) {
+    e.preventDefault();
+    console.log('The link was clicked.');
+  }
+  updateComponentStatus (newStatus) {
+    this.setState({componentStatus: newStatus});
+  }
+  render () {
+    return (
+      <div>
+        <form>
+          <input class="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onchange="publishFileFunctions.previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+        </form>
+        { this.state.componentStatus === WAITING &&
+          <Dropzone/>
+        }
+        { this.state.componentStatus === READY &&
+          <PublishDetails />
+        }
+        { this.state.componentStatus === PUBLISHING &&
+          <PublishStatus status={this.state.publishingStatus} />
+        }
+      </div>
+    );
+  }
+};
+
+ReactDOM.render(
+  <Uploader />,
+  document.getElementById('react-uploader')
+);

react/components/dropzone.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+class Dropzone extends React.Component {
+  render () {
+    return (
+      <div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
+        <div id="primary-dropzone-instructions">
+          <p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
+          <p>Drag & drop image or video here to publish</p>
+          <p class="fine-print">OR</p>
+          <p class="blue--underlined">CHOOSE FILE</p>
+        </div>
+        <div id="dropbzone-dragover" class="hidden">
+          <p class="blue">Drop it.</p>
+        </div>
+      </div>
+    );
+  }
+};
+
+module.exports = Dropzone;

react/components/publishDetails.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+class Title extends React.Component {
+  render () {
+    return (
+      <input type="text" id="publish-title" class="input-text text--large input-text--full-width" placeholder="Give your post a title..." />
+    )
+  }
+}
+
+class Preview extends React.Component {
+  render () {
+    return (
+      <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)"  ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
+        <div id="asset-preview-dropzone-instructions" class="hidden">
+          <p>Drag & drop image or video here</p>
+          <p class="fine-print">OR</p>
+          <p class="blue--underlined">CHOOSE FILE</p>
+        </div>
+        <div id="asset-preview-target"></div>
+      </div>
+    )
+  }
+};
+
+class Details extends React.Component {
+  render () {
+    return (
+      {{> publishForm-Channel}}
+      {{> publishForm-Url}}
+      {{> publishForm-Thumbnail}}
+      {{> publishForm-Details}}
+      {{> publishForm-Submit}}
+    )
+  }
+}
+
+class PublishDetails extends React.Component {
+  render () {
+    return (
+      <div id="publish-form" class="hidden">
+        <div class="row row--padded row--no-bottom">
+          <div class="column column--10">
+            <Title />
+          </div>
+          <div class="column column--5 column--sml-10" >
+            <div class="row row--padded">
+              <Preview />
+            </div>
+          </div>
+          <div class="column column--5 column--sml-10 align-content-top">
+            <div id="publish-active-area" class="row row--padded">
+              <Details />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+module.exports = PublishDetails;

react/components/publishStatus.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+class PublishStatus extends React.Component {
+  render () {
+    return (
+      <div id="publish-status" class="hidden">
+        <div class="row row--margined">
+          <div id="publish-update" class="row align-content-center"></div>
+          <div id="publish-progress-bar" class="row align-content-center"></div>
+          <div id="upload-percent" class="row align-content-center"></div>
+          <div>{this.props.status}</div>
+        </div>
+      </div>
+    );
+  }
+};
+
+module.exports = PublishStatus;

views/index.handlebars

@@ -1,52 +1,5 @@
 <div class="row row--tall flex-container--column">
-    <form>
-        <input class="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onchange="publishFileFunctions.previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-    </form>
-    <div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
-        <div id="primary-dropzone-instructions">
-            <p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
-            <p>Drag & drop image or video here to publish</p>
-            <p class="fine-print">OR</p>
-            <p class="blue--underlined">CHOOSE FILE</p>
-        </div>
-        <div id="dropbzone-dragover" class="hidden">
-            <p class="blue">Drop it.</p>
-        </div>
-    </div>
-    <div id="publish-form" class="hidden">
-        <div class="row row--padded row--no-bottom">
-            <div class="column column--10">
-                <!-- title input -->
-                <input type="text" id="publish-title" class="input-text text--large input-text--full-width" placeholder="Give your post a title...">
-            </div>
-            <div class="column column--5 column--sml-10" >
-                <!-- preview -->
-                <div class="row row--padded">
-                    <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)"  ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
-                        <div id="asset-preview-dropzone-instructions" class="hidden">
-                            <p>Drag & drop image or video here</p>
-                            <p class="fine-print">OR</p>
-                            <p class="blue--underlined">CHOOSE FILE</p>
-                        </div>
-                        <div id="asset-preview-target"></div>
-                    </div>
-                </div>
-            </div><div class="column column--5 column--sml-10 align-content-top">
-                <div id="publish-active-area" class="row row--padded">
-                    {{> publishForm-Channel}}
-                    {{> publishForm-Url}}
-                    {{> publishForm-Thumbnail}}
-                    {{> publishForm-Details}}
-                    {{> publishForm-Submit}}
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="publish-status" class="hidden">
-        <div class="row row--margined">
-            <div id="publish-update" class="row align-content-center"></div>
-            <div id="publish-progress-bar" class="row align-content-center"></div>
-            <div id="upload-percent" class="row align-content-center"></div>
-        </div>
-    </div>
+    <div id="react-uploader"></div>
 </div>
+
+<script src="/bundle/bundle.js"></script>

webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  entry : './react/app.js',
+  output: {
+    path    : path.join(__dirname, '/public/bundle/'),
+    filename: 'bundle.js',
+  },
+  watch : true,
+  module: {
+    loaders: [
+      {
+        test   : /.jsx?$/,
+        loader : 'babel-loader',
+        exclude: /node_modules/,
+        query  : {
+          presets: ['es2015', 'react'],
+        },
+      },
+    ],
+  },
+};