Properly handle thumbnail field in publish/edit upload/collection.

ui/component/collectionEdit/index.js

@@ -23,6 +23,7 @@ import CollectionForm from './view';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
 import { doCollectionEdit } from 'redux/actions/collections';
+import { doResetThumbnailStatus } from 'redux/actions/publish';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
@@ -52,6 +53,7 @@ const perform = (dispatch, ownProps) => ({
   setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
   setIncognito: (incognito) => dispatch(doSetIncognito(incognito)),
   doCollectionEdit: (params) => dispatch(doCollectionEdit(ownProps.collectionId, params)),
+  resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
 });
 
 export default connect(select, perform)(CollectionForm);

ui/component/collectionEdit/view.jsx

@@ -58,6 +58,7 @@ type Props = {
   setActiveChannel: (string) => void,
   setIncognito: (boolean) => void,
   doCollectionEdit: (CollectionEditParams) => void,
+  resetThumbnailStatus: () => void,
 };
 
 function CollectionForm(props: Props) {
@@ -92,6 +93,7 @@ function CollectionForm(props: Props) {
     setIncognito,
     onDone,
     doCollectionEdit,
+    resetThumbnailStatus,
   } = props;
   const activeChannelName = activeChannelClaim && activeChannelClaim.name;
   let prefix = 'lbry://';
@@ -158,7 +160,7 @@ function CollectionForm(props: Props) {
   }
 
   function handleUpdateThumbnail(update: { [string]: string }) {
-    if (update.thumbnail_url) {
+    if (update.thumbnail_url !== undefined) {
       setParam(update);
     } else if (update.thumbnail_status) {
       setThumbStatus(update.thumbnail_status);
@@ -309,6 +311,10 @@ function CollectionForm(props: Props) {
     }
   }, [uri, hasClaim]);
 
+  React.useEffect(() => {
+    resetThumbnailStatus();
+  }, [resetThumbnailStatus]);
+
   return (
     <>
       <div className={classnames('main--contained', { 'card--disabled': disabled })}>
@@ -358,8 +364,8 @@ function CollectionForm(props: Props) {
                       />
                       <fieldset-section>
                         <SelectThumbnail
-                          thumbnailParam={params.thumbnail_url}
-                          thumbnailParamError={thumbError}
+                          thumbnail={params.thumbnail_url}
+                          thumbnailError={thumbError}
                           thumbnailParamStatus={thumbStatus}
                           updateThumbnailParams={handleUpdateThumbnail}
                           usePublishFormMode

ui/component/selectThumbnail/index.js

@@ -5,11 +5,15 @@ import { doUpdatePublishForm, doResetThumbnailStatus } from 'redux/actions/publi
 import { doOpenModal } from 'redux/actions/app';
 import PublishPage from './view';
 
-const select = (state) => ({
-  ...selectPublishFormValues(state),
-  fileInfos: selectFileInfosByOutpoint(state),
-  myClaimForUri: selectMyClaimForUri(state),
-});
+const select = (state, props) => {
+  const publishFormFields = selectPublishFormValues(state);
+  return {
+    ...publishFormFields,
+    thumbnail: props.thumbnail || publishFormFields.thumbnail,
+    fileInfos: selectFileInfosByOutpoint(state),
+    myClaimForUri: selectMyClaimForUri(state),
+  };
+};
 
 const perform = (dispatch) => ({
   updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),

ui/component/selectThumbnail/view.jsx

@@ -69,10 +69,10 @@ function SelectThumbnail(props: Props) {
 
   function handleThumbnailChange(e: SyntheticInputEvent<*>) {
     const newThumbnail = e.target.value.replace(' ', '');
-
     if (updateThumbnailParams) {
       updateThumbnailParams({ thumbnail_url: newThumbnail });
-    } else {
+    }
+    if (updatePublishForm) {
       updatePublishForm({ thumbnail: newThumbnail });
     }
   }
@@ -108,16 +108,22 @@ function SelectThumbnail(props: Props) {
         style={{ display: 'none' }}
         src={thumbnail}
         alt={__('Thumbnail Preview')}
-        onError={() =>
-          publishForm
-            ? updatePublishForm({ thumbnailError: true })
-            : updateThumbnailParams({ thumbnail_error: Boolean(thumbnail) })
-        }
-        onLoad={() =>
-          publishForm
-            ? updatePublishForm({ thumbnailError: !isUrlInput })
-            : updateThumbnailParams({ thumbnail_error: !isUrlInput })
-        }
+        onError={() => {
+          if (updateThumbnailParams) {
+            updateThumbnailParams({ thumbnail_error: Boolean(thumbnail) });
+          }
+          if (publishForm) {
+            updatePublishForm({ thumbnailError: true });
+          }
+        }}
+        onLoad={() => {
+          if (updateThumbnailParams) {
+            updateThumbnailParams({ thumbnail_error: !isUrlInput });
+          }
+          if (publishForm) {
+            updatePublishForm({ thumbnailError: !isUrlInput });
+          }
+        }}
       />
     </div>
   );
@@ -157,7 +163,7 @@ function SelectThumbnail(props: Props) {
                     onFileChosen={(file) =>
                       openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, {
                         file,
-                        cb: (url) => !publishForm && updateThumbnailParams({ thumbnail_url: url }),
+                        cb: (url) => updateThumbnailParams && updateThumbnailParams({ thumbnail_url: url }),
                       })
                     }
                   />