Cache username in localStorage

Author: alexesprit

src/app/App.test.tsx

@@ -9,7 +9,7 @@ import {
   refreshAccessToken,
   setAccessToken,
 } from '@/shared/api/spotify'
-import { useUserId } from '@/shared/hooks/useUserId'
+import { useUsername } from '@/shared/hooks/useUsername'
 
 // Helper to create mock callback params with defaults
 const mockCallbackParams = (
@@ -32,8 +32,8 @@ vi.mock('@/features/auth/utils/callback', () => ({
   getCallbackParams: vi.fn(),
 }))
 
-vi.mock('@/shared/hooks/useUserId', () => ({
-  useUserId: vi.fn(),
+vi.mock('@/shared/hooks/useUsername', () => ({
+  useUsername: vi.fn(),
 }))
 
 // Mock components
@@ -42,8 +42,8 @@ vi.mock('@/features/auth/components/IntroScreen', () => ({
 }))
 
 vi.mock('@/features/layout/components/Header', () => ({
-  Header: ({ userId }: { userId: string | null }) => (
-    <div>Header: {userId}</div>
+  Header: ({ username }: { username: string | null }) => (
+    <div>Header: {username}</div>
   ),
 }))
 
@@ -111,7 +111,7 @@ describe('App', () => {
       state: null,
       error: null,
     })
-    vi.mocked(useUserId).mockReturnValue(null)
+    vi.mocked(useUsername).mockReturnValue(null)
   })
 
   afterEach(() => {
@@ -172,14 +172,14 @@ describe('App', () => {
       localStorageMock.spotify_access_token = 'test-token'
       localStorageMock.spotify_refresh_token = 'test-refresh-token'
       localStorageMock.spotify_token_expiry = (Date.now() + 3600000).toString() // 1 hour from now
-      vi.mocked(useUserId).mockReturnValue('user123')
+      vi.mocked(useUsername).mockReturnValue('Test User')
 
       await act(async () => {
         render(<App />)
       })
 
       await waitFor(() => {
-        expect(screen.getByText('Header: user123')).toBeInTheDocument()
+        expect(screen.getByText('Header: Test User')).toBeInTheDocument()
         expect(screen.getByText('MainContent')).toBeInTheDocument()
       })
     })

src/app/App.tsx

@@ -9,7 +9,7 @@ import { MainContent } from '@/features/layout/components/MainContent'
 import * as m from '@/paraglide/messages'
 import { setAccessToken } from '@/shared/api/spotify'
 import { Button } from '@/shared/components/ui/button'
-import { useUserId } from '@/shared/hooks/useUserId'
+import { useUsername } from '@/shared/hooks/useUsername'
 import '@/features/layout/styles.css'
 
 export function App(): JSX.Element {
@@ -39,7 +39,7 @@ export function App(): JSX.Element {
   })
 
   const isSignedIn = accessToken !== null
-  const userId = useUserId(isSignedIn)
+  const username = useUsername(isSignedIn)
 
   if (isLoading) {
     return <div>{m.loading()}</div>
@@ -61,7 +61,7 @@ export function App(): JSX.Element {
     <div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-spotify selection:text-black flex flex-col">
       {isSignedIn && (
         <>
-          <Header userId={userId} />
+          <Header username={username} />
           <MainContent />
         </>
       )}

src/features/layout/components/Header.tsx

@@ -10,19 +10,19 @@ import {
 } from '@/shared/components/ui/dropdown-menu'
 
 interface HeaderProps {
-  userId: string | null
+  username: string | null
 }
 
-export function Header({ userId }: HeaderProps): JSX.Element {
+export function Header({ username }: HeaderProps): JSX.Element {
   const { logout } = useLogout()
   const currentLocale = getLocale()
 
-  // Extract initials from userId for avatar
-  const getInitials = (userId: string | null): string => {
-    if (!userId) {
+  // Extract initials from username for avatar
+  const getInitials = (username: string | null): string => {
+    if (!username) {
       return ''
     }
-    return userId.charAt(0).toUpperCase()
+    return username.charAt(0).toUpperCase()
   }
 
   return (
@@ -64,11 +64,11 @@ export function Header({ userId }: HeaderProps): JSX.Element {
               >
                 <div className="w-8 h-8 rounded-full bg-zinc-800 border border-zinc-700 flex items-center justify-center group-hover:border-zinc-600">
                   <span className="font-bold text-xs text-zinc-400">
-                    {getInitials(userId)}
+                    {getInitials(username)}
                   </span>
                 </div>
                 <span className="text-sm font-medium text-zinc-300 hidden sm:block group-hover:text-zinc-100">
-                  {userId || m.loading()}
+                  {username || m.loading()}
                 </span>
               </button>
             </DropdownMenuTrigger>

src/features/playlists/components/PlaylistItem.tsx

@@ -111,7 +111,9 @@ function getStatusIndicator(status: PlaylistStatus): JSX.Element | null {
       return (
         <div className="flex items-center gap-2">
           <XCircle className="w-4 h-4 text-red-500" />
-          <span className="text-xs text-red-500 hidden sm:inline">{m.error()}</span>
+          <span className="text-xs text-red-500 hidden sm:inline">
+            {m.error()}
+          </span>
         </div>
       )
     default:

src/shared/api/spotify.test.ts

@@ -6,6 +6,7 @@ import {
   getMyId,
   getMyPlaylists,
   getPlaylistTracks,
+  getUsername,
   refreshAccessToken,
   setAccessToken,
   setPlaylistTracks,
@@ -474,6 +475,63 @@ describe('spotify API', () => {
       })
     })
 
+    describe('getUsername()', () => {
+      test('should return cached username if available', async () => {
+        localStorage.setItem(STORAGE_KEYS.SPOTIFY_USERNAME, 'Cached User')
+
+        const result = await getUsername()
+
+        expect(result).toBe('Cached User')
+        expect(mockGetMe).not.toHaveBeenCalled()
+      })
+
+      test('should fetch and cache username from API if not cached', async () => {
+        mockGetMe.mockResolvedValueOnce({
+          id: 'test-user-id',
+          display_name: 'New User',
+        })
+
+        const result = await getUsername()
+
+        expect(result).toBe('New User')
+        expect(mockGetMe).toHaveBeenCalled()
+        expect(localStorage.setItem).toHaveBeenCalledWith(
+          STORAGE_KEYS.SPOTIFY_USERNAME,
+          'New User',
+        )
+      })
+
+      test('should use fallback username if display_name is null', async () => {
+        mockGetMe.mockResolvedValueOnce({
+          id: 'test-user-id',
+          display_name: null,
+        })
+
+        const result = await getUsername()
+
+        expect(result).toBe('User')
+        expect(localStorage.setItem).toHaveBeenCalledWith(
+          STORAGE_KEYS.SPOTIFY_USERNAME,
+          'User',
+        )
+      })
+
+      test('should use fallback username if display_name is undefined', async () => {
+        mockGetMe.mockResolvedValueOnce({
+          id: 'test-user-id',
+          display_name: undefined,
+        })
+
+        const result = await getUsername()
+
+        expect(result).toBe('User')
+        expect(localStorage.setItem).toHaveBeenCalledWith(
+          STORAGE_KEYS.SPOTIFY_USERNAME,
+          'User',
+        )
+      })
+    })
+
     describe('getMyPlaylists()', () => {
       test('should fetch playlists successfully', async () => {
         const mockPlaylists = [

src/shared/api/spotify.ts

@@ -177,3 +177,18 @@ export async function getMyId(): Promise<string> {
 
   return id
 }
+
+export async function getUsername(): Promise<string> {
+  const cachedUsername = localStorage.getItem(STORAGE_KEYS.SPOTIFY_USERNAME)
+
+  if (cachedUsername) {
+    return cachedUsername
+  }
+
+  const { display_name } = await spotifyClient.getMe()
+  const username = display_name || 'User'
+
+  localStorage.setItem(STORAGE_KEYS.SPOTIFY_USERNAME, username)
+
+  return username
+}

src/shared/constants/storage.ts

@@ -3,6 +3,7 @@ export const STORAGE_KEYS = {
   SPOTIFY_ACCESS_TOKEN: 'spotify_access_token',
   SPOTIFY_REFRESH_TOKEN: 'spotify_refresh_token',
   SPOTIFY_TOKEN_EXPIRY: 'spotify_token_expiry',
+  SPOTIFY_USERNAME: 'spotify_username',
   OAUTH_CODE_VERIFIER: 'code_verifier',
   OAUTH_STATE: 'oauth_state',
 } as const

src/shared/hooks/useUserId.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+import { getUsername } from '@/shared/api/spotify'
+
+/**
+ * Fetch username asynchronously with localStorage caching.
+ *
+ * @param enabled - Whether to enable fetching the username
+ * @return Username (display name)
+ */
+export function useUsername(enabled = true): string | null {
+  const [username, setUsername] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!enabled) {
+      setUsername(null)
+      return
+    }
+
+    async function fetchUsername() {
+      try {
+        setUsername(await getUsername())
+      } catch {
+        // If API call fails (e.g., no token), set username to null
+        setUsername(null)
+      }
+    }
+
+    fetchUsername()
+  }, [enabled])
+
+  return username
+}