[C-2968] Fix private collection action buttons (#3937)

AudiusProject · Aug 23, 2023 · 9f67e7b · 9f67e7b
1 parent 7ab7a38
commit 9f67e7b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx b/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx
@@ -23,6 +23,8 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
   ) as Collection
   const { track_count, is_private, is_album } = collection ?? {}
 
+  const isDisabled = track_count === 0
+
   return collection ? (
     <>
       <EditButton
@@ -31,7 +33,10 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
       />
       <ShareButton
         collectionId={collectionId}
-        disabled={track_count === 0}
+        disabled={isDisabled}
+        tooltipText={
+          isDisabled ? 'You can’t share an empty playlist.' : undefined
+        }
         widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
       />
       {is_private && !is_album ? (

diff --git a/packages/web/src/components/collection/desktop/ShareButton.tsx b/packages/web/src/components/collection/desktop/ShareButton.tsx
@@ -16,17 +16,17 @@ import { EntityActionButton } from '../../entity-page/EntityActionButton'
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
 
 const messages = {
-  share: 'Share',
-  emptyPlaylistTooltipText: 'You can’t share an empty playlist.'
+  share: 'Share'
 }
 
 type ShareButtonProps = Partial<ButtonProps> & {
   collectionId: SmartCollectionVariant | ID
   userId?: ID
+  tooltipText?: string
 }
 
 export const ShareButton = (props: ShareButtonProps) => {
-  const { collectionId, type, userId, ...other } = props
+  const { collectionId, type, userId, tooltipText, ...other } = props
   const dispatch = useDispatch()
 
   const handleShare = useCallback(() => {
@@ -64,8 +64,8 @@ export const ShareButton = (props: ShareButtonProps) => {
     />
   )
 
-  return other.disabled ? (
-    <Tooltip text={messages.emptyPlaylistTooltipText}>
+  return tooltipText ? (
+    <Tooltip text={tooltipText}>
       <span>{shareButtonElement}</span>
     </Tooltip>
   ) : (

diff --git a/packages/web/src/components/collection/desktop/ViewerActionButtons.tsx b/packages/web/src/components/collection/desktop/ViewerActionButtons.tsx
@@ -4,7 +4,6 @@ import {
   CommonState,
   ID
 } from '@audius/common'
-import { ButtonType } from '@audius/stems'
 import { useSelector } from 'react-redux'
 
 import { FavoriteButton } from './FavoriteButton'
@@ -24,23 +23,24 @@ export const ViewerActionButtons = (props: ViewerActionButtonsProps) => {
     getCollection(state, { id: collectionId })
   ) as Collection | null
 
-  const isEmptyPlaylist = !collection || collection.track_count === 0
+  const { track_count, is_private } = collection ?? {}
+  const isDisabled = !collection || track_count === 0 || is_private
 
   return (
     <>
       <ShareButton
+        disabled={isDisabled}
         collectionId={collectionId}
-        type={isEmptyPlaylist ? ButtonType.DISABLED : undefined}
         widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
       />
       <RepostButton
+        disabled={isDisabled}
         collectionId={collectionId}
-        type={isEmptyPlaylist ? ButtonType.DISABLED : undefined}
         widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
       />
       <FavoriteButton
+        disabled={isDisabled}
         collectionId={collectionId}
-        type={isEmptyPlaylist ? ButtonType.DISABLED : undefined}
         widthToHideText={BUTTON_COLLAPSE_WIDTHS.fourth}
       />
       <OverflowMenuButton collectionId={collectionId} />