package.json

@@ -43,6 +43,11 @@
     "nodemon": "^1.11.0",
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
     "request": "^2.83.0",
     "request-promise": "^4.2.2",
     "sequelize": "^4.1.0",
@@ -68,8 +73,7 @@
     "eslint-plugin-standard": "3.0.1",
     "husky": "^0.13.4",
     "mocha": "^4.0.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "redux-devtools": "^3.4.1",
     "webpack": "^3.10.0"
   }
 }

react/actions/index.js

@@ -0,0 +1,17 @@
+// export action types
+export const FILE_SELECTED = 'FILE_SELECTED';
+export const FILE_CLEAR = 'FILE_CLEAR';
+
+// export action creators
+export function selectFile (file) {
+  return {
+    type   : FILE_SELECTED,
+    payload: file,
+  };
+};
+
+export function clearFile () {
+  return {
+    type: FILE_CLEAR,
+  };
+};

react/components/PublishDropzone.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+// import PropTypes from 'prop-types';
 
-const DETAILS = 'DETAILS';
+import { selectFile } from '../actions';
+import { connect } from 'react-redux';
 
 class PublishDropzone extends React.Component {
   constructor (props) {
@@ -16,7 +18,6 @@ class PublishDropzone extends React.Component {
     this.handleDragLeave = this.handleDragLeave.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFileInput = this.handleFileInput.bind(this);
-    this.stageFile = this.stageFile.bind(this);
     this.setClaimNameFromFileName = this.setClaimNameFromFileName.bind(this);
   }
   validateFile (file) {
@@ -73,7 +74,7 @@ class PublishDropzone extends React.Component {
         }
         // stage it so it will be ready when the publish button is clicked
         this.setClaimNameFromFileName(droppedFile.name);
-        this.stageFile(droppedFile);
+        this.props.onFileSelect(droppedFile);
       }
     }
   }
@@ -113,16 +114,9 @@ class PublishDropzone extends React.Component {
       }
       // stage it so it will be ready when the publish button is clicked
       this.setClaimNameFromFileName(chosenFile.name);
-      this.stageFile(chosenFile);
+      this.props.onFileSelect(chosenFile);
     }
   }
-  stageFile (selectedFile) {
-    console.log('stageFileAndShowDetails', selectedFile);
-    // store the selected file for upload
-    this.props.updateUploaderState('file', selectedFile);
-    // show the publish form
-    this.props.updateUploaderState('showComponent', DETAILS);
-  }
   setClaimNameFromFileName (fileName) {
     console.log('setClaimNameFromFileName', fileName);
     const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.'));
@@ -154,4 +148,18 @@ class PublishDropzone extends React.Component {
   }
 };
 
-module.exports = PublishDropzone;
+const mapStateToProps = state => {
+  return {
+    file: state.file,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onFileSelect: (file) => {
+      dispatch(selectFile(file));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PublishDropzone);

react/components/PublishForm.jsx

@@ -7,6 +7,9 @@ import PublishThumbnailInput from './PublishThumbnailInput.jsx';
 import PublishMetadataInputs from './PublishMetadataInputs.jsx';
 import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
 
+import { selectFile, clearFile } from '../actions';
+import { connect } from 'react-redux';
+
 class PublishForm extends React.Component {
   constructor (props) {
     super(props);
@@ -14,7 +17,7 @@ class PublishForm extends React.Component {
     this.state = {
       error             : null,
       showMetadataInputs: false,
-    }
+    };
     this.publish = this.publish.bind(this);
   }
   publish () {
@@ -80,7 +83,7 @@ class PublishForm extends React.Component {
             </div>
 
             <div className="row row--short align-content-center">
-              <button className="button--cancel" onClick={this.props.clearUploaderState}>Cancel</button>
+              <button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
             </div>
 
             <div className="row row--short align-content-center">
@@ -94,4 +97,30 @@ class PublishForm extends React.Component {
   }
 };
 
-module.exports = PublishForm;
+const mapStateToProps = state => {
+  return {
+    loggedInChannelName   : state.loggedInChannelName,
+    loggedInChannelShortId: state.loggedInChannelShortId,
+    publishToChannel      : state.publishToChannel,
+    file                  : state.file,
+    title                 : state.title,
+    claim                 : state.claim,
+    thumbnail             : state.thumbnail,
+    description           : state.description,
+    license               : state.license,
+    nsfw                  : state.nsfw,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onFileSelect: (file) => {
+      dispatch(selectFile(file));
+    },
+    onFileClear: () => {
+      dispatch(clearFile());
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PublishForm);

react/components/PublishMetadataInputs.jsx

@@ -5,10 +5,10 @@ class MetadataInputs extends React.Component {
     super(props);
     this.state = {
       showInputs : false,
-      description: null,
     };
     this.toggleShowInputs = this.toggleShowInputs.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.handleSelection = this.handleSelection.bind(this);
   }
   toggleShowInputs () {
     if (this.state.showInputs) {
@@ -19,10 +19,16 @@ class MetadataInputs extends React.Component {
   }
   handleInput (event) {
     event.preventDefault();
-    const name = event.target.name;
-    const value = event.target.value;
+    const target = event.target;
+    const name = target.name;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
     this.props.updateUploaderState(name, value);
   }
+  handleSelection (event) {
+    const selectedOption = event.target.selectedOptions[0].value;
+    this.props.updateUploaderState('', value);
+  }
+
   render () {
     return (
       <div>
@@ -37,7 +43,7 @@ class MetadataInputs extends React.Component {
               <div className="column column--3 column--med-10 align-content-top">
                 <label htmlFor="publish-license" className="label">Description:</label>
               </div><div className="column column--7 column--sml-10">
-                <textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" onChange={this.handleInput}>{this.state.description}</textarea>
+                <textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" value={this.props.description} onChange={this.handleInput} />
               </div>
             </div>
 
@@ -45,7 +51,7 @@ class MetadataInputs extends React.Component {
               <div className="column column--3 column--med-10">
                 <label htmlFor="publish-license" className="label">License:</label>
               </div><div className="column column--7 column--sml-10">
-                <select type="text" id="publish-license" className="select select--primary">
+                <select type="text" name="license" id="publish-license" className="select select--primary" onSelect={this.handleSelection}>
                   <option value=" ">Unspecified</option>
                   <option value="Public Domain">Public Domain</option>
                   <option value="Creative Commons">Creative Commons</option>
@@ -57,7 +63,7 @@ class MetadataInputs extends React.Component {
               <div className="column column--3">
                 <label htmlFor="publish-nsfw" className="label">Mature:</label>
               </div><div className="column column--7">
-                <input className="input-checkbox" type="checkbox" id="publish-nsfw" />
+                <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleInput} />
               </div>
             </div>
 

react/components/PublishTool.jsx

@@ -1,34 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import PublishDropzone from './components/PublishDropzone.jsx';
-import PublishForm from './components/PublishForm.jsx';
-import PublishStatus from './components/PublishStatus.jsx';
-
-const DROPZONE = 'DROPZONE';
-const DETAILS = 'DETAILS';
-const STATUS = 'STATUS';
-const initialState = {
-  showComponent         : DROPZONE,  // DROPZONE, DETAILS, or PUBLISHING
-  loggedInChannelName   : null,
-  loggedInChannelShortId: null,
-  publishToChannel      : false,
-  error                 : null,
-  file                  : null,
-  title                 : '',
-  claim                 : '',
-  thumbnail             : '',
-  description           : '',
-  license               : '',
-  nsfw                  : '',
-};
+import PublishDropzone from './PublishDropzone.jsx';
+import PublishForm from './PublishForm.jsx';
+import PublishStatus from './PublishStatus.jsx';
+import {connect} from 'react-redux';
 
 class PublishTool extends React.Component {
   constructor (props) {
     super(props);
-    this.state = initialState;
     // bind class methods with `this`
     this.updateUploaderState = this.updateUploaderState.bind(this);
-    this.clearUploaderState = this.clearUploaderState.bind(this);
     this.makeGetRequest = this.makeGetRequest.bind(this);
     this.makePostRequest = this.makePostRequest.bind(this);
     this.cleanseInput = this.cleanseInput.bind(this);
@@ -46,9 +26,6 @@ class PublishTool extends React.Component {
     console.log(`updateUploaderState ${name} ${value}`);
     this.setState({[name]: value});
   }
-  clearUploaderState () {
-    this.setState(initialState);
-  }
   makeGetRequest (url) {
     return new Promise((resolve, reject) => {
       let xhttp = new XMLHttpRequest();
@@ -111,33 +88,22 @@ class PublishTool extends React.Component {
   render () {
     return (
       <div className="row row--tall flex-container--column">
-        { this.state.showComponent === DROPZONE &&
+        { !this.props.file &&
           <PublishDropzone
             updateUploaderState={this.updateUploaderState}
             cleanseInput={this.cleanseInput}
           />
         }
-        { this.state.showComponent === DETAILS &&
+        { this.props.file &&
           <PublishForm
             updateUploaderState={this.updateUploaderState}
             clearUploaderState={this.clearUploaderState}
             makeGetRequest={this.makeGetRequest}
             makePostRequest={this.makePostRequest}
             cleanseInput={this.cleanseInput}
-            loggedInChannelName={this.state.loggedInChannelName}
-            loggedInChannelShortId={this.state.loggedInChannelShortId}
-            publishToChannel={this.state.publishToChannel}
-            error={this.state.error}
-            file={this.state.file}
-            title={this.state.title}
-            claim={this.state.claim}
-            thumbnail={this.state.thumbnail}
-            description={this.state.description}
-            license={this.state.license}
-            nsfw={this.state.nsfw}
           />
         }
-        { this.state.showComponent === STATUS &&
+        { this.props.publishStatus &&
           <PublishStatus />
         }
       </div>
@@ -145,7 +111,10 @@ class PublishTool extends React.Component {
   }
 };
 
-ReactDOM.render(
-  <PublishTool />,
-  document.getElementById('react-uploader')
-);
+const mapStateToProps = state => {
+  return {
+    file: state.file,
+  };
+};
+
+export default connect(mapStateToProps, null)(PublishTool);

react/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Reducers from './reducers/index.js';
+import PublishTool from './components/PublishTool.jsx';
+
+let store = createStore(Reducers)
+
+ReactDOM.render(
+  <Provider store={store}>
+    <PublishTool />
+  </Provider>,
+  document.getElementById('react-publish-tool')
+)

react/reducers/index.js

@@ -0,0 +1,36 @@
+import {FILE_CLEAR, FILE_SELECTED} from '../actions';
+
+const DROPZONE = 'DROPZONE';
+
+const initialState = {
+  showComponent         : DROPZONE,
+  loggedInChannelName   : null,
+  loggedInChannelShortId: null,
+  publishToChannel      : false,
+  publishStatus         : null,
+  error                 : null,
+  file                  : null,
+  title                 : '',
+  claim                 : '',
+  thumbnail             : '',
+  description           : '',
+  license               : '',
+  nsfw                  : '',
+};
+
+/*
+Reducers describe how the application's state changes in response to actions
+*/
+
+export default function (state = initialState, action) {
+  switch (action.type) {
+    case FILE_SELECTED:
+      return Object.assign({}, state, {
+        file: action.payload,
+      });
+    case FILE_CLEAR:
+      return initialState;
+    default:
+      return state;
+  }
+}

views/index.handlebars

@@ -1,5 +1,5 @@
 <div class="row row--tall flex-container--column">
-    <div id="react-uploader" class="row row--padded row--tall flex-container--column">
+    <div id="react-publish-tool" class="row row--padded row--tall flex-container--column">
         <div class="row row--padded row--tall flex-container--column flex-container--center-center">
             <img src="/assets/img/loading.gif" alt="loading">
         </div>

webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  entry : './react/PublishTool.js',
+  entry : './react/index.js',
   output: {
     path    : path.join(__dirname, '/public/bundle/'),
     filename: 'bundle.js',