fixed unsubscribe naming.

Author: Megha Narayanan

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/App.tsx

@@ -282,17 +282,17 @@ function AppContent() {
 
     // Clean up on unmount
     return () => {
-      unsubscribeSandboxStatus();
-      unsubscribeConnect();
-      unsubscribeConnectError();
-      unsubscribeConnectTimeout();
-      unsubscribeReconnect();
-      unsubscribeReconnectAttempt();
-      unsubscribeReconnectError();
-      unsubscribeReconnectFailed();
-      unsubscribeDisconnect();
-      unsubscribeLog();
-      stopPing();
+      unsubscribeSandboxStatus.unsubscribe();
+      unsubscribeConnect.unsubscribe();
+      unsubscribeConnectError.unsubscribe();
+      unsubscribeConnectTimeout.unsubscribe();
+      unsubscribeReconnect.unsubscribe();
+      unsubscribeReconnectAttempt.unsubscribe();
+      unsubscribeReconnectError.unsubscribe();
+      unsubscribeReconnectFailed.unsubscribe();
+      unsubscribeDisconnect.unsubscribe();
+      unsubscribeLog.unsubscribe();
+      stopPing.unsubscribe();
       clearLogs();
       sandboxClientService.disconnect();
     };

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/hooks/useResourceManager.ts

@@ -123,12 +123,12 @@ export const useResourceManager = (
 
     // Cleanup function to unsubscribe from events
     return () => {
-      unsubscribeSavedResources();
-      unsubscribeDeployedBackendResources();
-      unsubscribeCustomFriendlyNames();
-      unsubscribeCustomFriendlyNameUpdated();
-      unsubscribeCustomFriendlyNameRemoved();
-      unsubscribeError();
+      unsubscribeSavedResources.unsubscribe();
+      unsubscribeDeployedBackendResources.unsubscribe();
+      unsubscribeCustomFriendlyNames.unsubscribe();
+      unsubscribeCustomFriendlyNameUpdated.unsubscribe();
+      unsubscribeCustomFriendlyNameRemoved.unsubscribe();
+      unsubscribeError.unsubscribe();
     };
   }, [resourceClientService, sandboxStatus, onResourcesLoaded]);
 

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/resource_client_service.ts

@@ -77,9 +77,9 @@ export class ResourceClientService extends SocketClientService {
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onSavedResources(
-    handler: (data: BackendResourcesData) => void,
-  ): () => void {
+  public onSavedResources(handler: (data: BackendResourcesData) => void): {
+    unsubscribe: () => void;
+  } {
     return this.on(SOCKET_EVENTS.SAVED_RESOURCES, handler);
   }
 
@@ -90,7 +90,7 @@ export class ResourceClientService extends SocketClientService {
    */
   public onDeployedBackendResources(
     handler: (data: BackendResourcesData) => void,
-  ): () => void {
+  ): { unsubscribe: () => void } {
     return this.on(SOCKET_EVENTS.DEPLOYED_BACKEND_RESOURCES, handler);
   }
 
@@ -101,7 +101,7 @@ export class ResourceClientService extends SocketClientService {
    */
   public onCustomFriendlyNames(
     handler: (data: Record<string, string>) => void,
-  ): () => void {
+  ): { unsubscribe: () => void } {
     return this.on(SOCKET_EVENTS.CUSTOM_FRIENDLY_NAMES, handler);
   }
 
@@ -112,7 +112,7 @@ export class ResourceClientService extends SocketClientService {
    */
   public onCustomFriendlyNameUpdated(
     handler: (data: { resourceId: string; friendlyName: string }) => void,
-  ): () => void {
+  ): { unsubscribe: () => void } {
     return this.on(SOCKET_EVENTS.CUSTOM_FRIENDLY_NAME_UPDATED, handler);
   }
 
@@ -123,7 +123,7 @@ export class ResourceClientService extends SocketClientService {
    */
   public onCustomFriendlyNameRemoved(
     handler: (data: { resourceId: string }) => void,
-  ): () => void {
+  ): { unsubscribe: () => void } {
     return this.on(SOCKET_EVENTS.CUSTOM_FRIENDLY_NAME_REMOVED, handler);
   }
 
@@ -132,7 +132,9 @@ export class ResourceClientService extends SocketClientService {
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onError(handler: (data: { message: string }) => void): () => void {
+  public onError(handler: (data: { message: string }) => void): {
+    unsubscribe: () => void;
+  } {
     return this.on(SOCKET_EVENTS.ERROR, handler);
   }
 }

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/sandbox_client_service.ts

@@ -59,11 +59,11 @@ export class SandboxClientService extends SocketClientService {
   /**
    * Registers a handler for sandbox status events
    * @param handler The event handler
-   * @returns A function to unsubscribe
+   * @returns An object with an unsubscribe method
    */
-  public onSandboxStatus(
-    handler: (data: SandboxStatusData) => void,
-  ): () => void {
+  public onSandboxStatus(handler: (data: SandboxStatusData) => void): {
+    unsubscribe: () => void;
+  } {
     return this.on(SOCKET_EVENTS.SANDBOX_STATUS, handler);
   }
 
@@ -84,15 +84,15 @@ export class SandboxClientService extends SocketClientService {
   /**
    * Registers a handler for log events
    * @param handler The event handler
-   * @returns A function to unsubscribe
+   * @returns An object with an unsubscribe method
    */
   public onLog(
     handler: (data: {
       timestamp: string;
       level: string;
       message: string;
     }) => void,
-  ): () => void {
+  ): { unsubscribe: () => void } {
     return this.on('log', handler);
   }
 }

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/socket_client_service.ts

@@ -59,96 +59,155 @@ export class SocketClientService {
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onConnect(handler: ConnectionHandler): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for connection events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onConnect(handler: ConnectionHandler): { unsubscribe: () => void } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('connect', handler);
-    return () => this.socket?.off('connect', handler);
+    return { unsubscribe: () => this.socket?.off('connect', handler) };
   }
 
   /**
    * Registers a handler for disconnection events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onDisconnect(handler: (reason: string) => void): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for disconnection events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onDisconnect(handler: (reason: string) => void): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('disconnect', handler);
-    return () => this.socket?.off('disconnect', handler);
+    return { unsubscribe: () => this.socket?.off('disconnect', handler) };
   }
 
   /**
    * Registers a handler for connection error events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onConnectError(handler: ErrorHandler): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for connection error events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onConnectError(handler: ErrorHandler): { unsubscribe: () => void } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('connect_error', handler);
-    return () => this.socket?.off('connect_error', handler);
+    return { unsubscribe: () => this.socket?.off('connect_error', handler) };
   }
 
   /**
    * Registers a handler for connection timeout events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onConnectTimeout(handler: ConnectionHandler): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for connection timeout events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onConnectTimeout(handler: ConnectionHandler): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('connect_timeout', handler);
-    return () => this.socket?.off('connect_timeout', handler);
+    return { unsubscribe: () => this.socket?.off('connect_timeout', handler) };
   }
 
   /**
    * Registers a handler for reconnection events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onReconnect(handler: (attempt: number) => void): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for reconnection events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onReconnect(handler: (attempt: number) => void): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('reconnect', handler);
-    return () => this.socket?.off('reconnect', handler);
+    return { unsubscribe: () => this.socket?.off('reconnect', handler) };
   }
 
   /**
    * Registers a handler for reconnection attempt events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onReconnectAttempt(handler: (attempt: number) => void): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for reconnection attempt events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onReconnectAttempt(handler: (attempt: number) => void): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('reconnect_attempt', handler);
-    return () => this.socket?.off('reconnect_attempt', handler);
+    return {
+      unsubscribe: () => this.socket?.off('reconnect_attempt', handler),
+    };
   }
 
   /**
    * Registers a handler for reconnection error events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onReconnectError(handler: ErrorHandler): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for reconnection error events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onReconnectError(handler: ErrorHandler): { unsubscribe: () => void } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('reconnect_error', handler);
-    return () => this.socket?.off('reconnect_error', handler);
+    return { unsubscribe: () => this.socket?.off('reconnect_error', handler) };
   }
 
   /**
    * Registers a handler for reconnection failed events
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  public onReconnectFailed(handler: ConnectionHandler): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for reconnection failed events
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  public onReconnectFailed(handler: ConnectionHandler): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on('reconnect_failed', handler);
-    return () => this.socket?.off('reconnect_failed', handler);
+    return { unsubscribe: () => this.socket?.off('reconnect_failed', handler) };
   }
 
   /**
    * Starts a periodic ping to check connection health
    * @param interval The ping interval in milliseconds
    * @returns A function to stop the ping
    */
-  public startPingInterval(interval: number = 30000): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Starts a periodic ping to check connection health
+   * @param interval The ping interval in milliseconds
+   * @returns An object with an unsubscribe method to stop the ping
+   */
+  public startPingInterval(interval: number = 30000): {
+    unsubscribe: () => void;
+  } {
+    if (!this.socket) return { unsubscribe: () => {} };
 
     const pingInterval = setInterval(() => {
       if (this.socket?.connected) {
@@ -164,7 +223,7 @@ export class SocketClientService {
       }
     }, interval);
 
-    return () => clearInterval(pingInterval);
+    return { unsubscribe: () => clearInterval(pingInterval) };
   }
 
   /**
@@ -242,9 +301,18 @@ export class SocketClientService {
    * @param handler The event handler
    * @returns A function to unsubscribe
    */
-  protected on<T>(event: string, handler: (data: T) => void): () => void {
-    if (!this.socket) return () => {};
+  /**
+   * Registers a handler for an event
+   * @param event The event name
+   * @param handler The event handler
+   * @returns An object with an unsubscribe method
+   */
+  protected on<T>(
+    event: string,
+    handler: (data: T) => void,
+  ): { unsubscribe: () => void } {
+    if (!this.socket) return { unsubscribe: () => {} };
     this.socket.on(event, handler);
-    return () => this.socket?.off(event, handler);
+    return { unsubscribe: () => this.socket?.off(event, handler) };
   }
 }