[SDK-3870] refactor: send react-hooks agent as channel param

CONTRIBUTING.md

@@ -18,7 +18,7 @@
 2. Create a new branch for the release, for example `release/1.2.3`
 3. Update the CHANGELOG.md with any customer-affecting changes since the last release and add this to the git index
 4. Run `npm version <VERSION_NUMBER> --no-git-tag-version` with the new version and add the changes to the git index
-5. Update the version number to the new version in `src/platform/react-hooks/src/AblyProvider.tsx`
+5. Update the version number to the new version in `src/platform/react-hooks/src/AblyReactHooks.ts`
 6. Create a PR for the release branch
 7. Once the release PR is landed to the `main` branch, checkout the `main` branch locally (remember to pull the remote changes) and run `npm run build`
 8. Run `git tag <VERSION_NUMBER>` with the new version and push the tag to git

src/platform/react-hooks/src/AblyProvider.tsx

@@ -4,8 +4,6 @@ import * as Ably from 'ably';
 import { Types } from '../../../../ably.js';
 import React, { useMemo } from 'react';
 
-const version = '1.2.45';
-
 const canUseSymbol = typeof Symbol === 'function' && typeof Symbol.for === 'function';
 
 interface AblyProviderProps {
@@ -28,8 +26,6 @@ export function getContext(ctxId = 'default'): AblyContextType {
   return ctxMap[ctxId];
 }
 
-let hasSentAgent = false;
-
 export const AblyProvider = ({ client, children, id = 'default' }: AblyProviderProps) => {
   if (!client) {
     throw new Error('AblyProvider: the `client` prop is required');
@@ -46,14 +42,5 @@ export const AblyProvider = ({ client, children, id = 'default' }: AblyProviderP
     context = ctxMap[id] = React.createContext(realtime ?? 1);
   }
 
-  React.useEffect(() => {
-    if (!hasSentAgent) {
-      hasSentAgent = true;
-      realtime.request('GET', '/time', null, null, {
-        'Ably-Agent': `react-hooks-time-ping/${version}`,
-      });
-    }
-  });
-
   return <context.Provider value={realtime}>{children}</context.Provider>;
 };

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

@@ -16,3 +16,15 @@ export type ChannelNameAndId = {
   id?: string;
 };
 export type ChannelParameters = string | ChannelNameAndOptions;
+
+export const version = '1.2.45';
+
+export function channelOptionsWithAgent(options?: Types.ChannelOptions) {
+  return {
+    ...options,
+    params: {
+      ...options?.params,
+      agent: `react-hooks/${version}`,
+    },
+  };
+}

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

@@ -1,6 +1,6 @@
 import { Types } from '../../../../../ably.js';
 import { useEffect, useMemo, useRef } from 'react';
-import { ChannelParameters } from '../AblyReactHooks.js';
+import { channelOptionsWithAgent, ChannelParameters } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';
 import { useStateErrors } from './useStateErrors.js';
 
@@ -45,13 +45,16 @@ export function useChannel(
   const channelOptionsRef = useRef(channelOptions);
   const ablyMessageCallbackRef = useRef(ablyMessageCallback);
 
-  const channel = useMemo(() => ably.channels.get(channelName, channelOptionsRef.current), [ably, channelName]);
+  const channel = useMemo(
+    () => ably.channels.get(channelName, channelOptionsWithAgent(channelOptionsRef.current)),
+    [ably, channelName]
+  );
 
   const { connectionError, channelError } = useStateErrors(channelHookOptions);
 
   useEffect(() => {
     if (channelOptionsRef.current !== channelOptions && channelOptions) {
-      channel.setOptions(channelOptions);
+      channel.setOptions(channelOptionsWithAgent(channelOptions));
     }
     channelOptionsRef.current = channelOptions;
   }, [channel, channelOptions]);

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

@@ -1,6 +1,6 @@
 import { Types } from '../../../../../ably.js';
-import { useCallback, useEffect, useState } from 'react';
-import { ChannelParameters } from '../AblyReactHooks.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { channelOptionsWithAgent, ChannelParameters } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';
 import { useStateErrors } from './useStateErrors.js';
 
@@ -28,11 +28,24 @@ export function usePresence<T = any>(
 
   const subscribeOnly = typeof channelNameOrNameAndOptions === 'string' ? false : params.subscribeOnly;
 
-  const channel = ably.channels.get(params.channelName, params.options);
+  const channelOptions = params.options;
+  const channelOptionsRef = useRef(channelOptions);
+
+  const channel = useMemo(
+    () => ably.channels.get(params.channelName, channelOptionsWithAgent(channelOptionsRef.current)),
+    [ably, params.channelName]
+  );
   const skip = params.skip;
 
   const { connectionError, channelError } = useStateErrors(params);
 
+  useEffect(() => {
+    if (channelOptionsRef.current !== channelOptions && channelOptions) {
+      channel.setOptions(channelOptionsWithAgent(channelOptions));
+    }
+    channelOptionsRef.current = channelOptions;
+  }, [channel, channelOptions]);
+
   const [presenceData, updatePresenceData] = useState<Array<PresenceMessage<T>>>([]);
 
   const updatePresence = async (message?: Types.PresenceMessage) => {