From 02e4b651af87f61b2f8ce44c12427b29ed749bb7 Mon Sep 17 00:00:00 2001
From: Franco Montenegro <franco.montenegro.ruke@gmail.com>
Date: Fri, 29 Apr 2022 16:22:12 -0300
Subject: [PATCH] Properly handle thumbnail field in publish/edit
 upload/collection.

---
 ui/component/collectionEdit/index.js  |  2 ++
 ui/component/collectionEdit/view.jsx  | 12 +++++++---
 ui/component/selectThumbnail/index.js | 14 +++++++-----
 ui/component/selectThumbnail/view.jsx | 32 ++++++++++++++++-----------
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/ui/component/collectionEdit/index.js b/ui/component/collectionEdit/index.js
index 1f0fb52c8..dcda3c8ab 100644
--- a/ui/component/collectionEdit/index.js
+++ b/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);
diff --git a/ui/component/collectionEdit/view.jsx b/ui/component/collectionEdit/view.jsx
index 97f2bf7b1..8976fa97f 100644
--- a/ui/component/collectionEdit/view.jsx
+++ b/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
diff --git a/ui/component/selectThumbnail/index.js b/ui/component/selectThumbnail/index.js
index 9170755aa..43204fb5d 100644
--- a/ui/component/selectThumbnail/index.js
+++ b/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)),
diff --git a/ui/component/selectThumbnail/view.jsx b/ui/component/selectThumbnail/view.jsx
index 5690988fc..8998272ae 100644
--- a/ui/component/selectThumbnail/view.jsx
+++ b/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 }),
                       })
                     }
                   />