diff --git a/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx b/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx index 4690ce1e91b..ab834c01675 100644 --- a/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx +++ b/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { useCallback, useState } from 'react' import { useCollection, useUser } from '@audius/common/api' import { FollowSource } from '@audius/common/models' @@ -7,6 +7,7 @@ import { IconButton, IconKebabHorizontal } from '@audius/harmony' import { pick } from 'lodash' import { useDispatch } from 'react-redux' +import { DeleteCollectionConfirmationModal } from 'components/edit-collection/DeleteCollectionConfirmationModal' import { CollectionMenuProps } from 'components/menu/CollectionMenu' import Menu from 'components/menu/Menu' @@ -36,7 +37,8 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => { 'playlist_owner_id', 'has_current_user_saved', 'permalink', - 'access' + 'access', + 'ddex_app' ) }) const dispatch = useDispatch() @@ -48,9 +50,13 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => { playlist_owner_id, has_current_user_saved, permalink, - access + access, + ddex_app } = partialCollection ?? {} + const [isDeleteConfirmationOpen, setIsDeleteConfirmationOpen] = + useState(false) + const { data: owner } = useUser(playlist_owner_id) const isFollowing = owner?.does_current_user_follow const hasStreamAccess = access?.stream @@ -81,28 +87,38 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => { isFavorited: has_current_user_saved, mount: 'page', isOwner, + ddexApp: ddex_app, + includeDelete: isOwner && !ddex_app, includeEmbed: !is_private && !is_stream_gated, includeFavorite: hasStreamAccess, includeRepost: hasStreamAccess, includeShare: true, includeVisitPage: false, isPublic: !is_private, + onDelete: () => setIsDeleteConfirmationOpen(true), extraMenuItems, permalink } as unknown as CollectionMenuProps return ( - - {(ref, triggerPopup) => ( - triggerPopup()} - color='subdued' - /> - )} - + <> + + {(ref, triggerPopup) => ( + triggerPopup()} + color='subdued' + /> + )} + + setIsDeleteConfirmationOpen(false)} + /> + ) } diff --git a/packages/web/src/components/menu/CollectionMenu.tsx b/packages/web/src/components/menu/CollectionMenu.tsx index 98ad1ba3264..ac7b67058f8 100644 --- a/packages/web/src/components/menu/CollectionMenu.tsx +++ b/packages/web/src/components/menu/CollectionMenu.tsx @@ -35,6 +35,7 @@ export type OwnProps = { children: (items: PopupMenuItem[]) => JSX.Element extraMenuItems?: PopupMenuItem[] handle: string + includeDelete?: boolean includeEdit?: boolean includeEmbed?: boolean includeFavorite?: boolean @@ -49,6 +50,7 @@ export type OwnProps = { isPublic?: boolean isReposted?: boolean onClose?: () => void + onDelete?: () => void onRepost?: () => void onShare?: () => void playlistId: PlaylistId @@ -88,12 +90,14 @@ const CollectionMenu = ({ ddexApp, playlistId, isOwner, + includeDelete, includeEdit, includeShare, includeRepost, includeEmbed, includeVisitArtistPage = true, isPublic, + onDelete, onShare, goToRoute, openEmbedModal, @@ -250,6 +254,12 @@ const CollectionMenu = ({ if (includeEdit && isOwner && !ddexApp) { menu.items.push(editCollectionMenuItem) } + if (includeDelete && isOwner && !ddexApp) { + menu.items.push({ + text: `Delete ${typeName}`, + onClick: () => onDelete?.() + }) + } return menu }