[C-2852 PLAT-1094 PLAT-1093] Add fetch collection by permalink (#3751)

Co-authored-by: sabrina <[email protected]>

Author: dylanjeffers

packages/common/src/services/audius-api-client/ResponseAdapter.ts

@@ -370,7 +370,6 @@ export const makePlaylist = (
     track_count,
     total_play_count,
     playlist_contents: playlistContents,
-    permalink: 'response-adapter-permalink',
 
     // Fields to prune
     id: undefined,

packages/common/src/services/remote-config/feature-flags.ts

@@ -46,7 +46,8 @@ export enum FeatureFlags {
   AI_ATTRIBUTION = 'ai_attribution',
   DEVELOPER_APPS_PAGE = 'developer_apps_page',
   UPLOAD_REDESIGN_ENABLED = 'upload_redesign_enabled',
-  USDC_PURCHASES = 'usdc_purchases'
+  USDC_PURCHASES = 'usdc_purchases',
+  NEW_PLAYLIST_ROUTES = 'new_playlist_routes'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -108,5 +109,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.AI_ATTRIBUTION]: false,
   [FeatureFlags.DEVELOPER_APPS_PAGE]: false,
   [FeatureFlags.UPLOAD_REDESIGN_ENABLED]: false,
-  [FeatureFlags.USDC_PURCHASES]: false
+  [FeatureFlags.USDC_PURCHASES]: false,
+  [FeatureFlags.NEW_PLAYLIST_ROUTES]: false
 }

packages/common/src/store/account/types.ts

@@ -8,6 +8,7 @@ export type AccountCollection = {
   name: string
   is_album: boolean
   user: { id: ID; handle: string }
+  permalink: string
 }
 
 type AccountPayload<Profile> = {

packages/web/src/common/store/cache/collections/createPlaylistSaga.ts

@@ -26,7 +26,7 @@ import { call, put, select, takeLatest } from 'typed-redux-saga'
 import { make } from 'common/store/analytics/actions'
 import { addPlaylistsNotInLibrary } from 'common/store/playlist-library/sagas'
 import { ensureLoggedIn } from 'common/utils/ensureLoggedIn'
-import { playlistPage } from 'utils/route'
+import { collectionPage } from 'utils/route'
 import { waitForWrite } from 'utils/sagaHelpers'
 
 import { reformat } from './utils'
@@ -97,7 +97,11 @@ function* optimisticallySavePlaylist(
       : []
   }
   playlist.track_count = initTrack ? 1 : 0
-  playlist.permalink = playlistPage(handle, playlist.playlist_name, playlistId)
+  playlist.permalink = collectionPage(
+    handle,
+    playlist.playlist_name,
+    playlistId
+  )
   if (playlist.artwork) {
     playlist._cover_art_sizes = {
       ...playlist._cover_art_sizes,
@@ -128,7 +132,8 @@ function* optimisticallySavePlaylist(
       id: playlistId,
       name: playlist.playlist_name as string,
       is_album: false,
-      user: { id: user_id, handle }
+      user: { id: user_id, handle },
+      permalink: playlist?.permalink
     })
   )
 

packages/web/src/common/store/pages/collection/sagas.js

@@ -51,9 +51,10 @@ function* watchFetchCollection() {
       yield put(fetchCollectionFailed())
       return
     }
-    const collection = collections[collectionId]
+    const identifier = collectionId || permalink
+    const collection = collections[identifier]
     const userUid = makeUid(Kind.USERS, collection.playlist_owner_id)
-    const collectionUid = collectionUids[collectionId]
+    const collectionUid = collectionUids[identifier]
     if (collection) {
       yield put(
         cacheActions.subscribe(Kind.USERS, [

packages/web/src/common/store/social/collections/sagas.ts

@@ -30,7 +30,7 @@ import {
   addPlaylistsNotInLibrary,
   removePlaylistFromLibrary
 } from 'common/store/playlist-library/sagas'
-import { albumPage, audioNftPlaylistPage, playlistPage } from 'utils/route'
+import { audioNftPlaylistPage, collectionPage } from 'utils/route'
 import { waitForWrite } from 'utils/sagaHelpers'
 
 import watchCollectionErrors from './errorSagas'
@@ -378,7 +378,8 @@ export function* saveCollectionAsync(
       id: collection.playlist_id,
       name: collection.playlist_name,
       is_album: collection.is_album,
-      user: { id: user.user_id, handle: user.handle }
+      user: { id: user.user_id, handle: user.handle },
+      permalink: collection.permalink || ''
     })
   )
 
@@ -570,17 +571,13 @@ export function* watchShareCollection() {
       const user = yield* select(getUser, { id: collection.playlist_owner_id })
       if (!user) return
 
-      const link = collection.is_album
-        ? albumPage(
-            user.handle,
-            collection.playlist_name,
-            collection.playlist_id
-          )
-        : playlistPage(
-            user.handle,
-            collection.playlist_name,
-            collection.playlist_id
-          )
+      const link = collectionPage(
+        user.handle,
+        collection.playlist_name,
+        collection.playlist_id,
+        collection.permalink,
+        collection.is_album
+      )
 
       const share = yield* getContext('share')
       share(link, formatShareText(collection.playlist_name, user.name))

packages/web/src/components/add-to-playlist/desktop/AddToPlaylistModal.tsx

@@ -24,7 +24,7 @@ import { Tooltip } from 'components/tooltip'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { AppState } from 'store/types'
-import { playlistPage } from 'utils/route'
+import { collectionPage } from 'utils/route'
 
 import styles from './AddToPlaylistModal.module.css'
 const { getTrackId, getTrackTitle, getTrackIsUnlisted } =
@@ -102,7 +102,13 @@ const AddToPlaylistModal = () => {
       if (account && trackTitle) {
         toast({
           content: messages.addedToast,
-          link: playlistPage(account.handle, trackTitle, playlist.playlist_id),
+          link: collectionPage(
+            account.handle,
+            trackTitle,
+            playlist.playlist_id,
+            playlist.permalink,
+            playlist.is_album
+          ),
           linkText: messages.view
         })
       }

packages/web/src/components/card/desktop/CollectionArtCard.tsx

@@ -16,6 +16,7 @@ import { Dispatch } from 'redux'
 import { ReactComponent as IconKebabHorizontal } from 'assets/img/iconKebabHorizontal.svg'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
+import { CollectionMenuProps } from 'components/menu/CollectionMenu'
 import Menu from 'components/menu/Menu'
 import PerspectiveCard from 'components/perspective-card/PerspectiveCard'
 import RepostFavoritesStats, {
@@ -31,7 +32,7 @@ import {
   UserListEntityType
 } from 'store/application/ui/userListModal/types'
 import { AppState } from 'store/types'
-import { playlistPage, albumPage, profilePage } from 'utils/route'
+import { collectionPage, profilePage } from 'utils/route'
 import { withNullGuard } from 'utils/withNullGuard'
 
 import styles from './CollectionArtCard.module.css'
@@ -84,25 +85,31 @@ const CollectionArtCard = g(
       has_current_user_reposted,
       has_current_user_saved,
       repost_count,
-      save_count
+      save_count,
+      permalink
     } = collection
     const { user_id, name, handle } = user
 
     const [isPerspectiveDisabled, setIsPerspectiveDisabled] = useState(false)
 
     const goToCollection = useCallback(() => {
       if (isPerspectiveDisabled) return
-      const link = is_album
-        ? albumPage(handle, playlist_name, playlist_id)
-        : playlistPage(handle, playlist_name, playlist_id)
+      const link = collectionPage(
+        handle,
+        playlist_name,
+        playlist_id,
+        permalink,
+        is_album
+      )
       goToRoute(link)
     }, [
       is_album,
       handle,
       playlist_name,
       playlist_id,
       goToRoute,
-      isPerspectiveDisabled
+      isPerspectiveDisabled,
+      permalink
     ])
 
     const goToProfile = useCallback(() => {
@@ -144,8 +151,9 @@ const CollectionArtCard = g(
       isFavorited: has_current_user_saved,
       isReposted: has_current_user_reposted,
       metadata: collection,
-      name: playlist_name
-    }
+      name: playlist_name,
+      permalink: permalink || null
+    } as unknown as CollectionMenuProps
 
     return (
       <div className={cn(styles.card, className)}>

packages/web/src/components/collection/desktop/OverflowMenuButton.tsx

@@ -11,6 +11,7 @@ import {
 import { Button, ButtonType, IconKebabHorizontal } from '@audius/stems'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { CollectionMenuProps } from 'components/menu/CollectionMenu'
 import Menu from 'components/menu/Menu'
 
 import styles from './CollectionHeader.module.css'
@@ -36,7 +37,8 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
     playlist_name,
     is_private,
     playlist_owner_id,
-    has_current_user_saved
+    has_current_user_saved,
+    permalink
   } =
     (useSelector((state: CommonState) =>
       getCollection(state, { id: collectionId })
@@ -74,8 +76,9 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
     includeSave: false,
     includeVisitPage: false,
     isPublic: !is_private,
-    extraMenuItems
-  }
+    extraMenuItems,
+    permalink
+  } as unknown as CollectionMenuProps
 
   return (
     <Menu menu={overflowMenu}>

packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.tsx

@@ -23,7 +23,7 @@ import { useModalState } from 'common/hooks/useModalState'
 import { useSelector } from 'common/hooks/useSelector'
 import { ToastContext } from 'components/toast/ToastContext'
 import ToastLinkContent from 'components/toast/mobile/ToastLinkContent'
-import { playlistPage } from 'utils/route'
+import { collectionPage } from 'utils/route'
 
 import styles from './DuplicateAddConfirmationModal.module.css'
 
@@ -64,10 +64,12 @@ export const DuplicateAddConfirmationModal = () => {
           <ToastLinkContent
             text={messages.addedToast}
             linkText={messages.view}
-            link={playlistPage(
+            link={collectionPage(
               account.handle,
               playlist?.playlist_name,
-              playlistId
+              playlistId,
+              playlist?.permalink,
+              playlist?.is_album
             )}
           />
         )
@@ -83,7 +85,9 @@ export const DuplicateAddConfirmationModal = () => {
     dispatch,
     account,
     toast,
-    playlist?.playlist_name
+    playlist?.playlist_name,
+    playlist?.permalink,
+    playlist?.is_album
   ])
 
   return (

packages/web/src/components/menu/CollectionMenu.tsx

@@ -15,7 +15,7 @@ import { Dispatch } from 'redux'
 import * as embedModalActions from 'components/embed-modal/store/actions'
 import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice'
 import { AppState } from 'store/types'
-import { albumPage, playlistPage, profilePage } from 'utils/route'
+import { albumPage, collectionPage, profilePage } from 'utils/route'
 const { getUser } = cacheUsersSelectors
 
 type PlaylistId = number
@@ -40,6 +40,7 @@ export type OwnProps = {
   playlistId: PlaylistId
   playlistName: string
   type: 'album' | 'playlist'
+  permalink: string
 }
 
 export type CollectionMenuProps = OwnProps &
@@ -81,7 +82,7 @@ const CollectionMenu = (props: CollectionMenuProps) => {
       extraMenuItems
     } = props
 
-    const routePage = type === 'album' ? albumPage : playlistPage
+    const routePage = type === 'album' ? albumPage : collectionPage
     const shareMenuItem = {
       text: 'Share',
       onClick: () => {

packages/web/src/components/nav/desktop/PlaylistLibrary/PlaylistNavItem.tsx

@@ -7,7 +7,7 @@ import {
 import { useDispatch } from 'react-redux'
 
 import { useSelector } from 'utils/reducer'
-import { playlistPage } from 'utils/route'
+import { collectionPage } from 'utils/route'
 
 import { CollectionNavItem } from './CollectionNavItem'
 
@@ -34,9 +34,9 @@ export const PlaylistNavItem = (props: PlaylistNavItemProps) => {
   const playlistUrl = useSelector((state) => {
     const playlist = state.account.collections[playlistId]
     if (!playlist) return null
-    const { name, user } = playlist
+    const { name, user, permalink } = playlist
     const { handle } = user
-    return playlistPage(handle, name, playlistId)
+    return collectionPage(handle, name, playlistId, permalink)
   })
 
   const hasPlaylistUpdate = useSelector(

packages/web/src/components/notification/Notification/utils.ts

@@ -2,32 +2,20 @@ import { Entity, EntityType } from '@audius/common'
 
 import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance'
 import { UserListEntityType } from 'store/application/ui/userListModal/types'
-import {
-  albumPage,
-  fullAlbumPage,
-  fullPlaylistPage,
-  fullTrackPage,
-  playlistPage
-} from 'utils/route'
+import { fullCollectionPage, fullTrackPage, collectionPage } from 'utils/route'
 
 export const getEntityLink = (entity: EntityType, fullRoute = false) => {
   if (!entity.user) return ''
   if ('track_id' in entity) {
     return fullRoute ? fullTrackPage(entity.permalink) : entity.permalink
-  } else if (entity.user && entity.playlist_id && entity.is_album) {
-    const getRoute = fullRoute ? fullAlbumPage : albumPage
+  } else if (entity.user && entity.playlist_id) {
+    const getRoute = fullRoute ? fullCollectionPage : collectionPage
     return getRoute(
       entity.user.handle,
       entity.playlist_name,
-      entity.playlist_id
-    )
-  }
-  if (entity.user) {
-    const getRoute = fullRoute ? fullPlaylistPage : playlistPage
-    return getRoute(
-      entity.user.handle,
-      entity.playlist_name,
-      entity.playlist_id
+      entity.playlist_id,
+      entity.permalink,
+      entity.is_album
     )
   }
   return ''