From 617985e38833d5e70e23ec3f9a97726c43726810 Mon Sep 17 00:00:00 2001 From: Oliver Lloyd Date: Tue, 8 Feb 2022 16:20:52 +0000 Subject: [PATCH 1/3] refactor: Created `WithAB` wrapper --- .../src/web/components/BootReact.tsx | 21 ++-------- .../src/web/components/WithAB.tsx | 42 +++++++++++++++++++ 2 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 dotcom-rendering/src/web/components/WithAB.tsx diff --git a/dotcom-rendering/src/web/components/BootReact.tsx b/dotcom-rendering/src/web/components/BootReact.tsx index 96f1ff2a48d..a2590ae4b97 100644 --- a/dotcom-rendering/src/web/components/BootReact.tsx +++ b/dotcom-rendering/src/web/components/BootReact.tsx @@ -1,13 +1,11 @@ import ReactDOM from 'react-dom'; import { App } from '@root/src/web/components/App'; -import { ABProvider } from '@guardian/ab-react'; import { tests } from '@frontend/web/experiments/ab-tests'; -import { getForcedParticipationsFromUrl } from '@frontend/web/lib/getAbUrlHash'; -import { getCypressSwitches } from '@frontend/web/experiments/cypress-switches'; import { loadableReady } from '@loadable/component'; import { getOphanRecordFunction } from '@root/src/web/browser/ophan/ophan'; import { getCookie } from '@guardian/libs'; +import { WithAB } from './WithAB'; type Props = { CAPI: CAPIBrowserType; @@ -27,28 +25,17 @@ export const BootReact = ({ CAPI }: Props) => { const ophanRecord = getOphanRecordFunction(); - const windowHash = window && window.location && window.location.hash; - - // Get the forced switches to use for when running within cypress - // Is empty object if not in cypress - const cypressAbSwitches = getCypressSwitches(); - loadableReady(() => { ReactDOM.render( - - , + , document.getElementById('react-root'), ); diff --git a/dotcom-rendering/src/web/components/WithAB.tsx b/dotcom-rendering/src/web/components/WithAB.tsx new file mode 100644 index 00000000000..7358e43bc60 --- /dev/null +++ b/dotcom-rendering/src/web/components/WithAB.tsx @@ -0,0 +1,42 @@ +import { CoreAPIConfig, OphanAPIConfig } from '@guardian/ab-core/dist/types'; +import { ABProvider } from '@guardian/ab-react'; +import { getCypressSwitches } from '../experiments/cypress-switches'; +import { getForcedParticipationsFromUrl } from '../lib/getAbUrlHash'; + +type Props = { + arrayOfTestObjects: CoreAPIConfig['arrayOfTestObjects']; + abTestSwitches: CoreAPIConfig['abTestSwitches']; + pageIsSensitive: CoreAPIConfig['pageIsSensitive']; + mvtId: CoreAPIConfig['mvtId']; + ophanRecord: OphanAPIConfig['ophanRecord']; + children: JSX.Element; +}; +export const WithAB = ({ + arrayOfTestObjects, + abTestSwitches, + pageIsSensitive, + mvtId, + ophanRecord, + children, +}: Props) => { + const windowHash = window && window.location && window.location.hash; + // Get the forced switches to use for when running within cypress + // Is empty object if not in cypress + const cypressAbSwitches = getCypressSwitches(); + return ( + + {children} + + ); +}; From 35243ef62fc1d18f79f03bcb1b0991fc0d432965 Mon Sep 17 00:00:00 2001 From: Oliver Lloyd Date: Wed, 9 Feb 2022 09:51:25 +0000 Subject: [PATCH 2/3] refactor: `WithAB` > `WithABProvider` --- dotcom-rendering/src/web/components/BootReact.tsx | 6 +++--- .../src/web/components/{WithAB.tsx => WithABProvider.tsx} | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) rename dotcom-rendering/src/web/components/{WithAB.tsx => WithABProvider.tsx} (97%) diff --git a/dotcom-rendering/src/web/components/BootReact.tsx b/dotcom-rendering/src/web/components/BootReact.tsx index a2590ae4b97..41d37afe069 100644 --- a/dotcom-rendering/src/web/components/BootReact.tsx +++ b/dotcom-rendering/src/web/components/BootReact.tsx @@ -5,7 +5,7 @@ import { tests } from '@frontend/web/experiments/ab-tests'; import { loadableReady } from '@loadable/component'; import { getOphanRecordFunction } from '@root/src/web/browser/ophan/ophan'; import { getCookie } from '@guardian/libs'; -import { WithAB } from './WithAB'; +import { WithABProvider } from './WithABProvider'; type Props = { CAPI: CAPIBrowserType; @@ -27,7 +27,7 @@ export const BootReact = ({ CAPI }: Props) => { loadableReady(() => { ReactDOM.render( - { ophanRecord={ophanRecord} > - , + , document.getElementById('react-root'), ); diff --git a/dotcom-rendering/src/web/components/WithAB.tsx b/dotcom-rendering/src/web/components/WithABProvider.tsx similarity index 97% rename from dotcom-rendering/src/web/components/WithAB.tsx rename to dotcom-rendering/src/web/components/WithABProvider.tsx index 7358e43bc60..fdb31d9ad2e 100644 --- a/dotcom-rendering/src/web/components/WithAB.tsx +++ b/dotcom-rendering/src/web/components/WithABProvider.tsx @@ -11,7 +11,7 @@ type Props = { ophanRecord: OphanAPIConfig['ophanRecord']; children: JSX.Element; }; -export const WithAB = ({ +export const WithABProvider = ({ arrayOfTestObjects, abTestSwitches, pageIsSensitive, From f5ed7aa6e64481fcd834adab30792f6905b9cdce Mon Sep 17 00:00:00 2001 From: Oliver Lloyd Date: Wed, 9 Feb 2022 09:52:30 +0000 Subject: [PATCH 3/3] Update dotcom-rendering/src/web/components/WithAB.tsx Co-authored-by: James Gorrie --- dotcom-rendering/src/web/components/WithAB.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/web/components/WithAB.tsx b/dotcom-rendering/src/web/components/WithAB.tsx index 7358e43bc60..be4c22211b5 100644 --- a/dotcom-rendering/src/web/components/WithAB.tsx +++ b/dotcom-rendering/src/web/components/WithAB.tsx @@ -19,7 +19,7 @@ export const WithAB = ({ ophanRecord, children, }: Props) => { - const windowHash = window && window.location && window.location.hash; + const windowHash = window?.location.hash; // Get the forced switches to use for when running within cypress // Is empty object if not in cypress const cypressAbSwitches = getCypressSwitches();