feat(web): add delete option to collection page overflow menu

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 (
-    <Menu menu={overflowMenu}>
-      {(ref, triggerPopup) => (
-        <IconButton
-          ref={ref}
-          aria-label={messages.moreOptions}
-          size='2xl'
-          icon={IconKebabHorizontal}
-          onClick={() => triggerPopup()}
-          color='subdued'
-        />
-      )}
-    </Menu>
+    <>
+      <Menu menu={overflowMenu}>
+        {(ref, triggerPopup) => (
+          <IconButton
+            ref={ref}
+            aria-label={messages.moreOptions}
+            size='2xl'
+            icon={IconKebabHorizontal}
+            onClick={() => triggerPopup()}
+            color='subdued'
+          />
+        )}
+      </Menu>
+      <DeleteCollectionConfirmationModal
+        collectionId={collectionId}
+        visible={isDeleteConfirmationOpen}
+        onCancel={() => setIsDeleteConfirmationOpen(false)}
+      />
+    </>
   )
 }

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
   }