[PAY-1248] Initial changes to get ready for upcoming PRs that include…

… track and playlist tiles in DMs (#3391)

Co-authored-by: Saliou Diallo <saliou@audius.co>
Co-authored-by: Andrew Mendelsohn <andrew.mendelsohn@audius.co>

packages/common/src/api/collection.ts

@@ -0,0 +1,29 @@
+import { Kind } from 'models'
+
+import { createApi } from './createApi'
+
+const collectionApi = createApi({
+  reducerPath: 'collectionApi',
+  endpoints: {
+    getPlaylistByPermalink: {
+      fetch: async ({ permalink, currentUserId }, { apiClient }) => {
+        return {
+          collection: (
+            await apiClient.getPlaylistByPermalink({
+              permalink,
+              currentUserId
+            })
+          )[0]
+        }
+      },
+      options: {
+        permalinkArgKey: 'permalink',
+        kind: Kind.COLLECTIONS,
+        schemaKey: 'collection'
+      }
+    }
+  }
+})
+
+export const { useGetPlaylistByPermalink } = collectionApi.hooks
+export default collectionApi.reducer

packages/common/src/api/createApi.ts

@@ -5,7 +5,10 @@ import { isEqual } from 'lodash'
 import { denormalize, normalize } from 'normalizr'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { Kind } from 'models/Kind'
 import { Status } from 'models/Status'
+import { getCollection } from 'store/cache/collections/selectors'
+import { getTrack } from 'store/cache/tracks/selectors'
 import { CommonState } from 'store/reducers'
 import { getErrorMessage } from 'utils/error'
 
@@ -128,26 +131,45 @@ const buildEndpointHooks = (
       // Retrieve data from cache if lookup args provided
       if (!endpointState[key]) {
         if (
-          !endpoint.options?.idArgKey ||
+          !(endpoint.options?.idArgKey || endpoint.options?.permalinkArgKey) ||
           !endpoint.options?.kind ||
           !endpoint.options?.schemaKey
         )
           return null
-        const { kind, idArgKey, schemaKey } = endpoint.options
-        if (!fetchArgs[idArgKey]) return null
-        const idAsNumber =
-          typeof fetchArgs[idArgKey] === 'number'
+        const { kind, idArgKey, permalinkArgKey, schemaKey } = endpoint.options
+        if (idArgKey && !fetchArgs[idArgKey]) return null
+        if (permalinkArgKey && !fetchArgs[permalinkArgKey]) return null
+
+        const idAsNumber = idArgKey
+          ? typeof fetchArgs[idArgKey] === 'number'
             ? parseInt(fetchArgs[idArgKey])
             : fetchArgs[idArgKey]
-        const initialCachedEntity = cacheSelectors.getEntry(state, {
-          kind,
-          id: idAsNumber
-        })
+          : null
+        const idCachedEntity = idAsNumber
+          ? cacheSelectors.getEntry(state, {
+              kind,
+              id: idAsNumber
+            })
+          : null
+
+        let permalinkCachedEntity = null
+        if (kind === Kind.TRACKS && permalinkArgKey) {
+          permalinkCachedEntity = getTrack(state, {
+            permalink: fetchArgs[permalinkArgKey]
+          })
+        }
+        if (kind === Kind.COLLECTIONS && permalinkArgKey) {
+          permalinkCachedEntity = getCollection(state, {
+            permalink: fetchArgs[permalinkArgKey]
+          })
+        }
+
+        const cachedEntity = idCachedEntity || permalinkCachedEntity
 
         // cache hit
-        if (initialCachedEntity) {
+        if (cachedEntity) {
           const { result, entities } = normalize(
-            { [schemaKey]: initialCachedEntity },
+            { [schemaKey]: cachedEntity },
             apiResponseSchema
           )
           return {
@@ -198,8 +220,9 @@ const buildEndpointHooks = (
       }
 
       const fetchWrapped = async () => {
-        if (cachedData || !context) return
-        if (status === Status.LOADING) return
+        if (!context) return
+        if ([Status.LOADING, Status.ERROR, Status.SUCCESS].includes(status))
+          return
         if (hookOptions?.disabled) return
 
         try {

packages/common/src/api/index.ts

@@ -1,5 +1,6 @@
 export * from './AudiusQueryContext'
 export * from './relatedArtists'
 export * from './track'
+export * from './collection'
 export * from './user'
 export * from './hooks'

packages/common/src/api/reducer.ts

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux'
 
+import collectionApi from './collection'
 import relatedArtistsApi from './relatedArtists'
 import trackApi from './track'
 import userApi from './user'
 
 export default combineReducers({
   relatedArtistsApi,
   trackApi,
+  collectionApi,
   userApi
 })

packages/common/src/api/schema.ts

@@ -14,16 +14,26 @@ export const trackSchema = new schema.Entity(
   { idAttribute: 'track_id' }
 )
 
+export const collectionSchema = new schema.Entity(
+  Kind.COLLECTIONS,
+  { user: userSchema, tracks: new schema.Array(trackSchema) },
+  { idAttribute: 'playlist_id' }
+)
+
 export const apiResponseSchema = new schema.Object({
   user: userSchema,
   track: trackSchema,
+  collection: collectionSchema,
   users: new schema.Array(userSchema),
-  tracks: new schema.Array(trackSchema)
+  tracks: new schema.Array(trackSchema),
+  collections: new schema.Array(collectionSchema)
 })
 
 export const apiResponseKeyToKind: Record<string, Kind> = {
   user: Kind.USERS,
   users: Kind.USERS,
+  collection: Kind.COLLECTIONS,
+  collections: Kind.COLLECTIONS,
   track: Kind.TRACKS,
   tracks: Kind.TRACKS
 }

packages/common/src/api/track.ts

@@ -1,3 +1,6 @@
+import { Kind } from 'models'
+import { parseTrackRouteFromPermalink } from 'utils/stringUtils'
+
 import { createApi } from './createApi'
 
 const trackApi = createApi({
@@ -8,10 +11,32 @@ const trackApi = createApi({
         return {
           track: await apiClient.getTrack({ id })
         }
+      },
+      options: {
+        idArgKey: 'id',
+        kind: Kind.TRACKS,
+        schemaKey: 'track'
+      }
+    },
+    getTrackByPermalink: {
+      fetch: async ({ permalink, currentUserId }, { apiClient }) => {
+        const { handle, slug } = parseTrackRouteFromPermalink(permalink)
+        return {
+          track: await apiClient.getTrackByHandleAndSlug({
+            handle,
+            slug,
+            currentUserId
+          })
+        }
+      },
+      options: {
+        permalinkArgKey: 'permalink',
+        kind: Kind.TRACKS,
+        schemaKey: 'track'
       }
     }
   }
 })
 
-export const { useGetTrackById } = trackApi.hooks
+export const { useGetTrackById, useGetTrackByPermalink } = trackApi.hooks
 export default trackApi.reducer

packages/common/src/api/types.ts

@@ -20,6 +20,7 @@ export type SliceConfig = CreateSliceOptions<any, any, any>
 
 type EndpointOptions = {
   idArgKey?: string
+  permalinkArgKey?: string
   schemaKey?: string
   kind?: Kind
 }

packages/common/src/models/Analytics.ts

@@ -978,7 +978,9 @@ export enum PlaybackSource {
   HISTORY_PAGE = 'history page',
   FAVORITES_PAGE = 'favorites page',
   PASSIVE = 'passive',
-  EMBED_PLAYER = 'embed player'
+  EMBED_PLAYER = 'embed player',
+  DM_TRACK = 'dm_track',
+  DM_PLAYLIST_TRACK = 'dm_playlist_track'
 }
 
 type PlaybackPlay = {

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

@@ -17,7 +17,9 @@ export enum QueueSource {
   SAVED_TRACKS = 'SAVED_TRACKS',
   SEARCH_TRACKS = 'SEARCH_TRACKS',
   TRACK_TRACKS = 'TRACK_TRACKS',
-  RECOMMENDED_TRACKS = 'RECOMMENDED_TRACKS'
+  RECOMMENDED_TRACKS = 'RECOMMENDED_TRACKS',
+  DM_TRACKS = 'DM_TRACKS',
+  DM_PLAYLIST_TRACKS = 'DM_PLAYLIST_TRACKS'
 }
 
 export type Queueable = {

packages/common/src/utils/urlUtils.ts

@@ -1,7 +1,30 @@
 const audiusUrlRegex =
   // eslint-disable-next-line no-useless-escape
-  /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius.co)(\/.+)?/gim
+  /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius\.co)(\/.+)?/gim
 
 export const isAudiusUrl = (url: string) => new RegExp(audiusUrlRegex).test(url)
 export const getPathFromAudiusUrl = (url: string) =>
   new RegExp(audiusUrlRegex).exec(url)?.[3] ?? null
+
+const playlistUrlRegex =
+  // eslint-disable-next-line no-useless-escape
+  /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius\.co)(\/[\S]+\/playlist\/[\S]+)$/gim
+
+export const isPlaylistUrl = (url: string) =>
+  new RegExp(playlistUrlRegex).test(url)
+export const getPathFromPlaylistUrl = (url: string) => {
+  const results = new RegExp(trackUrlRegex).exec(url)
+  if (!results) return null
+  return results[3]
+}
+
+const trackUrlRegex =
+  // eslint-disable-next-line no-useless-escape
+  /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius\.co)(\/[\S]+\/[\S]+)$/gim
+
+export const isTrackUrl = (url: string) => new RegExp(trackUrlRegex).test(url)
+export const getPathFromTrackUrl = (url: string) => {
+  const results = new RegExp(trackUrlRegex).exec(url)
+  if (!results) return null
+  return results[3]
+}