From 695e5bbbea26f9097d0fc50b2f3d7ec144749fea Mon Sep 17 00:00:00 2001 From: Owen Pearson Date: Wed, 4 Oct 2023 16:57:05 +0100 Subject: [PATCH] refactor: send react-hooks agent as channel param --- CONTRIBUTING.md | 2 +- src/platform/react-hooks/src/AblyProvider.tsx | 13 ------------- src/platform/react-hooks/src/AblyReactHooks.ts | 12 ++++++++++++ src/platform/react-hooks/src/hooks/useChannel.ts | 9 ++++++--- src/platform/react-hooks/src/hooks/usePresence.ts | 9 ++++++--- 5 files changed, 25 insertions(+), 20 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index de0cdea3ec..4dce45af00 100644 --- a/CONTRIBUTING.md +++ b/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 --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 ` with the new version and push the tag to git diff --git a/src/platform/react-hooks/src/AblyProvider.tsx b/src/platform/react-hooks/src/AblyProvider.tsx index b6995c5f0e..c26f8e12a4 100644 --- a/src/platform/react-hooks/src/AblyProvider.tsx +++ b/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 {children}; }; diff --git a/src/platform/react-hooks/src/AblyReactHooks.ts b/src/platform/react-hooks/src/AblyReactHooks.ts index 0d190a818d..fac2c4c7b4 100644 --- a/src/platform/react-hooks/src/AblyReactHooks.ts +++ b/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}`, + }, + }; +} diff --git a/src/platform/react-hooks/src/hooks/useChannel.ts b/src/platform/react-hooks/src/hooks/useChannel.ts index 49aae48e6a..d747281a7d 100644 --- a/src/platform/react-hooks/src/hooks/useChannel.ts +++ b/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]); diff --git a/src/platform/react-hooks/src/hooks/usePresence.ts b/src/platform/react-hooks/src/hooks/usePresence.ts index 88f0c981e8..c328a6055b 100644 --- a/src/platform/react-hooks/src/hooks/usePresence.ts +++ b/src/platform/react-hooks/src/hooks/usePresence.ts @@ -1,6 +1,6 @@ import { Types } from '../../../../../ably.js'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { ChannelParameters } from '../AblyReactHooks.js'; +import { channelOptionsWithAgent, ChannelParameters } from '../AblyReactHooks.js'; import { useAbly } from './useAbly.js'; import { useStateErrors } from './useStateErrors.js'; @@ -31,14 +31,17 @@ export function usePresence( const channelOptions = params.options; const channelOptionsRef = useRef(channelOptions); - const channel = useMemo(() => ably.channels.get(params.channelName, channelOptionsRef.current), [ably, params.channelName]); + 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(channelOptions); + channel.setOptions(channelOptionsWithAgent(channelOptions)); } channelOptionsRef.current = channelOptions; }, [channel, channelOptions]);