From 4c6114a466d45b24b3dc7686e8f352fa52594de6 Mon Sep 17 00:00:00 2001
From: miko <34790748+keikari@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:29:32 +0200
Subject: [PATCH] Fix attempt - Removal of deleted content from private list
 (#3030)

* Improve deleted content interaction in private list

* Don't show 3-dot menu on hidden content

---------

Co-authored-by: miko <sauce47@posteo.net>
---
 ui/component/claimMenuList/index.js |   8 +-
 ui/component/claimMenuList/view.jsx | 376 +++++++++++++++-------------
 ui/component/claimPreview/view.jsx  |  26 +-
 3 files changed, 224 insertions(+), 186 deletions(-)

diff --git a/ui/component/claimMenuList/index.js b/ui/component/claimMenuList/index.js
index 3b373ae72f..e6844d8d02 100644
--- a/ui/component/claimMenuList/index.js
+++ b/ui/component/claimMenuList/index.js
@@ -40,7 +40,13 @@ import ClaimPreview from './view';
 
 const select = (state, props) => {
   const { uri } = props;
-  const claim = selectClaimForUri(state, uri, false);
+  // This is used to handle deleted content in lists
+  const placeholderForDeletedClaim = {
+    canonical_url: uri,
+    permanent_url: uri,
+    value_type: 'deleted',
+  };
+  const claim = selectClaimForUri(state, uri, false) || placeholderForDeletedClaim;
   const collectionId = props.collectionId;
   const repostedClaim = claim?.reposted_claim;
   const isRepost = Boolean(claim?.reposted_claim || claim?.value?.claim_hash);
diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx
index b6fa219155..d8d1c3c8d1 100644
--- a/ui/component/claimMenuList/view.jsx
+++ b/ui/component/claimMenuList/view.jsx
@@ -30,7 +30,7 @@ type SubscriptionArgs = {
 
 type Props = {
   uri: string,
-  claim: ?Claim,
+  claim: Claim,
   isRepost: boolean,
   contentClaim: ?Claim,
   contentSigningChannel: ?Claim,
@@ -141,7 +141,7 @@ function ClaimMenuList(props: Props) {
     ? __('Unfollow')
     : __('Follow');
 
-  if (!claim) {
+  if (claim.value_type === 'deleted' && !collectionId) {
     return null;
   }
 
@@ -406,211 +406,231 @@ function ClaimMenuList(props: Props) {
         <Icon size={20} icon={ICONS.MORE_VERTICAL} />
       </MenuButton>
       <MenuList className="menu__list">
-        {/* FYP */}
-        {fypId && (
-          <>
-            <MenuItem className="comment__menu-option" onSelect={() => doRemovePersonalRecommendation(uri)}>
-              <div className="menu__link">
-                <Icon aria-hidden icon={ICONS.REMOVE} />
-                {__('Not interested')}
-              </div>
-            </MenuItem>
-            <hr className="menu__separator" />
-          </>
-        )}
-
-        <>
-          {/* COLLECTION OPERATIONS */}
-          {collectionId && isCollectionClaim ? (
+        {claim.value_type === 'deleted' && collectionId ? (
+          <AddToCollectionContext />
+        ) : (
+          claim.value_type !== 'deleted' && (
             <>
-              <MenuItem className="comment__menu-option" onSelect={() => push(`/$/${PAGES.PLAYLIST}/${collectionId}`)}>
-                <a className="menu__link" href={`/$/${PAGES.PLAYLIST}/${collectionId}`}>
-                  <Icon aria-hidden icon={ICONS.VIEW} />
-                  {__('View Playlist')}
-                </a>
-              </MenuItem>
-              {!collectionEmpty && (
-                <MenuItem className="comment__menu-option" onSelect={() => doEnableCollectionShuffle({ collectionId })}>
-                  <div className="menu__link">
-                    <Icon aria-hidden icon={ICONS.SHUFFLE} />
-                    {__('Shuffle Play')}
-                  </div>
-                </MenuItem>
-              )}
-              {isMyCollection && (
+              {/* FYP */}
+              {fypId && (
                 <>
-                  {!collectionEmpty && (
-                    <MenuItem
-                      className="comment__menu-option"
-                      onSelect={() =>
-                        push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.PUBLISH}`)
-                      }
-                    >
-                      <div className="menu__link">
-                        <Icon aria-hidden iconColor={'red'} icon={ICONS.PUBLISH} />
-                        {hasEdits ? __('Publish') : __('Update')}
-                      </div>
-                    </MenuItem>
-                  )}
-                  <MenuItem
-                    className="comment__menu-option"
-                    onSelect={() => push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.EDIT}`)}
-                  >
-                    <div className="menu__link">
-                      <Icon aria-hidden icon={ICONS.EDIT} />
-                      {__('Edit')}
-                    </div>
-                  </MenuItem>
-                  <MenuItem
-                    className="comment__menu-option"
-                    onSelect={() => openModal(MODALS.COLLECTION_DELETE, { collectionId })}
-                  >
+                  <MenuItem className="comment__menu-option" onSelect={() => doRemovePersonalRecommendation(uri)}>
                     <div className="menu__link">
-                      <Icon aria-hidden icon={ICONS.DELETE} />
-                      {__('Delete Playlist')}
+                      <Icon aria-hidden icon={ICONS.REMOVE} />
+                      {__('Not interested')}
                     </div>
                   </MenuItem>
+                  <hr className="menu__separator" />
                 </>
               )}
-            </>
-          ) : (
-            <AddToCollectionContext />
-          )}
-        </>
-
-        {contentClaim && isContentProtectedAndLocked && !claimIsMine && (
-          <MenuItem
-            className="comment__menu-option"
-            onSelect={() =>
-              openModal(MODALS.JOIN_MEMBERSHIP, { uri, fileUri: contentClaim.permanent_url, shouldNavigate: true })
-            }
-          >
-            <div className="menu__link">
-              <Icon aria-hidden icon={ICONS.MEMBERSHIP} />
-              {__('Join')}
-            </div>
-          </MenuItem>
-        )}
 
-        {isAuthenticated && (
-          <>
-            {!isChannelPage && (
               <>
-                <MenuItem className="comment__menu-option" onSelect={handleSupport}>
-                  <div className="menu__link">
-                    <Icon aria-hidden icon={ICONS.LBC} />
-                    {__('Support --[button to support a claim]--')}
-                  </div>
-                </MenuItem>
+                {/* COLLECTION OPERATIONS */}
+                {collectionId && isCollectionClaim ? (
+                  <>
+                    <MenuItem
+                      className="comment__menu-option"
+                      onSelect={() => push(`/$/${PAGES.PLAYLIST}/${collectionId}`)}
+                    >
+                      <a className="menu__link" href={`/$/${PAGES.PLAYLIST}/${collectionId}`}>
+                        <Icon aria-hidden icon={ICONS.VIEW} />
+                        {__('View Playlist')}
+                      </a>
+                    </MenuItem>
+                    {!collectionEmpty && (
+                      <MenuItem
+                        className="comment__menu-option"
+                        onSelect={() => doEnableCollectionShuffle({ collectionId })}
+                      >
+                        <div className="menu__link">
+                          <Icon aria-hidden icon={ICONS.SHUFFLE} />
+                          {__('Shuffle Play')}
+                        </div>
+                      </MenuItem>
+                    )}
+                    {isMyCollection && (
+                      <>
+                        {!collectionEmpty && (
+                          <MenuItem
+                            className="comment__menu-option"
+                            onSelect={() =>
+                              push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.PUBLISH}`)
+                            }
+                          >
+                            <div className="menu__link">
+                              <Icon aria-hidden iconColor={'red'} icon={ICONS.PUBLISH} />
+                              {hasEdits ? __('Publish') : __('Update')}
+                            </div>
+                          </MenuItem>
+                        )}
+                        <MenuItem
+                          className="comment__menu-option"
+                          onSelect={() =>
+                            push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.EDIT}`)
+                          }
+                        >
+                          <div className="menu__link">
+                            <Icon aria-hidden icon={ICONS.EDIT} />
+                            {__('Edit')}
+                          </div>
+                        </MenuItem>
+                        <MenuItem
+                          className="comment__menu-option"
+                          onSelect={() => openModal(MODALS.COLLECTION_DELETE, { collectionId })}
+                        >
+                          <div className="menu__link">
+                            <Icon aria-hidden icon={ICONS.DELETE} />
+                            {__('Delete Playlist')}
+                          </div>
+                        </MenuItem>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <AddToCollectionContext />
+                )}
               </>
-            )}
 
-            {!incognitoClaim && !claimIsMine && !isChannelPage && (
-              <>
-                <hr className="menu__separator" />
-                <MenuItem className="comment__menu-option" onSelect={handleFollow}>
+              {contentClaim && isContentProtectedAndLocked && !claimIsMine && (
+                <MenuItem
+                  className="comment__menu-option"
+                  onSelect={() =>
+                    openModal(MODALS.JOIN_MEMBERSHIP, {
+                      uri,
+                      fileUri: contentClaim.permanent_url,
+                      shouldNavigate: true,
+                    })
+                  }
+                >
                   <div className="menu__link">
-                    <Icon aria-hidden icon={ICONS.SUBSCRIBE} />
-                    {subscriptionLabel}
+                    <Icon aria-hidden icon={ICONS.MEMBERSHIP} />
+                    {__('Join')}
                   </div>
                 </MenuItem>
-              </>
-            )}
+              )}
 
-            {!isMyCollection && (
-              <>
-                {(!claimIsMine || channelIsBlocked) && contentChannelUri ? (
-                  !incognitoClaim && (
+              {isAuthenticated && (
+                <>
+                  {!isChannelPage && (
                     <>
-                      <MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
+                      <MenuItem className="comment__menu-option" onSelect={handleSupport}>
                         <div className="menu__link">
-                          <Icon aria-hidden icon={ICONS.BLOCK} />
-                          {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
+                          <Icon aria-hidden icon={ICONS.LBC} />
+                          {__('Support --[button to support a claim]--')}
                         </div>
                       </MenuItem>
+                    </>
+                  )}
 
-                      {isAdmin && (
-                        <MenuItem className="comment__menu-option" onSelect={handleToggleAdminBlock}>
+                  {!incognitoClaim && !claimIsMine && !isChannelPage && (
+                    <>
+                      <hr className="menu__separator" />
+                      <MenuItem className="comment__menu-option" onSelect={handleFollow}>
+                        <div className="menu__link">
+                          <Icon aria-hidden icon={ICONS.SUBSCRIBE} />
+                          {subscriptionLabel}
+                        </div>
+                      </MenuItem>
+                    </>
+                  )}
+
+                  {!isMyCollection && (
+                    <>
+                      {(!claimIsMine || channelIsBlocked) && contentChannelUri ? (
+                        !incognitoClaim && (
+                          <>
+                            <MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
+                              <div className="menu__link">
+                                <Icon aria-hidden icon={ICONS.BLOCK} />
+                                {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
+                              </div>
+                            </MenuItem>
+
+                            {isAdmin && (
+                              <MenuItem className="comment__menu-option" onSelect={handleToggleAdminBlock}>
+                                <div className="menu__link">
+                                  <Icon aria-hidden icon={ICONS.GLOBE} />
+                                  {channelIsAdminBlocked ? __('Global Unblock Channel') : __('Global Block Channel')}
+                                </div>
+                              </MenuItem>
+                            )}
+
+                            <MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
+                              <div className="menu__link">
+                                <Icon aria-hidden icon={ICONS.MUTE} />
+                                {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
+                              </div>
+                            </MenuItem>
+                          </>
+                        )
+                      ) : (
+                        <>
+                          {/* claimIsMine && (
+                        <MenuItem className="comment__menu-option" onSelect={handleFeature}>
                           <div className="menu__link">
-                            <Icon aria-hidden icon={ICONS.GLOBE} />
-                            {channelIsAdminBlocked ? __('Global Unblock Channel') : __('Global Block Channel')}
+                            <Icon aria-hidden icon={ICONS.HOME} />
+                            {__('Feature')}
                           </div>
                         </MenuItem>
+                      ) */}
+                          {!isRepost && (
+                            <MenuItem className="comment__menu-option" onSelect={handleEdit}>
+                              <div className="menu__link">
+                                <Icon aria-hidden icon={ICONS.EDIT} />
+                                {__('Edit')}
+                              </div>
+                            </MenuItem>
+                          )}
+                        </>
                       )}
 
-                      <MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
-                        <div className="menu__link">
-                          <Icon aria-hidden icon={ICONS.MUTE} />
-                          {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
-                        </div>
-                      </MenuItem>
+                      {showDelete && (
+                        <MenuItem className="comment__menu-option" onSelect={handleDelete}>
+                          <div className="menu__link">
+                            <Icon aria-hidden icon={ICONS.DELETE} />
+                            {__('Delete')}
+                          </div>
+                        </MenuItem>
+                      )}
                     </>
-                  )
-                ) : (
-                  <>
-                    {/* claimIsMine && (
-                      <MenuItem className="comment__menu-option" onSelect={handleFeature}>
-                        <div className="menu__link">
-                          <Icon aria-hidden icon={ICONS.HOME} />
-                          {__('Feature')}
-                        </div>
-                      </MenuItem>
-                    ) */}
-                    {!isRepost && (
-                      <MenuItem className="comment__menu-option" onSelect={handleEdit}>
-                        <div className="menu__link">
-                          <Icon aria-hidden icon={ICONS.EDIT} />
-                          {__('Edit')}
-                        </div>
-                      </MenuItem>
-                    )}
-                  </>
-                )}
-
-                {showDelete && (
-                  <MenuItem className="comment__menu-option" onSelect={handleDelete}>
-                    <div className="menu__link">
-                      <Icon aria-hidden icon={ICONS.DELETE} />
-                      {__('Delete')}
-                    </div>
-                  </MenuItem>
-                )}
-              </>
-            )}
-            <hr className="menu__separator" />
-          </>
-        )}
+                  )}
+                  <hr className="menu__separator" />
+                </>
+              )}
 
-        <MenuItem className="comment__menu-option" onSelect={handleCopyLink}>
-          <div className="menu__link">
-            <Icon aria-hidden icon={ICONS.COPY_LINK} />
-            {__('Copy Link')}
-          </div>
-        </MenuItem>
+              <MenuItem className="comment__menu-option" onSelect={handleCopyLink}>
+                <div className="menu__link">
+                  <Icon aria-hidden icon={ICONS.COPY_LINK} />
+                  {__('Copy Link')}
+                </div>
+              </MenuItem>
 
-        {isChannelPage && IS_WEB && rssUrl && (
-          <MenuItem className="comment__menu-option" onSelect={handleCopyRssLink}>
-            <div className="menu__link">
-              <Icon aria-hidden icon={ICONS.RSS} />
-              {__('Copy RSS URL')}
-            </div>
-          </MenuItem>
-        )}
+              {isChannelPage && IS_WEB && rssUrl && (
+                <MenuItem className="comment__menu-option" onSelect={handleCopyRssLink}>
+                  <div className="menu__link">
+                    <Icon aria-hidden icon={ICONS.RSS} />
+                    {__('Copy RSS URL')}
+                  </div>
+                </MenuItem>
+              )}
 
-        {!claimIsMine && !isMyCollection && (
-          <MenuItem
-            className="comment__menu-option"
-            onSelect={isEmbed ? (e) => e.preventDefault() : handleReportContent}
-          >
-            <NavLink
-              className="menu__link"
-              to={{ pathname: contentClaim ? `/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim.claim_id}` : '' }}
-              target={isEmbed && '_blank'}
-            >
-              <Icon aria-hidden icon={ICONS.REPORT} />
-              {__('Report Content')}
-            </NavLink>
-          </MenuItem>
+              {!claimIsMine && !isMyCollection && (
+                <MenuItem
+                  className="comment__menu-option"
+                  onSelect={isEmbed ? (e) => e.preventDefault() : handleReportContent}
+                >
+                  <NavLink
+                    className="menu__link"
+                    to={{ pathname: contentClaim ? `/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim.claim_id}` : '' }}
+                    target={isEmbed && '_blank'}
+                  >
+                    <Icon aria-hidden icon={ICONS.REPORT} />
+                    {__('Report Content')}
+                  </NavLink>
+                </MenuItem>
+              )}
+            </>
+          )
         )}
       </MenuList>
     </Menu>
diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index d5998654cc..675b12ad28 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -401,13 +401,25 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
   if ((claim && showNullPlaceholder && shouldHide) || (!claim && playlistPreviewItem)) {
     return (
-      <ClaimPreviewHidden
-        message={!claim && playlistPreviewItem ? __('Deleted content') : __('This content is hidden')}
-        isChannel={isChannelUri}
-        type={type}
-        uri={uri}
-        collectionId={!claim && playlistPreviewItem && collectionId ? collectionId : undefined}
-      />
+      <WrapperElement
+        ref={ref}
+        className={classnames('claim-preview__wrapper', {
+          'claim-preview__wrapper--row': !type,
+          'claim-preview__wrapper--inline': type === 'inline',
+          'claim-preview__wrapper--playlist-row': type === 'small' && collectionId,
+          'claim-preview__wrapper--active': active,
+          'non-clickable': !playlistPreviewItem || nonClickable,
+        })}
+      >
+        <ClaimPreviewHidden
+          message={!claim && playlistPreviewItem ? __('Deleted content') : __('This content is hidden')}
+          isChannel={isChannelUri}
+          type={type}
+          uri={uri}
+          collectionId={!claim && playlistPreviewItem && collectionId ? collectionId : undefined}
+        />
+        {playlistPreviewItem && !hideMenu && <ClaimMenuList uri={uri} collectionId={collectionId} />}
+      </WrapperElement>
     );
   }