refactor(hooks,providers): rewrite useAckee hook and AckeeProvider

4 files changed, 10 insertions, 54 deletions

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<typeof AckeeToggle> = (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(<AckeeToggle storageKey={storageKey} defaultValue="full" />);
+    render(<AckeeToggle />);
     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<TooltipProps, 'direction'> & {
-    /**
-     * 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<TooltipProps, 'direction'>;
 
 /**
  * AckeeToggle component
  *
  * Render a Toggle component to set reduce motion.
  */
-export const AckeeToggle: FC<AckeeToggleProps> = ({
-  defaultValue,
-  direction,
-  storageKey,
-  ...props
-}) => {
+export const AckeeToggle: FC<AckeeToggleProps> = ({ 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<AckeeToggleProps> = ({
     { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' },
   ] satisfies [SwitchOption, SwitchOption];
 
-  const updateSetting = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setValue(e.target.value === 'full' ? 'full' : 'partial');
-    },
-    [setValue]
-  );
-
   const closeTooltip = useCallback(() => {
     setIsTooltipOpened(false);
   }, []);
@@ -116,7 +78,7 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({
       items={options}
       legend={<Legend>{ackeeLabel}</Legend>}
       name="ackee"
-      onSwitch={updateSetting}
+      onSwitch={toggleTracking}
       tooltip={
         <Tooltip
           direction={direction}
@@ -134,7 +96,7 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({
           </List>
         </Tooltip>
       }
-      value={value}
+      value={tracking}
     />
   );
 };