Replace $FlowFixMe in WebSocketInterceptor callbacks (facebook#48702)

Summary:

Changelog:
[General][Changed] - Improved types in WebSockertInterceptor callbacks

Reviewed By: cortinico

Differential Revision: D68210857

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -106,7 +106,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   };
 
   // Map of `socketId` -> `index in `this.state.requests`.
-  _socketIdMap: {[string]: number} = {};
+  _socketIdMap: {[number]: number} = {};
   // Map of `xhr._index` -> `index in `this.state.requests`.
   _xhrIdMap: {[key: number]: number, ...} = {};
 
@@ -275,7 +275,7 @@ class NetworkOverlay extends React.Component<Props, State> {
       });
     });
 
-    WebSocketInterceptor.setOnMessageCallback((socketId, message) => {
+    WebSocketInterceptor.setOnMessageCallback((message, socketId) => {
       const socketIndex = this._socketIdMap[socketId];
       if (socketIndex === undefined) {
         return;
@@ -294,7 +294,7 @@ class NetworkOverlay extends React.Component<Props, State> {
       });
     });
 
-    WebSocketInterceptor.setOnCloseCallback((socketId, message) => {
+    WebSocketInterceptor.setOnCloseCallback((message, socketId) => {
       const socketIndex = this._socketIdMap[socketId];
       if (socketIndex === undefined) {
         return;
@@ -308,7 +308,7 @@ class NetworkOverlay extends React.Component<Props, State> {
       });
     });
 
-    WebSocketInterceptor.setOnErrorCallback((socketId, message) => {
+    WebSocketInterceptor.setOnErrorCallback((message, socketId) => {
       const socketIndex = this._socketIdMap[socketId];
       if (socketIndex === undefined) {
         return;

packages/react-native/Libraries/WebSocket/WebSocketInterceptor.js

@@ -40,50 +40,78 @@ let isInterceptorEnabled = false;
 const WebSocketInterceptor = {
   /**
    * Invoked when RCTWebSocketModule.close(...) is called.
+   * The callback is invoked with the following parameters:
+   * - `'code'` - The status code explaining why the connection was closed,
+   * - `'reason'` - The reason explaining why the connection was closed,
+   * - `'socketId'` - The id of the socket.
    */
-  setCloseCallback(callback: $FlowFixMe) {
+  setCloseCallback(callback: ?(number | null, string | null, number) => void) {
     closeCallback = callback;
   },
 
   /**
    * Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
+   * The callback is invoked with the following parameters:
+   * - `'data'` - The data sent,
+   * - `'socketId'` - The id of the socket.
    */
-  setSendCallback(callback: $FlowFixMe) {
+  setSendCallback(callback: ?(string | ArrayBuffer, number) => void) {
     sendCallback = callback;
   },
 
   /**
    * Invoked when RCTWebSocketModule.connect(...) is called.
+   * The callback is invoked with the following parameters:
+   * - `'url'` - The url of the socket,
+   * - `'protocols'` - The protocols of the socket,
+   * - `'options'` - The options of the socket,
+   * - `'socketId'` - The id of the socket.
    */
-  setConnectCallback(callback: $FlowFixMe) {
+  setConnectCallback(
+    callback: ?(string, Array<string> | null, Array<string>, number) => void,
+  ) {
     connectCallback = callback;
   },
 
   /**
    * Invoked when event "websocketOpen" happens.
+   * The callback is invoked with the following parameters:
+   * - `'socketId'` - The id of the socket.
    */
-  setOnOpenCallback(callback: $FlowFixMe) {
+  setOnOpenCallback(callback: ?(number) => void) {
     onOpenCallback = callback;
   },
 
   /**
    * Invoked when event "websocketMessage" happens.
+   * The callback is invoked with the following parameters:
+   * - `'data'` - The data received,
+   * - `'socketId'` - The id of the socket.
    */
-  setOnMessageCallback(callback: $FlowFixMe) {
+  setOnMessageCallback(callback: ?(string | ArrayBuffer, number) => void) {
     onMessageCallback = callback;
   },
 
   /**
    * Invoked when event "websocketFailed" happens.
+   * The callback is invoked with the following parameters:
+   * - `'message'` - The error message,
+   * - `'socketId'` - The id of the socket.
    */
-  setOnErrorCallback(callback: $FlowFixMe) {
+  setOnErrorCallback(callback: ?({message: string}, number) => void) {
     onErrorCallback = callback;
   },
 
   /**
    * Invoked when event "websocketClosed" happens.
+   * The callback is invoked with the following parameters:
+   * - `'code'` - The status code explaining why the connection was closed,
+   * - `'reason'` - The reason explaining why the connection was closed,
+   * - `'socketId'` - The id of the socket.
    */
-  setOnCloseCallback(callback: $FlowFixMe) {
+  setOnCloseCallback(
+    callback: ?({code: number, reason: ?string}, number) => void,
+  ) {
     onCloseCallback = callback;
   },
 
@@ -105,10 +133,10 @@ const WebSocketInterceptor = {
       eventEmitter.addListener('websocketMessage', ev => {
         if (onMessageCallback) {
           onMessageCallback(
-            ev.id,
             ev.type === 'binary'
               ? WebSocketInterceptor._arrayBufferToString(ev.data)
               : ev.data,
+            ev.id,
           );
         }
       }),
@@ -121,13 +149,13 @@ const WebSocketInterceptor = {
       // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketClosed', ev => {
         if (onCloseCallback) {
-          onCloseCallback(ev.id, {code: ev.code, reason: ev.reason});
+          onCloseCallback({code: ev.code, reason: ev.reason}, ev.id);
         }
       }),
       // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketFailed', ev => {
         if (onErrorCallback) {
-          onErrorCallback(ev.id, {message: ev.message});
+          onErrorCallback({message: ev.message}, ev.id);
         }
       }),
     ];

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5244,7 +5244,7 @@ declare class NetworkOverlay extends React.Component<Props, State> {
     offset: number,
     visibleLength: number,
   };
-  _socketIdMap: { [string]: number };
+  _socketIdMap: { [number]: number };
   _xhrIdMap: { [key: number]: number, ... };
   state: State;
   _enableXHRInterception(): void;
@@ -9493,13 +9493,19 @@ declare module.exports: WebSocketEvent;
 
 exports[`public API should not change unintentionally Libraries/WebSocket/WebSocketInterceptor.js 1`] = `
 "declare const WebSocketInterceptor: {
-  setCloseCallback(callback: $FlowFixMe): void,
-  setSendCallback(callback: $FlowFixMe): void,
-  setConnectCallback(callback: $FlowFixMe): void,
-  setOnOpenCallback(callback: $FlowFixMe): void,
-  setOnMessageCallback(callback: $FlowFixMe): void,
-  setOnErrorCallback(callback: $FlowFixMe): void,
-  setOnCloseCallback(callback: $FlowFixMe): void,
+  setCloseCallback(
+    callback: ?(number | null, string | null, number) => void
+  ): void,
+  setSendCallback(callback: ?(string | ArrayBuffer, number) => void): void,
+  setConnectCallback(
+    callback: ?(string, Array<string> | null, Array<string>, number) => void
+  ): void,
+  setOnOpenCallback(callback: ?(number) => void): void,
+  setOnMessageCallback(callback: ?(string | ArrayBuffer, number) => void): void,
+  setOnErrorCallback(callback: ?({ message: string }, number) => void): void,
+  setOnCloseCallback(
+    callback: ?({ code: number, reason: ?string }, number) => void
+  ): void,
   isInterceptorEnabled(): boolean,
   _unregisterEvents(): void,
   _registerEvents(): void,