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) { - {/* FYP */} - {fypId && ( - <> - doRemovePersonalRecommendation(uri)}> - - - {__('Not interested')} - - - - > - )} - - <> - {/* COLLECTION OPERATIONS */} - {collectionId && isCollectionClaim ? ( + {claim.value_type === 'deleted' && collectionId ? ( + + ) : ( + claim.value_type !== 'deleted' && ( <> - push(`/$/${PAGES.PLAYLIST}/${collectionId}`)}> - - - {__('View Playlist')} - - - {!collectionEmpty && ( - doEnableCollectionShuffle({ collectionId })}> - - - {__('Shuffle Play')} - - - )} - {isMyCollection && ( + {/* FYP */} + {fypId && ( <> - {!collectionEmpty && ( - - push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.PUBLISH}`) - } - > - - - {hasEdits ? __('Publish') : __('Update')} - - - )} - push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.EDIT}`)} - > - - - {__('Edit')} - - - openModal(MODALS.COLLECTION_DELETE, { collectionId })} - > + doRemovePersonalRecommendation(uri)}> - - {__('Delete Playlist')} + + {__('Not interested')} + > )} - > - ) : ( - - )} - > - - {contentClaim && isContentProtectedAndLocked && !claimIsMine && ( - - openModal(MODALS.JOIN_MEMBERSHIP, { uri, fileUri: contentClaim.permanent_url, shouldNavigate: true }) - } - > - - - {__('Join')} - - - )} - {isAuthenticated && ( - <> - {!isChannelPage && ( <> - - - - {__('Support --[button to support a claim]--')} - - + {/* COLLECTION OPERATIONS */} + {collectionId && isCollectionClaim ? ( + <> + push(`/$/${PAGES.PLAYLIST}/${collectionId}`)} + > + + + {__('View Playlist')} + + + {!collectionEmpty && ( + doEnableCollectionShuffle({ collectionId })} + > + + + {__('Shuffle Play')} + + + )} + {isMyCollection && ( + <> + {!collectionEmpty && ( + + push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.PUBLISH}`) + } + > + + + {hasEdits ? __('Publish') : __('Update')} + + + )} + + push(`/$/${PAGES.PLAYLIST}/${collectionId}?${CP.QUERIES.VIEW}=${CP.VIEWS.EDIT}`) + } + > + + + {__('Edit')} + + + openModal(MODALS.COLLECTION_DELETE, { collectionId })} + > + + + {__('Delete Playlist')} + + + > + )} + > + ) : ( + + )} > - )} - {!incognitoClaim && !claimIsMine && !isChannelPage && ( - <> - - + {contentClaim && isContentProtectedAndLocked && !claimIsMine && ( + + openModal(MODALS.JOIN_MEMBERSHIP, { + uri, + fileUri: contentClaim.permanent_url, + shouldNavigate: true, + }) + } + > - - {subscriptionLabel} + + {__('Join')} - > - )} + )} - {!isMyCollection && ( - <> - {(!claimIsMine || channelIsBlocked) && contentChannelUri ? ( - !incognitoClaim && ( + {isAuthenticated && ( + <> + {!isChannelPage && ( <> - + - - {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')} + + {__('Support --[button to support a claim]--')} + > + )} - {isAdmin && ( - + {!incognitoClaim && !claimIsMine && !isChannelPage && ( + <> + + + + + {subscriptionLabel} + + + > + )} + + {!isMyCollection && ( + <> + {(!claimIsMine || channelIsBlocked) && contentChannelUri ? ( + !incognitoClaim && ( + <> + + + + {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')} + + + + {isAdmin && ( + + + + {channelIsAdminBlocked ? __('Global Unblock Channel') : __('Global Block Channel')} + + + )} + + + + + {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')} + + + > + ) + ) : ( + <> + {/* claimIsMine && ( + - - {channelIsAdminBlocked ? __('Global Unblock Channel') : __('Global Block Channel')} + + {__('Feature')} + ) */} + {!isRepost && ( + + + + {__('Edit')} + + + )} + > )} - - - - {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')} - - + {showDelete && ( + + + + {__('Delete')} + + + )} > - ) - ) : ( - <> - {/* claimIsMine && ( - - - - {__('Feature')} - - - ) */} - {!isRepost && ( - - - - {__('Edit')} - - - )} - > - )} - - {showDelete && ( - - - - {__('Delete')} - - - )} - > - )} - - > - )} + )} + + > + )} - - - - {__('Copy Link')} - - + + + + {__('Copy Link')} + + - {isChannelPage && IS_WEB && rssUrl && ( - - - - {__('Copy RSS URL')} - - - )} + {isChannelPage && IS_WEB && rssUrl && ( + + + + {__('Copy RSS URL')} + + + )} - {!claimIsMine && !isMyCollection && ( - e.preventDefault() : handleReportContent} - > - - - {__('Report Content')} - - + {!claimIsMine && !isMyCollection && ( + e.preventDefault() : handleReportContent} + > + + + {__('Report Content')} + + + )} + > + ) )} 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((props: Props, ref: any) => { if ((claim && showNullPlaceholder && shouldHide) || (!claim && playlistPreviewItem)) { return ( - + + + {playlistPreviewItem && !hideMenu && } + ); }