🐛 NICE-135 limit for recently-played [b]

sites/jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx

@@ -66,16 +66,12 @@ function addS(str) {
   return `${str}’${poss}`
 }
 
-/**
- * @todo(spotify) uh... what is going on with short_term ?
- */
 const ranges = [
-  { active: false, slug: 'short_term', title: 'Past Month' },
+  { active: true, slug: 'short_term', title: 'Past Month' },
   {
     active: true,
     slug: 'medium_term',
-    // title: 'Past Six Months',
-    title: 'Recent',
+    title: 'Past Six Months',
   },
   { active: true, slug: 'long_term', title: 'All Time' },
 ]
@@ -135,6 +131,7 @@ function DataItem({ item, type }) {
   }
   const genres = getArrayFirstX(_genres, GENRE_MAX)
   const genresExtra = getArrayCountOfOverage(_genres, GENRE_MAX)
+  const isTrack = ['recently-played', 'top-tracks'].includes(type)
 
   return (
     <>
@@ -157,7 +154,7 @@ function DataItem({ item, type }) {
               </Text>
             </DataList.Value>
           </DataList.Item>
-          {['recently-played', 'top-tracks'].includes(type) && (
+          {isTrack && (
             <>
               <DataList.Item align="start" className="flex flex-col gap-0">
                 <DataList.Label>
@@ -203,7 +200,7 @@ function DataItem({ item, type }) {
             align="start"
             className={cx(
               'flex-col gap-0 md:gap-1',
-              type === 'top-tracks' ? 'hidden' : 'flex',
+              type === isTrack ? 'hidden' : 'flex',
             )}
           >
             <DataList.Label>
@@ -435,7 +432,7 @@ function DataItems() {
   } = useSWRInfinitePages(
     (pageIndex) =>
       getKey(pageIndex, {
-        limit,
+        limit: spotifyType === 'recently-played' ? 50 : limit,
         time_range: spotifyTimeRange ?? INIT.time_range,
         type: spotifyType ?? INIT.type,
         url,
@@ -444,7 +441,7 @@ function DataItems() {
     {
       // @ts-ignore
       dataPath: 'items',
-      limit: 10,
+      limit: spotifyType === 'recently-played' ? 50 : limit,
       //
       refreshInterval: HOUR,
       revalidateAll: false,

sites/jeromefitzgerald.com/src/app/api/v1/music/[slug]/route.ts

@@ -47,7 +47,7 @@ const SLUG__VALIDATION = [
 ]
 const dataEmpty = { debug: { latency: 0, type: 'api' }, is_playing: false }
 
-const getKey = ({ limit, offset, slug, time_range }) => {
+const getKey = ({ before, limit, offset, slug, time_range }) => {
   if (slug === 'now-playing') {
     const key = `${keyPrefixSpotify}/${slug}`
     return {
@@ -57,7 +57,7 @@ const getKey = ({ limit, offset, slug, time_range }) => {
   }
 
   if (slug === 'recently-played') {
-    const _params = `?limit=50`
+    const _params = `?limit=${limit}${before > 0 ? `&before=${before}` : ''}`
     const params = _slug(_params)
     const key = `${keyPrefixSpotify}/${slug}/${params}`.toLowerCase()
     return {
@@ -105,6 +105,7 @@ export async function GET(
   const params = await props.params
   const slug = params.slug
   const { searchParams } = new URL(request.url)
+  const before = (searchParams.get('before') ?? 0) as number
   const limit = (searchParams.get('limit') ?? 10) as number
   const offset = (searchParams.get('offset') ?? 0) as number
   const time_range = searchParams.get('time_range') || 'medium_term'
@@ -123,7 +124,7 @@ export async function GET(
   /**
    * @cache
    */
-  const { evictionPolicy, key } = getKey({ limit, offset, slug, time_range })
+  const { evictionPolicy, key } = getKey({ before, limit, offset, slug, time_range })
 
   let start = Date.now()
   //
@@ -160,7 +161,11 @@ export async function GET(
         break
       case 'recently-played':
         start = Date.now()
-        data = await spotify.get.recentlyPlayed({ limit, withImages: true })
+        data = await spotify.get.recentlyPlayed({
+          before: before > 0 ? before : undefined,
+          limit,
+          withImages: true,
+        })
         result.data = data
         result.debug = {
           key,

sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.Music.Client.tsx

@@ -13,7 +13,7 @@ import { CurrentlyItem } from './Currently.Item'
 import { CurrentlyWrapper } from './Currently.Item.Wrapper'
 
 // const key = getKey(0, { ...INIT, time_range: 'short_term', type: 'top-tracks' })
-const key = getKey(0, { ...INIT, limit: 50, type: 'recently-played' })
+const key = getKey(0, { ...INIT, limit: 1, type: 'recently-played' })
 
 const options = {}
 

sites/jeromefitzgerald.com/src/utils/getKey.ts

@@ -1,5 +1,15 @@
 /**
  * Spotify API
+ *
+ * @todo(spotify)
+ *
+ * recently-played cursor is: after|before
+ * - its history is 50 records
+ * - no need to cycle through cursors indefinetly
+ * - just request limit of 50
+ *
+ * top-artists|tracks cursor is: offset
+ * - works well with pageIndex
  */
 const getKey = (pageIndex, { limit, time_range, type, url }) => {
   const offset = pageIndex === 0 ? 0 : 10 * pageIndex