react/components/Preview.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class Preview extends React.Component {
   constructor (props) {
@@ -39,4 +40,10 @@ class Preview extends React.Component {
   }
 };
 
+Preview.propTypes = {
+  dimPreview: PropTypes.bool.isRequired,
+  file      : PropTypes.object.isRequired,
+  thumbnail : PropTypes.string,
+};
+
 export default Preview;

react/components/PublishStatus.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ProgressBar from '../components/ProgressBar.jsx';
 import * as publishStates from '../constants/publishing_states';
 
@@ -43,4 +44,9 @@ function PublishStatus ({ status, message }) {
   );
 };
 
+PublishStatus.propTypes = {
+  status : PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
 export default PublishStatus;

react/containers/PublishForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { getCookie } from '../utils/cookies.js';
-import PreviewDropzone from './Dropzone.jsx';
+import Dropzone from './Dropzone.jsx';
 import PublishTitleInput from './PublishTitleInput.jsx';
 import ChannelSelector from '../components/ChannelSelector.jsx';
 import PublishUrlInput from './PublishUrlInput.jsx';
@@ -139,7 +139,7 @@ class PublishForm extends React.Component {
         <div className="column column--5 column--sml-10" >
 
           <div className="row row--padded">
-            <PreviewDropzone />
+            <Dropzone />
           </div>
 
         </div>

react/containers/PublishMetadataInputs.jsx

@@ -6,49 +6,53 @@ import { updateMetadata } from '../actions/index';
   const textarea = document.getElementById('publish-description');
   const limit = 200;
   textarea.oninput = () => {
-  textarea.style.height = '';
-  textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px';
+    textarea.style.height = '';
+    textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px';
+  }
 */
 
 class MetadataInputs extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      showInputs             : false,
-      descriptionLimit       : 200,
-      descriptionScrollHeight: null,
+      showInputs       : false,
+      descriptionLimit : 100,
+      descriptionHeight: '',
     };
     this.toggleShowInputs = this.toggleShowInputs.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleCheck = this.handleCheck.bind(this);
-    this.handleSelection = this.handleSelection.bind(this);
-    this.setDescriptionScrollHeight = this.setDescriptionScrollHeight.bind(this);
+    this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
+    this.handleNsfwCheck = this.handleNsfwCheck.bind(this);
+    this.handleLicenseSelection = this.handleLicenseSelection.bind(this);
+    this.setDescriptionTextBoxHeight = this.setDescriptionTextBoxHeight.bind(this);
   }
   toggleShowInputs () {
     this.setState({'showInputs': !this.state.showInputs});
   }
-  handleInput (event) {
+  handleDescriptionInput (event) {
     event.preventDefault();
     const name = event.target.name;
     const value = event.target.value;
     this.props.onMetadataChange(name, value);
+    this.setDescriptionTextBoxHeight(event);
   }
-  handleCheck (event) {
+  setDescriptionTextBoxHeight (event) {
+    const scrollHeight = event.target.scrollHeight;
+    // console.log('scrollHeight:', scrollHeight);
+    const height = Math.min(scrollHeight, this.state.descriptionLimit) + 'px';
+    this.setState({descriptionHeight: height});
+  }
+  handleNsfwCheck (event) {
     console.log('handle input', event);
     event.preventDefault();
     const name = event.target.name;
     const value = event.target.checked;
     this.props.onMetadataChange(name, value);
   }
-  handleSelection (event) {
+  handleLicenseSelection (event) {
     const name = event.target.name;
     const selectedOption = event.target.selectedOptions[0].value;
     this.props.onMetadataChange(name, selectedOption);
   }
-  setDescriptionScrollHeight (event) {
-    const scrollHeight = event.target.scrollHeight;
-    this.setState({descriptionScrollHeight: scrollHeight});
-  }
   render () {
     return (
       <div id="publish-details" className="row row--padded row--no-top row--wide">
@@ -66,9 +70,8 @@ class MetadataInputs extends React.Component {
                 name="description"
                 placeholder="Optional description"
                 value={this.props.description}
-                onInput={this.setDescriptionScrollHeight}
-                height={Math.min(this.state.descriptionScrollHeight, this.state.descriptionLimit) + 'px'}
-                onChange={this.handleInput} />
+                style={{height: this.state.descriptionHeight}}
+                onChange={this.handleDescriptionInput} />
             </div>
           </div>
 
@@ -76,7 +79,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" name="license" id="publish-license" className="select select--primary" onChange={this.handleSelection}>
+              <select type="text" name="license" id="publish-license" className="select select--primary" onChange={this.handleLicenseSelection}>
                 <option value=" ">Unspecified</option>
                 <option value="Public Domain">Public Domain</option>
                 <option value="Creative Commons">Creative Commons</option>
@@ -88,7 +91,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" name="nsfw" checked={this.props.nsfw} onChange={this.handleCheck} />
+              <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleNsfwCheck} />
             </div>
           </div>
         </div>

react/containers/PublishUrlInput.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { updateClaim } from '../actions/index';
 import { connect } from 'react-redux';
 import { makeGetRequest } from '../utils/xhr.js';
 import UrlMiddle from '../components/PublishUrlMiddle.jsx';
-import {updateError} from '../actions';
+import {updateError, updateClaim} from '../actions';
 
 class UrlChooser extends React.Component {
   constructor (props) {