refactor: simplify useRecentlyViewed composable

Author: serhalp

app/composables/useRecentlyViewed.ts

@@ -1,4 +1,3 @@
-import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -17,26 +16,17 @@ export interface RecentItem {
   viewedAt: number
 }
 
-let recentRef: RemovableRef<RecentItem[]> | null = null
+export function useRecentlyViewed() {
+  const items = useLocalStorage<RecentItem[]>(STORAGE_KEY, [])
 
-function getRecentRef() {
-  if (!recentRef) {
-    recentRef = useLocalStorage<RecentItem[]>(STORAGE_KEY, [])
+  function trackRecentView(item: Omit<RecentItem, 'viewedAt'>) {
+    if (import.meta.server) return
+    const filtered = items.value.filter(
+      existing => !(existing.type === item.type && existing.name === item.name),
+    )
+    filtered.unshift({ ...item, viewedAt: Date.now() })
+    items.value = filtered.slice(0, MAX_RECENT_ITEMS)
   }
-  return recentRef
-}
-
-export function useRecentlyViewed() {
-  const items = getRecentRef()
-  return { items: computed(() => items.value) }
-}
 
-export function trackRecentView(item: Omit<RecentItem, 'viewedAt'>) {
-  if (import.meta.server) return
-  const items = getRecentRef()
-  const filtered = items.value.filter(
-    existing => !(existing.type === item.type && existing.name === item.name),
-  )
-  filtered.unshift({ ...item, viewedAt: Date.now() })
-  items.value = filtered.slice(0, MAX_RECENT_ITEMS)
+  return { items: computed(() => items.value), trackRecentView }
 }

app/pages/org/[org].vue

@@ -122,6 +122,7 @@ watch(orgName, () => {
 })
 
 if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
   watch(
     () => [status.value, orgName.value] as const,
     ([s, name]) => {

app/pages/package/[[org]]/[name].vue

@@ -645,6 +645,7 @@ onKeyStroke(
 const showSkeleton = shallowRef(false)
 
 if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
   watch(
     () => [status.value, packageName.value] as const,
     ([s, name]) => {

app/pages/~[username]/index.vue

@@ -120,6 +120,7 @@ watch(username, () => {
 })
 
 if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
   watch(
     () => [status.value, username.value] as const,
     ([s, name]) => {

test/unit/app/composables/use-recently-viewed.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import type { RecentItem } from '../../../../app/composables/useRecentlyViewed'
@@ -10,44 +10,47 @@ vi.mock('@vueuse/core', () => ({
 }))
 
 // Must import after mock is set up
-const { trackRecentView, useRecentlyViewed } =
-  await import('../../../../app/composables/useRecentlyViewed')
+const { useRecentlyViewed } = await import('../../../../app/composables/useRecentlyViewed')
 
 describe('useRecentlyViewed', () => {
   beforeEach(() => {
     storageRef.value = []
   })
 
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   it('returns an empty list initially', () => {
     const { items } = useRecentlyViewed()
     expect(items.value).toEqual([])
   })
 
   it('adds an item to an empty list', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
-    const { items } = useRecentlyViewed()
     expect(items.value).toHaveLength(1)
     expect(items.value[0]).toMatchObject({ type: 'package', name: 'vue', label: 'vue' })
     expect(items.value[0]!.viewedAt).toBeTypeOf('number')
   })
 
   it('deduplicates by type and name, bumping to front', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
     trackRecentView({ type: 'package', name: 'react', label: 'react' })
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
 
-    const { items } = useRecentlyViewed()
     expect(items.value).toHaveLength(2)
     expect(items.value[0]!.name).toBe('vue')
     expect(items.value[1]!.name).toBe('react')
   })
 
   it('caps at 5 items, evicting the oldest', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     for (let i = 1; i <= 6; i++) {
       trackRecentView({ type: 'package', name: `pkg-${i}`, label: `pkg-${i}` })
     }
 
-    const { items } = useRecentlyViewed()
     expect(items.value).toHaveLength(5)
     expect(items.value[0]!.name).toBe('pkg-6')
     expect(items.value[4]!.name).toBe('pkg-2')
@@ -56,42 +59,42 @@ describe('useRecentlyViewed', () => {
   })
 
   it('allows different entity types to coexist', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
     trackRecentView({ type: 'org', name: 'nuxt', label: '@nuxt' })
     trackRecentView({ type: 'user', name: 'sindresorhus', label: '~sindresorhus' })
 
-    const { items } = useRecentlyViewed()
     expect(items.value).toHaveLength(3)
     expect(items.value.map(i => i.type)).toEqual(['user', 'org', 'package'])
   })
 
   it('does not deduplicate items with the same name but different type', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     trackRecentView({ type: 'package', name: 'nuxt', label: 'nuxt' })
     trackRecentView({ type: 'org', name: 'nuxt', label: '@nuxt' })
 
-    const { items } = useRecentlyViewed()
     expect(items.value).toHaveLength(2)
   })
 
   it('sets viewedAt on new entries', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     const before = Date.now()
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
     const after = Date.now()
 
-    const { items } = useRecentlyViewed()
     expect(items.value[0]!.viewedAt).toBeGreaterThanOrEqual(before)
     expect(items.value[0]!.viewedAt).toBeLessThanOrEqual(after)
   })
 
   it('updates viewedAt when deduplicating', () => {
+    const { trackRecentView, items } = useRecentlyViewed()
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
-    const firstViewedAt = useRecentlyViewed().items.value[0]!.viewedAt
+    const firstViewedAt = items.value[0]!.viewedAt
 
     // Small delay to ensure timestamp differs
     vi.spyOn(Date, 'now').mockReturnValueOnce(firstViewedAt + 1000)
     trackRecentView({ type: 'package', name: 'vue', label: 'vue' })
 
-    const { items } = useRecentlyViewed()
     expect(items.value[0]!.viewedAt).toBeGreaterThan(firstViewedAt)
   })
 })