react/components/ChannelSelector.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
 import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
@@ -68,9 +67,4 @@ const mapStateToProps = state => {
   };
 };
 
-ChannelSelector.propTypes = {
-  loggedInChannelName: PropTypes.string,
-  publishInChannel   : PropTypes.bool,
-};
-
 export default connect(mapStateToProps, null)(ChannelSelector);

react/components/Preview.jsx

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

react/components/PublishStatus.jsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import ProgressBar from '../components/ProgressBar.jsx';
-
+import * as publishStates from '../constants/publishing_states';
-const LOAD_START = 'LOAD_START';
-const LOADING = 'LOADING';
-const PUBLISHING = 'PUBLISHING';
-const SUCCESS = 'SUCCESS';
-const FAILED = 'FAILED';
 
 function PublishStatus ({ status, message }) {
   return (
     <div className="row row--tall flex-container--column flex-container--center-center">
-      {(status === LOAD_START) &&
+      {(status === publishStates.LOAD_START) &&
         <div className="row align-content-center">
           <p>File is loading to server</p>
           <p className="blue">{message}</p>
         </div>
       }
-      {(status === LOADING) &&
+      {(status === publishStates.LOADING) &&
       <div>
         <div className="row align-content-center">
           <p>File is loading to server</p>
@@ -24,20 +19,20 @@ function PublishStatus ({ status, message }) {
         </div>
       </div>
       }
-      {(status === PUBLISHING) &&
+      {(status === publishStates.PUBLISHING) &&
       <div className="row align-content-center">
         <p>Upload complete.  Your file is now being published on the blockchain...</p>
         <ProgressBar/>
         <p>Curious what magic is happening here? <a className="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
       </div>
       }
-      {(status === SUCCESS) &&
+      {(status === publishStates.SUCCESS) &&
       <div className="row align-content-center">
         <p>Your publish is complete! You are being redirected to it now.</p>
         <p>If you are not automatically redirected, <a class="link--primary" target="_blank" href={message}>click here.</a></p>
       </div>
       }
-      {(status === FAILED) &&
+      {(status === publishStates.FAILED) &&
       <div className="row align-content-center">
         <p>Something went wrong...</p>
         <p><strong>{message}</strong></p>

react/containers/ChannelCreateForm.jsx

@@ -4,7 +4,6 @@ import {updateLoggedInChannel} from '../actions/index';
 import { makeGetRequest, makePostRequest } from '../utils/xhr.js';
 import { setUserCookies } from '../utils/cookies.js';
 import { replaceChannelSelectionInNavBar } from '../utils/page.js';
-import PropTypes from 'prop-types';
 
 class ChannelCreateForm extends React.Component {
   constructor (props) {
@@ -171,8 +170,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-ChannelCreateForm.propTypes = {
-  onChannelLogin: PropTypes.func.isRequired,
-};
-
 export default connect(null, mapDispatchToProps)(ChannelCreateForm);

react/containers/ChannelLoginForm.jsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { updateLoggedInChannel } from '../actions/index';
 import { setUserCookies } from '../utils/cookies.js';
 import { replaceChannelSelectionInNavBar } from '../utils/page.js';
-import PropTypes from 'prop-types';
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -83,8 +82,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-ChannelLoginForm.propTypes = {
-  onChannelLogin: PropTypes.func.isRequired,
-};
-
 export default connect(null, mapDispatchToProps)(ChannelLoginForm);

react/containers/ChannelSelect.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { setPublishInChannel } from '../actions/index';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 
-class AnonymousOrChannelSelect extends React.Component {
+class channelSelect extends React.Component {
   constructor (props) {
     super(props);
     this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
@@ -46,9 +45,4 @@ const mapDispatchToProps = dispatch => {
   };
 }
 
-AnonymousOrChannelSelect.propTypes = {
+export default connect(mapStateToProps, mapDispatchToProps)(channelSelect);
-  publishInChannel        : PropTypes.bool.isRequired,
-  onPublishInChannelChange: PropTypes.func.isRequired,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AnonymousOrChannelSelect);

react/containers/Dropzone.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { selectFile, updateError } from '../actions';
 import { connect } from 'react-redux';
-import Preview from '../components/Preview.jsx';
+import { selectFile, updateError } from '../actions';
 import { validateFile } from '../utils/file.js';
-import PropTypes from 'prop-types';
+import Preview from '../components/Preview.jsx';
 
 class Dropzone extends React.Component {
   constructor (props) {
@@ -160,11 +159,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-Dropzone.propTypes = {
-  file       : PropTypes.object,
-  thumbnail  : PropTypes.string.isRequired,
-  fileError  : PropTypes.string,
-  onFileError: PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(Dropzone);

react/containers/PublishForm.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { getCookie } from '../utils/cookies.js';
 import PreviewDropzone from './Dropzone.jsx';
 import PublishTitleInput from './PublishTitleInput.jsx';
 import ChannelSelector from '../components/ChannelSelector.jsx';
@@ -6,11 +8,8 @@ import PublishUrlInput from './PublishUrlInput.jsx';
 import PublishThumbnailInput from './PublishThumbnailInput.jsx';
 import PublishMetadataInputs from './PublishMetadataInputs.jsx';
 import AnonymousOrChannelSelect from './ChannelSelect.jsx';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { getCookie } from '../utils/cookies.js';
 import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
-import * as states from '../constants/publishing_states';
+import * as publishStates from '../constants/publishing_states';
 
 class PublishForm extends React.Component {
   constructor (props) {
@@ -55,18 +54,18 @@ class PublishForm extends React.Component {
     const fd = this.appendDataToFormData(file, metadata);
     const that = this;
     xhr.upload.addEventListener('loadstart', function () {
-      that.props.onPublishStatusChange(states.LOAD_START, 'upload started');
+      that.props.onPublishStatusChange(publishStates.LOAD_START, 'upload started');
     });
     xhr.upload.addEventListener('progress', function (e) {
       if (e.lengthComputable) {
         const percentage = Math.round((e.loaded * 100) / e.total);
         console.log('progress:', percentage);
-        that.props.onPublishStatusChange(states.LOADING, `${percentage}%`);
+        that.props.onPublishStatusChange(publishStates.LOADING, `${percentage}%`);
       }
     }, false);
     xhr.upload.addEventListener('load', function () {
       console.log('loaded 100%');
-      that.props.onPublishStatusChange(states.PUBLISHING, null);
+      that.props.onPublishStatusChange(publishStates.PUBLISHING, null);
     }, false);
     xhr.open('POST', uri, true);
     xhr.onreadystatechange = function () {
@@ -75,12 +74,12 @@ class PublishForm extends React.Component {
         if (xhr.status === 200) {
           console.log('publish complete!');
           const url = JSON.parse(xhr.response).message.url;
-          that.props.onPublishStatusChange(states.SUCCESS, url);
+          that.props.onPublishStatusChange(publishStates.SUCCESS, url);
           window.location = url;
         } else if (xhr.status === 502) {
-          that.props.onPublishStatusChange(states.FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
+          that.props.onPublishStatusChange(publishStates.FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
         } else {
-          that.props.onPublishStatusChange(states.FAILED, JSON.parse(xhr.response).message);
+          that.props.onPublishStatusChange(publishStates.FAILED, JSON.parse(xhr.response).message);
         }
       }
     };
@@ -226,24 +225,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-PublishForm.propTypes = {
-  file                 : PropTypes.object.isRequired,
-  claim                : PropTypes.string.isRequired,
-  title                : PropTypes.string.isRequired,
-  thumbnail            : PropTypes.string.isRequired,
-  description          : PropTypes.string.isRequired,
-  license              : PropTypes.string.isRequired,
-  nsfw                 : PropTypes.bool.isRequired,
-  loggedInChannel      : PropTypes.object.isRequired,
-  publishInChannel     : PropTypes.bool.isRequired,
-  fileError            : PropTypes.string,
-  urlError             : PropTypes.string,
-  publishSubmitError   : PropTypes.string,
-  onFileSelect         : PropTypes.func.isRequired,
-  onFileClear          : PropTypes.func.isRequired,
-  onChannelLogin       : PropTypes.func.isRequired,
-  onPublishStatusChange: PropTypes.func.isRequired,
-  onPublishSubmitError : PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(PublishForm);

react/containers/PublishMetadataInputs.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { updateMetadata } from '../actions/index';
-import PropTypes from 'prop-types';
 
 /*
   const textarea = document.getElementById('publish-description');
@@ -15,12 +14,15 @@ class MetadataInputs extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      showInputs: false,
+      showInputs             : false,
+      descriptionLimit       : 200,
+      descriptionScrollHeight: null,
     };
     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);
   }
   toggleShowInputs () {
     this.setState({'showInputs': !this.state.showInputs});
@@ -43,6 +45,10 @@ class MetadataInputs extends React.Component {
     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">
@@ -53,7 +59,16 @@ 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" value={this.props.description} onChange={this.handleInput} />
+              <textarea
+                rows="1"
+                id="publish-description"
+                className="textarea textarea--primary textarea--full-width"
+                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} />
             </div>
           </div>
 
@@ -99,11 +114,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-MetadataInputs.propTypes = {
-  description     : PropTypes.string.isRequired,
-  license         : PropTypes.string.isRequired,
-  nsfw            : PropTypes.bool.isRequired,
-  onMetadataChange: PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(MetadataInputs);

react/containers/PublishThumbnailInput.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { updateMetadata } from '../actions/index';
-import PropTypes from 'prop-types';
 
 class ThumbnailInput extends React.Component {
   constructor (props) {
@@ -84,9 +83,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-ThumbnailInput.propTypes = {
-  thumbnail        : PropTypes.string.isRequired,
-  onThumbnailChange: PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(ThumbnailInput);

react/containers/PublishTitleInput.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {updateMetadata} from '../actions/index';
 import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
 
 class TitleInput extends React.Component {
   constructor (props) {
@@ -35,9 +34,4 @@ const mapDispatchToProps = dispatch => {
   };
 }
 
-TitleInput.propTypes = {
-  title           : PropTypes.string.isRequired,
-  onMetadataChange: PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(TitleInput);

react/containers/PublishTool.jsx

@@ -3,7 +3,6 @@ import Dropzone from './Dropzone.jsx';
 import PublishForm from './PublishForm.jsx';
 import PublishStatus from '../components/PublishStatus.jsx';
 import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
 
 class PublishTool extends React.Component {
   render () {
@@ -32,10 +31,4 @@ const mapStateToProps = state => {
   };
 };
 
-PublishTool.propTypes = {
-  file   : PropTypes.object,
-  status : PropTypes.string,
-  message: PropTypes.string,
-};
-
 export default connect(mapStateToProps, null)(PublishTool);

react/containers/PublishUrlInput.jsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { makeGetRequest } from '../utils/xhr.js';
 import UrlMiddle from '../components/PublishUrlMiddle.jsx';
 import {updateError} from '../actions';
-import PropTypes from 'prop-types';
 
 class UrlChooser extends React.Component {
   constructor (props) {
@@ -105,13 +104,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-UrlChooser.propTypes = {
-  fileName              : PropTypes.string.isRequired,
-  loggedInChannelName   : PropTypes.string.isRequired,
-  loggedInChannelShortId: PropTypes.string.isRequired,
-  publishInChannel      : PropTypes.bool.isRequired,
-  claim                 : PropTypes.string.isRequired,
-  urlError              : PropTypes.string,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(UrlChooser);