Merge pull request #1478 from ably/react-channel-options-fix

fix: don't compare `agent` channel param when determining whether channel options require reattach

src/common/lib/client/realtimechannel.ts

@@ -189,7 +189,14 @@ class RealtimeChannel extends Channel {
       return false;
     }
     if (options?.params) {
-      if (!this.params || !Utils.shallowEquals(this.params, options.params)) {
+      // Don't check against the `agent` param - it isn't returned in the ATTACHED message
+      const requestedParams = Object.assign({}, options.params);
+      delete requestedParams.agent;
+      if (Object.keys(requestedParams).length !== 0 && !this.params) {
+        return true;
+      }
+
+      if (this.params && !Utils.shallowEquals(this.params, requestedParams)) {
         return true;
       }
     }

src/platform/react-hooks/src/hooks/useChannelStateListener.ts

@@ -1,5 +1,6 @@
+import { useEffect, useRef } from 'react';
 import { Types } from '../../../../../ably.js';
-import { ChannelNameAndId } from '../AblyReactHooks.js';
+import { ChannelNameAndId, ChannelNameAndOptions, channelOptionsWithAgent } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';
 import { useEventListener } from './useEventListener.js';
 
@@ -8,22 +9,40 @@ type ChannelStateListener = (stateChange: Types.ChannelStateChange) => any;
 export function useChannelStateListener(channelName: string, listener?: ChannelStateListener);
 
 export function useChannelStateListener(
-  options: ChannelNameAndId | string,
+  options: ChannelNameAndOptions | string,
   state?: Types.ChannelState | Types.ChannelState[],
   listener?: ChannelStateListener
 );
 
 export function useChannelStateListener(
-  channelNameOrNameAndId: ChannelNameAndId | string,
+  channelNameOrNameAndId: ChannelNameAndOptions | string,
   stateOrListener?: Types.ChannelState | Types.ChannelState[] | ChannelStateListener,
   listener?: (stateChange: Types.ChannelStateChange) => any
 ) {
-  const channelName =
-    typeof channelNameOrNameAndId === 'string' ? channelNameOrNameAndId : channelNameOrNameAndId.channelName;
+  const channelHookOptions =
+    typeof channelNameOrNameAndId === 'object' ? channelNameOrNameAndId : { channelName: channelNameOrNameAndId };
   const id = (channelNameOrNameAndId as ChannelNameAndId)?.id;
 
+  const { channelName, options: channelOptions } = channelHookOptions;
+
   const ably = useAbly(id);
-  const channel = ably.channels.get(channelName);
+  const channel = ably.channels.get(channelName, channelOptionsWithAgent(channelOptions));
+
+  const channelOptionsRef = useRef(channelOptions);
+
+  useEffect(() => {
+    if (channelOptionsRef.current !== channelOptions && channelOptions) {
+      channel.setOptions(channelOptionsWithAgent(channelOptions));
+    }
+    channelOptionsRef.current = channelOptions;
+  }, [channel, channelOptions]);
+
+  useEffect(() => {
+    if (channelOptionsRef.current !== channelOptions && channelOptions) {
+      channel.setOptions(channelOptionsWithAgent(channelOptions));
+    }
+    channelOptionsRef.current = channelOptions;
+  }, [channel, channelOptions]);
 
   const _listener = typeof listener === 'function' ? listener : (stateOrListener as ChannelStateListener);