Extract API endpoint magic strings into constants/apiEndpoints.ts

Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: Copilot

app/client/connect/page.tsx

@@ -16,6 +16,7 @@ import useAutoConnect from '../../../hooks/useAutoConnect'
 import useBluetoothHRM from '../../../hooks/useBluetoothHRM'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { getHrZoneProps } from '../../../utils/visualization'
+import { API_DEBUG_RESET } from '@/constants/apiEndpoints'
 
 // Cookie helpers
 const setCookie = (name: string, value: string, days = 365) => {
@@ -224,7 +225,7 @@ export default function ConnectPage() {
                   document.cookie = 'hrm_user_age=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                   document.cookie = 'hrm_device_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
 
-                  const response = await fetch('/api/debug/reset', { method: 'POST' });
+                  const response = await fetch(API_DEBUG_RESET, { method: 'POST' });
                   const data = await response.json();
                   alert(data.message);
                 } catch (error) {

app/client/control/components/SpotifyControls.tsx

@@ -23,6 +23,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import useVolumePreference, { clampVolume } from '@/hooks/useVolumePreference'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { SpotifyCommandMessage } from '@/types/websocket'
+import { API_SPOTIFY_DEVICES } from '@/constants/apiEndpoints'
 
 interface SpotifyDevice {
   id: string
@@ -59,7 +60,7 @@ const SpotifyControls = () => {
         setDevicesLoading(true)
         setDevicesError(null)
         try {
-          const response = await fetch('/api/spotify/devices')
+          const response = await fetch(API_SPOTIFY_DEVICES)
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`)
           }

app/client/control/components/TimerControls.tsx

@@ -9,6 +9,7 @@ import {
   TimerConfigMessage,
   TimerModeCommandMessage,
 } from '@/types/websocket'
+import { API_SPOTIFY_DEVICES } from '@/constants/apiEndpoints'
 import Add from '@mui/icons-material/Add'
 import FitnessCenter from '@mui/icons-material/FitnessCenter'
 import PlayArrow from '@mui/icons-material/PlayArrow'
@@ -100,7 +101,7 @@ const TimerControls = () => {
   useEffect(() => {
     const fetchDevices = async () => {
       try {
-        const response = await fetch('/api/spotify/devices')
+        const response = await fetch(API_SPOTIFY_DEVICES)
         if (!response.ok) throw new Error('Failed to fetch devices')
         const devices: SpotifyDevice[] = await response.json()
         setSpotifyDevices(Array.isArray(devices) ? devices : [])

app/client/spotify-selection/page.tsx

@@ -19,6 +19,7 @@ import VolumeControl from '../../../components/Spotify/VolumeControl' // I will
 import useVolumePreference from '../../../hooks/useVolumePreference'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { SpotifyCommandMessage } from '../../../types/websocket'
+import { API_SPOTIFY_DEVICES } from '@/constants/apiEndpoints'
 
 const PlaylistSelector = dynamic(
   () => import('../../../components/Spotify/PlaylistSelector'),
@@ -47,7 +48,7 @@ const SpotifySelectionPage = () => {
   useEffect(() => {
     const fetchDevices = async () => {
       try {
-        const response = await fetch('/api/spotify/devices')
+        const response = await fetch(API_SPOTIFY_DEVICES)
         if (!response.ok) throw new Error('Failed to fetch devices')
         const devices: SpotifyDevice[] = await response.json()
         setAvailableDevices(Array.isArray(devices) ? devices : [])

app/debug/spotify/page.tsx

@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography'
 import { Session } from 'next-auth'
 import { signIn, signOut, useSession } from 'next-auth/react'
 import { useEffect, useState } from 'react'
+import { API_DEBUG_SPOTIFY_TOKEN } from '@/constants/apiEndpoints'
 
 interface ServerTokenStatus {
   status: string
@@ -25,7 +26,7 @@ export default function SpotifyDebugPage() {
   const [serverToken, setServerToken] = useState<ServerTokenStatus | null>(null)
 
   const fetchServerToken = async () => {
-    const res = await fetch('/api/debug/spotify-token')
+    const res = await fetch(API_DEBUG_SPOTIFY_TOKEN)
     if (res.ok) {
       const data = await res.json()
       setServerToken(data.token)

components/Spotify/PlaylistSelector.tsx

@@ -19,6 +19,7 @@ import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useDebounce } from '../../hooks/useDebounce'
+import { API_SPOTIFY_PLAYLISTS } from '../../constants/apiEndpoints'
 
 interface PlaylistItemProps {
   playlist: Playlist
@@ -147,7 +148,7 @@ const PlaylistSelector: React.FC<PlaylistSelectorProps> = ({
       setLoading(true)
       setError(null)
       try {
-        const response = await fetch('/api/spotify/playlists')
+        const response = await fetch(API_SPOTIFY_PLAYLISTS)
         if (!response.ok) {
           throw new Error('Failed to fetch playlists')
         }

components/SpotifyDisplay.tsx

@@ -4,6 +4,7 @@ import useSpotifyWebPlayback from '@/hooks/useSpotifyWebPlayback'
 import useVolumePreference, { clampVolume } from '@/hooks/useVolumePreference'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { SpotifyCommandMessage } from '@/types/websocket'
+import { API_SPOTIFY_DEVICES } from '@/constants/apiEndpoints'
 import VolumeUp from '@mui/icons-material/VolumeUp'
 import PauseIcon from '@mui/icons-material/Pause'
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
@@ -110,7 +111,7 @@ const SpotifyDisplay = () => {
     if (spotifyLoggedIn && spotifyData.trackName) {
       const fetchDevices = async () => {
         try {
-          const response = await fetch('/api/spotify/devices')
+          const response = await fetch(API_SPOTIFY_DEVICES)
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`)
           }

constants/apiEndpoints.ts

@@ -0,0 +1,16 @@
+/**
+ * Centralized API endpoint constants
+ * This file contains all API endpoint paths used throughout the application.
+ */
+
+// Spotify API endpoints
+export const API_SPOTIFY_PLAYLISTS = '/api/spotify/playlists'
+export const API_SPOTIFY_DEVICES = '/api/spotify/devices'
+export const API_SPOTIFY_ACCESS_TOKEN = '/api/spotify/access-token'
+
+// Debug API endpoints
+export const API_DEBUG_RESET = '/api/debug/reset'
+export const API_DEBUG_SPOTIFY_TOKEN = '/api/debug/spotify-token'
+
+// Internal API endpoints
+export const API_INTERNAL_TOKEN_DELIVERY = '/api/internal/token-delivery'

hooks/useSpotifyWebPlayback.ts

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useError } from '@/context/ErrorContext'
+import { API_SPOTIFY_ACCESS_TOKEN } from '@/constants/apiEndpoints'
 
 // Define event data types for better type safety
 interface SpotifyDeviceEvent {
@@ -73,7 +74,7 @@ const useSpotifyWebPlayback = () => {
   const getOAuthToken = useCallback(
     async (cb: (token: string) => void) => {
       try {
-        const response = await fetch('/api/spotify/access-token')
+        const response = await fetch(API_SPOTIFY_ACCESS_TOKEN)
         if (!response.ok) {
           if (response.status === 401) {
             // User not logged in - this is expected, don't show as error
@@ -121,7 +122,7 @@ const useSpotifyWebPlayback = () => {
     }
 
     // Check if user has active session before initializing
-    fetch('/api/spotify/access-token')
+    fetch(API_SPOTIFY_ACCESS_TOKEN)
       .then((response) => {
         if (!response.ok) {
           console.log(

middleware.ts

@@ -6,9 +6,12 @@
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
+// Base path for auth routes
+const API_AUTH_BASE = '/api/auth/'
+
 export function middleware(request: NextRequest) {
   // Only handle auth routes
-  if (!request.nextUrl.pathname.startsWith('/api/auth/')) {
+  if (!request.nextUrl.pathname.startsWith(API_AUTH_BASE)) {
     return NextResponse.next()
   }
 
@@ -43,6 +46,7 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
+  // Note: matcher must be static strings for Next.js static analysis
   matcher: [
     '/api/auth/:path*'
   ]