From 3ab9f0423e97af63da4bf6a13ffd786955bd5b3b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 26 Oct 2023 21:55:55 +0200 Subject: refactor(hooks,providers): rewrite useAckee hook and AckeeProvider --- .../forms/ackee-toggle/ackee-toggle.fixture.ts | 1 - .../forms/ackee-toggle/ackee-toggle.stories.tsx | 6 +- .../forms/ackee-toggle/ackee-toggle.test.tsx | 3 +- .../organisms/forms/ackee-toggle/ackee-toggle.tsx | 54 ++---------- .../organisms/modals/settings-modal.stories.tsx | 16 +--- .../organisms/modals/settings-modal.test.tsx | 31 +++---- src/components/organisms/modals/settings-modal.tsx | 13 +-- .../organisms/toolbar/settings.stories.tsx | 29 ++----- src/components/organisms/toolbar/settings.test.tsx | 16 ++-- src/components/organisms/toolbar/settings.tsx | 9 +- .../organisms/toolbar/toolbar.stories.tsx | 13 +-- src/components/organisms/toolbar/toolbar.test.tsx | 11 +-- src/components/organisms/toolbar/toolbar.tsx | 4 +- src/components/templates/layout/layout.tsx | 2 - src/pages/_app.tsx | 14 +++- src/types/app.ts | 2 + src/utils/constants.ts | 4 + src/utils/hooks/index.ts | 2 +- src/utils/hooks/use-ackee/index.ts | 1 + src/utils/hooks/use-ackee/use-ackee.test.tsx | 44 ++++++++++ src/utils/hooks/use-ackee/use-ackee.ts | 15 ++++ src/utils/hooks/use-update-ackee-options.tsx | 17 ---- .../ackee-provider/ackee-provider.test.tsx | 46 +++++++++++ .../providers/ackee-provider/ackee-provider.tsx | 95 ++++++++++++++++++++++ src/utils/providers/ackee-provider/index.ts | 1 + src/utils/providers/ackee.tsx | 58 ------------- src/utils/providers/index.ts | 2 +- 27 files changed, 265 insertions(+), 244 deletions(-) delete mode 100644 src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts create mode 100644 src/utils/hooks/use-ackee/index.ts create mode 100644 src/utils/hooks/use-ackee/use-ackee.test.tsx create mode 100644 src/utils/hooks/use-ackee/use-ackee.ts delete mode 100644 src/utils/hooks/use-update-ackee-options.tsx create mode 100644 src/utils/providers/ackee-provider/ackee-provider.test.tsx create mode 100644 src/utils/providers/ackee-provider/ackee-provider.tsx create mode 100644 src/utils/providers/ackee-provider/index.ts delete mode 100644 src/utils/providers/ackee.tsx (limited to 'src') diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts deleted file mode 100644 index 04602f2..0000000 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts +++ /dev/null @@ -1 +0,0 @@ -export const storageKey = 'ackee'; diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx index 4122ed2..1b7b87b 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx @@ -1,6 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { AckeeToggle } from './ackee-toggle'; -import { storageKey } from './ackee-toggle.fixture'; /** * AckeeToggle - Storybook Meta @@ -41,7 +40,4 @@ const Template: ComponentStory = (args) => ( * Toggle Stories - Ackee */ export const Ackee = Template.bind({}); -Ackee.args = { - defaultValue: 'full', - storageKey, -}; +Ackee.args = {}; diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx index f7f5edf..68f8d19 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx @@ -1,12 +1,11 @@ import { describe, expect, it } from '@jest/globals'; import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { AckeeToggle } from './ackee-toggle'; -import { storageKey } from './ackee-toggle.fixture'; describe('AckeeToggle', () => { // toHaveValue received undefined. Maybe because of localStorage hook... it('renders a toggle component', () => { - render(); + render(); expect( rtlScreen.getByRole('radiogroup', { name: /Tracking:/i, diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx index a9c172b..9493095 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx @@ -1,11 +1,7 @@ /* eslint-disable max-statements */ -import { type ChangeEvent, type FC, useState, useCallback } from 'react'; +import { type FC, useState, useCallback } from 'react'; import { useIntl } from 'react-intl'; -import { - type AckeeOptions, - useLocalStorage, - useUpdateAckeeOptions, -} from '../../../../utils/hooks'; +import { useAckee } from '../../../../utils/hooks'; import { Legend, List, ListItem } from '../../../atoms'; import { Switch, @@ -15,49 +11,22 @@ import { type TooltipProps, } from '../../../molecules'; -const validator = (value: unknown): value is AckeeOptions => - value === 'full' || value === 'partial'; - export type AckeeToggleProps = Omit< SwitchProps, - 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' + 'defaultValue' | 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' > & - Pick & { - /** - * Set additional classnames to the toggle wrapper. - */ - className?: string; - /** - * True if motion should be reduced by default. - */ - defaultValue: AckeeOptions; - /** - * The local storage key to save preference. - */ - storageKey: string; - }; + Pick; /** * AckeeToggle component * * Render a Toggle component to set reduce motion. */ -export const AckeeToggle: FC = ({ - defaultValue, - direction, - storageKey, - ...props -}) => { +export const AckeeToggle: FC = ({ direction, ...props }) => { const intl = useIntl(); - const [value, setValue] = useLocalStorage( - storageKey, - defaultValue, - validator - ); + const [tracking, toggleTracking] = useAckee(); const [isTooltipOpened, setIsTooltipOpened] = useState(false); - useUpdateAckeeOptions(value); - const ackeeLabel = intl.formatMessage({ defaultMessage: 'Tracking:', description: 'AckeeToggle: select label', @@ -95,13 +64,6 @@ export const AckeeToggle: FC = ({ { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' }, ] satisfies [SwitchOption, SwitchOption]; - const updateSetting = useCallback( - (e: ChangeEvent) => { - setValue(e.target.value === 'full' ? 'full' : 'partial'); - }, - [setValue] - ); - const closeTooltip = useCallback(() => { setIsTooltipOpened(false); }, []); @@ -116,7 +78,7 @@ export const AckeeToggle: FC = ({ items={options} legend={{ackeeLabel}} name="ackee" - onSwitch={updateSetting} + onSwitch={toggleTracking} tooltip={ = ({ } - value={value} + value={tracking} /> ); }; diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index 7af0d60..57ce00f 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -1,6 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; /** @@ -10,16 +9,6 @@ export default { title: 'Organisms/Modals', component: SettingsModal, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'A local storage key for Ackee.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', @@ -71,6 +60,5 @@ const Template: ComponentStory = (args) => ( */ export const Settings = Template.bind({}); Settings.args = { - ackeeStorageKey, motionStorageKey, }; diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index bb0cdf2..26d046a 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -1,41 +1,30 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; describe('SettingsModal', () => { it('renders the modal heading', () => { - render( - - ); - expect(screen.getByText(/Settings/i)).toBeInTheDocument(); + render(); + expect(rtlScreen.getByText(/Settings/i)).toBeInTheDocument(); }); it('renders a settings form', () => { - render( - - ); + render(); expect( - screen.getByRole('form', { name: /^Settings form/i }) + rtlScreen.getByRole('form', { name: /^Settings form/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Theme:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Theme:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Code blocks:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Code blocks:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Animations:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Animations:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Tracking:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Tracking:/i }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 5a53bbd..f62312b 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -3,7 +3,6 @@ import { useIntl } from 'react-intl'; import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms'; import { AckeeToggle, - type AckeeToggleProps, MotionToggle, type MotionToggleProps, PrismThemeToggle, @@ -12,10 +11,6 @@ import { import styles from './settings-modal.module.scss'; export type SettingsModalProps = Pick & { - /** - * The local storage key for Ackee settings. - */ - ackeeStorageKey: AckeeToggleProps['storageKey']; /** * The local storage key for Reduce motion settings. */ @@ -29,7 +24,6 @@ export type SettingsModalProps = Pick & { */ export const SettingsModal: FC = ({ className = '', - ackeeStorageKey, motionStorageKey, }) => { const intl = useIntl(); @@ -70,12 +64,7 @@ export const SettingsModal: FC = ({ defaultValue="on" storageKey={motionStorageKey} /> - + ); diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index bea0d9e..66b4e0f 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { Settings } from './settings'; /** @@ -9,20 +9,9 @@ export default { title: 'Organisms/Toolbar/Settings', component: Settings, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', @@ -92,15 +81,11 @@ const Template: ComponentStory = ({ }) => { const [isOpen, setIsOpen] = useState(isActive); - return ( - { - setIsOpen(!isOpen); - }} - {...args} - /> - ); + const toggle = useCallback(() => { + setIsOpen((prevState) => !prevState); + }, []); + + return ; }; /** diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 9dab407..66fa6a6 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -1,33 +1,35 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Settings } from './settings'; +const doNothing = () => { + // do nothing +}; + describe('Settings', () => { it('renders a button to open settings modal', () => { render( null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Open settings' }) + rtlScreen.getByRole('checkbox', { name: 'Open settings' }) ).toBeInTheDocument(); }); it('renders a button to close settings modal', () => { render( null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Close settings' }) + rtlScreen.getByRole('checkbox', { name: 'Close settings' }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index b7625aa..124dd42 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -20,13 +20,7 @@ const SettingsWithRef: ForwardRefRenderFunction< HTMLDivElement, SettingsProps > = ( - { - ackeeStorageKey, - className = '', - isActive = false, - motionStorageKey, - setIsActive, - }, + { className = '', isActive = false, motionStorageKey, setIsActive }, ref ) => { const intl = useIntl(); @@ -61,7 +55,6 @@ const SettingsWithRef: ForwardRefRenderFunction< label={label} /> diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 7bf545b..22bead9 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Toolbar as ToolbarComponent } from './toolbar'; /** @@ -8,21 +8,10 @@ export default { title: 'Organisms/Toolbar', component: ToolbarComponent, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', searchPage: '#', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 8fb06b0..e6b1022 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Toolbar } from './toolbar'; const nav = [ @@ -12,13 +12,8 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { render( - + ); - expect(screen.getByRole('navigation')).toBeInTheDocument(); + expect(rtlScreen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index 999a29a..be46636 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -7,7 +7,7 @@ import { Settings, type SettingsProps } from './settings'; import styles from './toolbar.module.scss'; export type ToolbarProps = Pick & - Pick & { + Pick & { /** * Set additional classnames to the toolbar wrapper. */ @@ -24,7 +24,6 @@ export type ToolbarProps = Pick & * Render the website toolbar. */ export const Toolbar: FC = ({ - ackeeStorageKey, className = '', motionStorageKey, nav, @@ -76,7 +75,6 @@ export const Toolbar: FC = ({ setIsActive={toggleSearch} /> = ({ url="/" /> { const { locale, defaultLocale } = useRouter(); - const appLocale: string = locale || settings.locales.defaultLocale; + const appLocale: string = locale ?? settings.locales.defaultLocale; const getLayout = Component.getLayout ?? ((page) => page); const { translation, ...componentProps } = pageProps; return ( - + = (value: unknown) => value is T; + +export type AckeeTrackerValue = 'full' | 'partial'; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index e642af9..464db3f 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -30,3 +30,7 @@ export const ROUTES = { } as const; // cSpell:ignore legales thematique developpement + +export const STORAGE_KEY = { + ACKEE: 'ackee-tracking', +} as const; diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index 47e90f1..cf8c01c 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -1,3 +1,4 @@ +export * from './use-ackee'; export * from './use-add-classname'; export * from './use-article'; export * from './use-attributes'; @@ -20,4 +21,3 @@ export * from './use-route-change'; export * from './use-scroll-position'; export * from './use-settings'; export * from './use-state-change'; -export * from './use-update-ackee-options'; diff --git a/src/utils/hooks/use-ackee/index.ts b/src/utils/hooks/use-ackee/index.ts new file mode 100644 index 0000000..81cac12 --- /dev/null +++ b/src/utils/hooks/use-ackee/index.ts @@ -0,0 +1 @@ +export * from './use-ackee'; diff --git a/src/utils/hooks/use-ackee/use-ackee.test.tsx b/src/utils/hooks/use-ackee/use-ackee.test.tsx new file mode 100644 index 0000000..230fe0b --- /dev/null +++ b/src/utils/hooks/use-ackee/use-ackee.test.tsx @@ -0,0 +1,44 @@ +import { act, renderHook } from '@testing-library/react'; +import type { FC, ReactNode } from 'react'; +import type { AckeeTrackerValue } from '../../../types'; +import { AckeeProvider, type AckeeProviderProps } from '../../providers'; +import { useAckee } from './use-ackee'; + +const createWrapper = ( + Wrapper: FC, + config: AckeeProviderProps +) => + function CreatedWrapper({ children }: { children: ReactNode }) { + return {children}; + }; + +describe('useAckee', () => { + it('should return the default value without provider and prevent update', () => { + const { result } = renderHook(() => useAckee()); + + expect(result.current[0]).toBe('full'); + + act(() => result.current[1]()); + + expect(result.current[0]).toBe('full'); + }); + + it('can update the value', () => { + const defaultValue: AckeeTrackerValue = 'full'; + + const { result } = renderHook(() => useAckee(), { + wrapper: createWrapper(AckeeProvider, { + domainId: 'some-id', + server: 'https://example.com', + storageKey: 'veniam', + tracking: defaultValue, + }), + }); + + expect(result.current[0]).toBe(defaultValue); + + act(() => result.current[1]()); + + expect(result.current[0]).toBe('partial'); + }); +}); diff --git a/src/utils/hooks/use-ackee/use-ackee.ts b/src/utils/hooks/use-ackee/use-ackee.ts new file mode 100644 index 0000000..a89701a --- /dev/null +++ b/src/utils/hooks/use-ackee/use-ackee.ts @@ -0,0 +1,15 @@ +import { useCallback, useContext } from 'react'; +import { AckeeContext } from '../../providers'; + +export const useAckee = () => { + const { tracking, setTracking } = useContext(AckeeContext); + + const toggle = useCallback(() => { + setTracking((prev) => { + if (prev === 'full') return 'partial'; + return 'full'; + }); + }, [setTracking]); + + return [tracking, toggle] as const; +}; diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx deleted file mode 100644 index f6e5c86..0000000 --- a/src/utils/hooks/use-update-ackee-options.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect } from 'react'; -import { useAckeeTracker } from '../providers'; - -export type AckeeOptions = 'full' | 'partial'; - -/** - * Update Ackee settings with the given choice. - * - * @param {AckeeOptions} value - Either `full` or `partial`. - */ -export const useUpdateAckeeOptions = (value: AckeeOptions) => { - const { setDetailed } = useAckeeTracker(); - - useEffect(() => { - setDetailed(value === 'full'); - }, [value, setDetailed]); -}; diff --git a/src/utils/providers/ackee-provider/ackee-provider.test.tsx b/src/utils/providers/ackee-provider/ackee-provider.test.tsx new file mode 100644 index 0000000..7ba11dc --- /dev/null +++ b/src/utils/providers/ackee-provider/ackee-provider.test.tsx @@ -0,0 +1,46 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { type FC, useContext } from 'react'; +import type { AckeeTrackerValue } from '../../../types'; +import { AckeeContext, AckeeProvider } from './ackee-provider'; + +const bodyPrefix = 'Tracking is set to:'; + +const ComponentTest: FC = () => { + const { tracking } = useContext(AckeeContext); + + return ( +
+ {bodyPrefix} {tracking} +
+ ); +}; + +describe('AckeeProvider', () => { + it('uses the default value when the provider is not used', () => { + render(); + + expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent( + `${bodyPrefix} full` + ); + }); + + it('provides the given tracking value to its children', () => { + const tracking: AckeeTrackerValue = 'partial'; + + render( + + + + ); + + expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent( + `${bodyPrefix} ${tracking}` + ); + }); +}); diff --git a/src/utils/providers/ackee-provider/ackee-provider.tsx b/src/utils/providers/ackee-provider/ackee-provider.tsx new file mode 100644 index 0000000..8cd29cd --- /dev/null +++ b/src/utils/providers/ackee-provider/ackee-provider.tsx @@ -0,0 +1,95 @@ +import { useRouter } from 'next/router'; +import { + type FC, + type ReactNode, + createContext, + type Dispatch, + type SetStateAction, + useMemo, +} from 'react'; +import { useAckee } from 'use-ackee'; +import type { AckeeTrackerValue } from '../../../types'; +import { useLocalStorage } from '../../hooks'; + +type AckeeContextProps = { + tracking: AckeeTrackerValue; + setTracking: Dispatch>; +}; + +export const AckeeContext = createContext({ + setTracking: (value) => value, + tracking: 'full', +}); + +const validator = (value: unknown): value is AckeeTrackerValue => + value === 'full' || value === 'partial'; + +export type AckeeProviderProps = { + /** + * The provider children. + */ + children?: ReactNode; + /** + * The id given by Ackee for this domain. + */ + domainId: string; + /** + * Should we track visits from localhost? + * + * @default false + */ + isLocalhostTracked?: boolean; + /** + * Should we track our own visits? + * + * @default false + */ + isOwnVisitsTracked?: boolean; + /** + * An URL that points to your Ackee installation (without trailing slash). + */ + server: string; + /** + * The key to use in local storage. + */ + storageKey: string; + /** + * Should the tracking be detailed (full) or not (partial)? + */ + tracking: AckeeTrackerValue; +}; + +export const AckeeProvider: FC = ({ + children, + domainId, + isLocalhostTracked = false, + isOwnVisitsTracked = false, + server, + storageKey, + tracking: tracker, +}) => { + const [tracking, setTracking] = useLocalStorage( + storageKey, + tracker, + validator + ); + const { asPath } = useRouter(); + + useAckee( + asPath, + { domainId, server }, + { + detailed: tracking === 'full', + ignoreLocalhost: !isLocalhostTracked, + ignoreOwnVisits: !isOwnVisitsTracked, + } + ); + + const value = useMemo(() => { + return { setTracking, tracking }; + }, [setTracking, tracking]); + + return ( + {children} + ); +}; diff --git a/src/utils/providers/ackee-provider/index.ts b/src/utils/providers/ackee-provider/index.ts new file mode 100644 index 0000000..10f7a26 --- /dev/null +++ b/src/utils/providers/ackee-provider/index.ts @@ -0,0 +1 @@ +export * from './ackee-provider'; diff --git a/src/utils/providers/ackee.tsx b/src/utils/providers/ackee.tsx deleted file mode 100644 index 0cb0166..0000000 --- a/src/utils/providers/ackee.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useRouter } from 'next/router'; -import { createContext, FC, ReactNode, useContext, useState } from 'react'; -import useAckee from 'use-ackee'; - -export type AckeeProps = { - domain: string; - siteId: string; - detailed?: boolean; - setDetailed: (isDetailed: boolean) => void; -}; - -export type AckeeProviderProps = { - children: ReactNode; - domain: string; - siteId: string; - ignoreLocalhost?: boolean; - ignoreOwnVisits?: boolean; -}; - -export const AckeeContext = createContext({ - domain: '', - siteId: '', - setDetailed: (_) => { - // Do nothing. - }, -}); - -export const useAckeeTracker = () => useContext(AckeeContext); - -export const AckeeProvider: FC = ({ - domain, - siteId, - children, - ignoreLocalhost = true, - ignoreOwnVisits = true, -}) => { - const [detailed, setDetailed] = useState(false); - const { asPath } = useRouter(); - - useAckee( - asPath, - { server: domain, domainId: siteId }, - { detailed, ignoreLocalhost, ignoreOwnVisits } - ); - - return ( - - {children} - - ); -}; diff --git a/src/utils/providers/index.ts b/src/utils/providers/index.ts index 43641a1..640730f 100644 --- a/src/utils/providers/index.ts +++ b/src/utils/providers/index.ts @@ -1,2 +1,2 @@ -export * from './ackee'; +export * from './ackee-provider'; export * from './prism-theme'; -- cgit v1.2.3