From 7b89db17bc6e0c47837cf65f5a986931e7336383 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Tue, 1 Feb 2022 17:23:48 -0300
Subject: [PATCH] Refactor fileDescription

- user was unused
- only pass needed claim props
---
 ui/component/fileDescription/index.js | 30 ++++++++++-----
 ui/component/fileDescription/view.jsx | 54 ++++++++++-----------------
 ui/scss/component/_media.scss         |  5 ++-
 3 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/ui/component/fileDescription/index.js b/ui/component/fileDescription/index.js
index 14a801bbd..217b386e0 100644
--- a/ui/component/fileDescription/index.js
+++ b/ui/component/fileDescription/index.js
@@ -1,22 +1,34 @@
 import { connect } from 'react-redux';
-import { selectClaimForUri, makeSelectMetadataForUri, selectClaimIsMine } from 'redux/selectors/claims';
+import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
 import { makeSelectPendingAmountByUri } from 'redux/selectors/wallet';
 import { doOpenModal } from 'redux/actions/app';
-import { selectUser } from 'redux/selectors/user';
 import FileDescription from './view';
+import { getClaimMetadata } from 'util/claim';
 
 const select = (state, props) => {
-  const claim = selectClaimForUri(state, props.uri);
+  const { uri } = props;
+
+  const pendingAmount = makeSelectPendingAmountByUri(uri)(state);
+
+  const claim = selectClaimForUri(state, uri);
+  const metadata = getClaimMetadata(claim);
+  const description = metadata && metadata.description;
+  const amount = claim ? parseFloat(claim.amount) + parseFloat(pendingAmount || claim.meta.support_amount) : 0;
+  const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0;
+
+  const isEmpty = !claim || !metadata;
 
   return {
-    claim,
     claimIsMine: selectClaimIsMine(state, claim),
-    metadata: makeSelectMetadataForUri(props.uri)(state),
-    user: selectUser(state),
-    pendingAmount: makeSelectPendingAmountByUri(props.uri)(state),
+    description,
+    amount,
+    hasSupport,
+    isEmpty,
   };
 };
 
-export default connect(select, {
+const perform = {
   doOpenModal,
-})(FileDescription);
+};
+
+export default connect(select, perform)(FileDescription);
diff --git a/ui/component/fileDescription/view.jsx b/ui/component/fileDescription/view.jsx
index 05310ea39..83b38fbd8 100644
--- a/ui/component/fileDescription/view.jsx
+++ b/ui/component/fileDescription/view.jsx
@@ -13,36 +13,35 @@ import FileValues from 'component/fileValues';
 
 type Props = {
   uri: string,
-  claim: StreamClaim,
-  metadata: StreamMetadata,
-  user: ?any,
+  expandOverride: boolean,
+  // redux
+  description?: string,
+  amount: number,
+  hasSupport?: boolean,
+  isEmpty: boolean,
+  claimIsMine: boolean,
   pendingAmount: number,
   doOpenModal: (id: string, {}) => void,
-  claimIsMine: boolean,
-  expandOverride: boolean,
 };
 
-function FileDescription(props: Props) {
-  const { uri, claim, metadata, pendingAmount, doOpenModal, claimIsMine, expandOverride } = props;
+export default function FileDescription(props: Props) {
+  const { uri, description, amount, hasSupport, isEmpty, doOpenModal, claimIsMine, expandOverride } = props;
+
   const [expanded, setExpanded] = React.useState(false);
   const [showCreditDetails, setShowCreditDetails] = React.useState(false);
-  const amount = parseFloat(claim.amount) + parseFloat(pendingAmount || claim.meta.support_amount);
-  const formattedAmount = formatCredits(amount, 2, true);
-  const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0;
 
-  if (!claim || !metadata) {
+  const formattedAmount = formatCredits(amount, 2, true);
+
+  if (isEmpty) {
     return <span className="empty">{__('Empty claim or metadata info.')}</span>;
   }
 
-  const { description } = metadata;
-
   return (
-    <div>
+    <>
       <div
         className={classnames({
-          'media__info-text--contracted': !expanded && !expandOverride,
+          'media__info-text--contracted media__info-text--fade': !expanded && !expandOverride,
           'media__info-text--expanded': expanded,
-          'media__info-text--fade': !expanded && !expandOverride,
         })}
       >
         {description && <MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />}
@@ -52,13 +51,7 @@ function FileDescription(props: Props) {
 
       <div className="card__bottom-actions">
         {!expandOverride && (
-          <>
-            {expanded ? (
-              <Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
-            ) : (
-              <Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
-            )}
-          </>
+          <Button button="link" label={expanded ? __('Less') : __('More')} onClick={() => setExpanded(!expanded)} />
         )}
 
         <div className="section__actions--no-margin">
@@ -68,24 +61,17 @@ function FileDescription(props: Props) {
               className="expandable__button"
               icon={ICONS.UNLOCK}
               aria-label={__('Unlock tips')}
-              onClick={() => {
-                doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
-              }}
+              onClick={() => doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri })}
             />
           )}
+
           <Button button="link" onClick={() => setShowCreditDetails(!showCreditDetails)}>
             <LbcSymbol postfix={showCreditDetails ? __('Hide') : formattedAmount} />
           </Button>
         </div>
       </div>
 
-      {showCreditDetails && (
-        <div className="section">
-          <FileValues uri={uri} />
-        </div>
-      )}
-    </div>
+      {showCreditDetails && <FileValues uri={uri} />}
+    </>
   );
 }
-
-export default FileDescription;
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 7ec11ef6d..b50677c92 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -90,8 +90,11 @@
 }
 
 .media__info-text--fade {
-  -webkit-mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
   overflow-wrap: anywhere;
+
+  // both needed for compatibility
+  -webkit-mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+  mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
 }
 
 .media__info-expand {