refactor: remove console logs for cleaner code and improved readability

src/components/AuthProvider.tsx

@@ -23,7 +23,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
     // Listen for refresh token expiration events
     const handleRefreshTokenExpired = () => {
-      console.log('Refresh token expired, logging out user')
       setUser(null)
     }
 

src/components/sidebar/NavPlan.tsx

@@ -21,7 +21,6 @@ export function NavPlan({ user }: NavPlanProps) {
     if (!socket || !isConnected) return
 
     const handleCreditsChanged = (data: { credits: number }) => {
-      console.log('WAAAAAAZAAAA')
       setCredits(data.credits)
     }
 

src/contexts/MusicPlayerContext.tsx

@@ -90,38 +90,22 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
   useEffect(() => {
     const fetchInitialState = async () => {
       try {
-        console.log('🎵 MusicPlayerContext: Fetching initial player state...')
         const response = await apiService.get('/api/player/state')
-        const state = await response.json()
+        let state = await response.json()
-        
-        console.log('🎵 MusicPlayerContext: Initial state received', {
-          playlist_id: state.playlist_id,
-          is_playing: state.is_playing,
-          current_time: state.current_time,
-          duration: state.duration,
-          playlist_length: state.playlist?.length
-        })
         
         // If no playlist is loaded, try to load the main playlist
         if (!state.playlist_id) {
-          console.log('🎵 MusicPlayerContext: No playlist loaded, attempting to load main playlist...')
           try {
             await apiService.post('/api/player/load-main-playlist')
             // Fetch state again after loading main playlist
             const newResponse = await apiService.get('/api/player/state')
-            const newState = await newResponse.json()
+            state = await newResponse.json()
-            console.log('🎵 MusicPlayerContext: Main playlist loaded, new state:', {
-              playlist_id: newState.playlist_id,
-              playlist_length: newState.playlist?.length
-            })
-            state = newState
           } catch (loadError) {
-            console.warn('🎵 MusicPlayerContext: Failed to load main playlist:', loadError)
+            console.warn('Failed to load main playlist:', loadError)
           }
         }
         
         // Update all state from backend
-        console.log('🎵 MusicPlayerContext: Updating initial state in React')
         setIsPlaying(state.is_playing || false)
         setCurrentTime(state.current_time || 0)
         setDuration(state.duration || 0)
@@ -133,9 +117,8 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
         setCurrentPlaylistId(state.playlist_id || null)
         setCurrentTrack(state.current_track || null)
         
-        console.log('🎵 MusicPlayerContext: Initial state setup complete')
       } catch (error) {
-        console.error('❌ MusicPlayerContext: Failed to fetch initial player state:', error)
+        console.error('Failed to fetch initial player state:', error)
       }
     }
 
@@ -144,23 +127,11 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
 
   // Listen for real-time player updates via SocketIO
   useEffect(() => {
-    console.log('🎵 MusicPlayerContext: Setting up SocketIO listeners', { hasSocket: !!socket });
-    
     if (!socket) {
-      console.log('⏳ MusicPlayerContext: No socket available yet');
       return;
     }
 
     const handlePlayerStateUpdate = (state: any) => {
-      console.log('🎵 MusicPlayerContext: Received player state update', {
-        is_playing: state.is_playing,
-        current_time: state.current_time,
-        duration: state.duration,
-        volume: state.volume,
-        current_track: state.current_track?.title,
-        playlist_length: state.playlist?.length
-      });
-      
       setIsPlaying(state.is_playing || false)
       setCurrentTime(state.current_time || 0)
       setDuration(state.duration || 0)
@@ -173,11 +144,9 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
       setCurrentTrack(state.current_track || null)
     }
 
-    console.log('🎵 MusicPlayerContext: Registering player_state_update listener');
     socket.on('player_state_update', handlePlayerStateUpdate)
 
     return () => {
-      console.log('🎵 MusicPlayerContext: Cleaning up SocketIO listeners');
       socket.off('player_state_update', handlePlayerStateUpdate)
     }
   }, [socket])

src/contexts/SocketContext.tsx

@@ -34,8 +34,6 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
   const { user, loading } = useAuth();
 
   useEffect(() => {
-    console.log('🔌 SocketProvider: Creating socket connection');
-    
     // Create socket connection
     const newSocket = io("http://localhost:5000", {
       withCredentials: true, // Include cookies for authentication
@@ -44,101 +42,48 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
       upgrade: false, // Disable WebSocket upgrade
     });
 
-    console.log('🔌 SocketProvider: Socket created', { 
-      id: newSocket.id, 
-      connected: newSocket.connected,
-      disconnected: newSocket.disconnected 
-    });
-
     // Set up event listeners
     newSocket.on("connect", () => {
-      console.log('✅ SocketIO: Connected successfully', { 
-        id: newSocket.id, 
-        transport: newSocket.io.engine.transport.name 
-      });
-      
-      // Test if events work at all
-      console.log('🧪 SocketIO: Sending test event...');
-      newSocket.emit("test_event", { message: "Frontend test" });
-      
-      // Send manual test event
-      console.log('🧪 SocketIO: Sending manual test event...');
-      newSocket.emit("manual_test", { message: "Frontend manual test" });
       
       // Send authentication after connection
-      console.log('🔐 SocketIO: Sending authentication...');
       newSocket.emit("authenticate", {});
     });
 
-    newSocket.on("auth_success", (data) => {
+    newSocket.on("auth_success", () => {
-      console.log('🎉 SocketIO: Authentication successful', data);
       setIsConnected(true);
     });
 
-    newSocket.on("auth_error", (data) => {
+    newSocket.on("auth_error", () => {
-      console.error('❌ SocketIO: Authentication failed', data);
       setIsConnected(false);
       newSocket.disconnect();
     });
 
-    newSocket.on("disconnect", (reason) => {
+    newSocket.on("disconnect", () => {
-      console.log('🔌 SocketIO: Disconnected', { reason });
       setIsConnected(false);
     });
 
-    newSocket.on("connect_error", (error) => {
+    newSocket.on("connect_error", () => {
-      console.error('❌ SocketIO: Connection error', error);
       setIsConnected(false);
     });
 
-    // Listen for player state updates
-    newSocket.on("player_state_update", (data) => {
-      console.log('🎵 SocketIO: Player state update received', data);
-    });
-
-    // Listen for credits updates
-    newSocket.on("credits_changed", (data) => {
-      console.log('💰 SocketIO: Credits changed', data);
-    });
-
-    // Listen for test response
-    newSocket.on("test_response", (data) => {
-      console.log('🧪 SocketIO: Test response received', data);
-    });
-
     setSocket(newSocket);
 
     // Clean up on unmount
     return () => {
-      console.log('🔌 SocketProvider: Cleaning up socket');
       newSocket.close();
     };
   }, []);
 
   // Connect/disconnect based on authentication state
   useEffect(() => {
-    console.log('🔄 SocketProvider: Auth state changed', { 
-      hasSocket: !!socket, 
-      loading, 
-      hasUser: !!user, 
-      userEmail: user?.email,
-      isConnected,
-      socketConnected: socket?.connected 
-    });
-
     if (!socket || loading) {
-      console.log('⏳ SocketProvider: Waiting for socket or user loading...');
       return;
     }
 
     if (user && !isConnected) {
-      console.log('🚀 SocketProvider: User authenticated, connecting socket...');
       socket.connect();
     } else if (!user && isConnected) {
-      console.log('🔌 SocketProvider: User logged out, disconnecting socket...');
       socket.disconnect();
-    } else {
-      console.log('⚡ SocketProvider: No action needed', { user: !!user, isConnected });
     }
   }, [socket, user, loading, isConnected]);
 

src/services/api.ts

@@ -82,11 +82,8 @@ class ApiService {
       })
 
       if (response.ok) {
-        console.log('Token refreshed successfully')
         return true
       } else {
-        console.log('Token refresh failed:', response.status)
-        
         // If refresh token is also expired (401), trigger logout
         if (response.status === 401) {
           this.handleLogout()
@@ -103,9 +100,6 @@ class ApiService {
    * Handle logout when refresh token expires
    */
   private handleLogout() {
-    // Clear any local storage or state if needed
-    console.log('Refresh token expired, user needs to login again')
-    
     // Dispatch a custom event that the AuthContext can listen to
     window.dispatchEvent(new CustomEvent('auth:refresh-token-expired'))
   }