updated thumbnail claim along with publish claim

react/containers/Dropzone/index.js

@@ -14,15 +14,11 @@ const mapDispatchToProps = dispatch => {
   return {
     selectFile: (file) => {
       dispatch(selectFile(file));
-      dispatch(updateError('publishSubmit', null));
     },
     setFileError: (value) => {
       dispatch(clearFile());
       dispatch(updateError('file', value));
     },
-    clearFileError: () => {
-      dispatch(updateError('file', null));
-    },
   };
 };
 

react/containers/Dropzone/view.jsx

@@ -19,7 +19,7 @@ class Dropzone extends React.Component {
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFileInput = this.handleFileInput.bind(this);
-    this.selectFile = this.selectFile.bind(this);
+    this.chooseFile = this.chooseFile.bind(this);
   }
   handleDrop (event) {
     event.preventDefault();
@@ -30,7 +30,7 @@ class Dropzone extends React.Component {
     if (dt.items) {
       if (dt.items[0].kind === 'file') {
         const droppedFile = dt.items[0].getAsFile();
-        this.selectFile(droppedFile);
+        this.chooseFile(droppedFile);
       }
     }
   }
@@ -61,15 +61,14 @@ class Dropzone extends React.Component {
   }
   handleClick (event) {
     event.preventDefault();
-    // trigger file input
     document.getElementById('file_input').click();
   }
   handleFileInput (event) {
     event.preventDefault();
     const fileList = event.target.files;
-    this.selectFile(fileList[0]);
+    this.chooseFile(fileList[0]);
   }
-  selectFile (file) {
+  chooseFile (file) {
     if (file) {
       try {
         validateFile(file); // validate the file's name, type, and size
@@ -77,7 +76,6 @@ class Dropzone extends React.Component {
         return this.props.setFileError(error.message);
       }
       // stage it so it will be ready when the publish button is clicked
-      this.props.clearFileError(null);
       this.props.selectFile(file);
     }
   }

react/containers/PublishThumbnailInput/view.jsx

@@ -15,16 +15,28 @@ class PublishThumbnailInput extends React.Component {
     this.setThumbnailWithSnapshot = this.setThumbnailWithSnapshot.bind(this);
   }
   componentDidMount () {
-    this.setThumbnailClaimAndUrl();
+    console.log('thumbnail input did mount');
-    this.setVideoSource();
+    const { claim, file, host, thumbnailChannel } = this.props;
+    this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
+    this.setVideoSource(file);
   }
-  setThumbnailClaimAndUrl () {
+  componentWillReceiveProps (nextProps) {
-    const { claim, host, thumbnailChannel } = this.props;
+    // if file changes
+    if (nextProps.file !== this.props.file) {
+      const { file } = nextProps;
+      this.setVideoSource(file);
+    };
+    // if claim changes
+    if (nextProps.claim !== this.props.claim) {
+      const { claim, host, thumbnailChannel } = nextProps;
+      this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
+    }
+  }
+  setThumbnailClaimAndUrl (claim, host, thumbnailChannel) {
     const url = `${host}/${thumbnailChannel}/${claim}-thumb.png`;
     this.props.onThumbnailChange(`${claim}-thumb`, url);
   }
-  setVideoSource () {
+  setVideoSource (file) {
-    const { file } = this.props;
     const previewReader = new FileReader();
     previewReader.readAsDataURL(file);
     previewReader.onloadend = () => {

react/containers/PublishUrlInput/view.jsx

@@ -8,16 +8,16 @@ class PublishUrlInput extends React.Component {
     this.handleInput = this.handleInput.bind(this);
   }
   componentDidMount () {
-    if (!this.props.claim || this.props.claim === '') {
+    const { claim, fileName } = this.props;
-      this.setClaimNameFromFileName();
+    if (!claim) {
+      this.setClaimName(fileName);
     }
   }
-  componentWillReceiveProps ({claim: newClaim}) {
+  componentWillReceiveProps ({ claim, fileName }) {
-    if (newClaim) {
+    if (!claim) {
-      this.checkClaimIsAvailable(newClaim);
+      return this.setClaimName(fileName);
-    } else {
-      this.props.onUrlError('Please enter a URL');
     }
+    this.checkClaimIsAvailable(claim);
   }
   handleInput (event) {
     let value = event.target.value;
@@ -30,8 +30,7 @@ class PublishUrlInput extends React.Component {
     input = input.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
     return input;
   }
-  setClaimNameFromFileName () {
+  setClaimName (fileName) {
-    const fileName = this.props.fileName;
     const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.'));
     const cleanClaimName = this.cleanseInput(fileNameWithoutEnding);
     this.props.onClaimChange(cleanClaimName);
@@ -39,7 +38,7 @@ class PublishUrlInput extends React.Component {
   checkClaimIsAvailable (claim) {
     request(`/api/claim/availability/${claim}`)
       .then(isAvailable => {
-        // console.log('checkClaimIsAvailable request response:', isAvailable);
+        console.log('checkClaimIsAvailable request response:', isAvailable);
         if (isAvailable) {
           this.props.onUrlError(null);
         } else {
@@ -53,12 +52,12 @@ class PublishUrlInput extends React.Component {
   render () {
     return (
       <div>
-        <p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.props.urlError}</p>
+        <p id='input-error-claim-name' className='info-message-placeholder info-message--failure'>{this.props.urlError}</p>
-        <div className="column column--3 column--sml-10">
+        <div className='column column--3 column--sml-10'>
-          <label className="label">URL:</label>
+          <label className='label'>URL:</label>
-        </div><div className="column column--7 column--sml-10 input-text--primary span--relative">
+        </div><div className='column column--7 column--sml-10 input-text--primary span--relative'>
 
-          <span className="url-text--secondary">spee.ch / </span>
+          <span className='url-text--secondary'>spee.ch / </span>
 
           <UrlMiddle
             publishInChannel={this.props.publishInChannel}
@@ -67,9 +66,9 @@ class PublishUrlInput extends React.Component {
             loggedInChannelShortId={this.props.loggedInChannelShortId}
           />
 
-          <input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
+          <input type='text' id='claim-name-input' className='input-text' name='claim' placeholder='your-url-here' onChange={this.handleInput} value={this.props.claim} />
-          { (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
+          { (this.props.claim && !this.props.urlError) && <span id='input-success-claim-name' className='info-message--success span--absolute'>{'\u2713'}</span> }
-          { this.props.urlError && <span id="input-success-channel-name" className="info-message--failure span--absolute">{'\u2716'}</span> }
+          { this.props.urlError && <span id='input-success-channel-name' className='info-message--failure span--absolute'>{'\u2716'}</span> }
         </div>
       </div>
     );

react/reducers/publish.js

@@ -35,7 +35,7 @@ const initialState = {
 export default function (state = initialState, action) {
   switch (action.type) {
     case actions.FILE_SELECTED:
-      return Object.assign({}, state, {
+      return Object.assign({}, initialState, {  // note: clears to initial state
         file: action.data,
       });
     case actions.FILE_CLEAR: