From 3ab9f0423e97af63da4bf6a13ffd786955bd5b3b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 26 Oct 2023 21:55:55 +0200
Subject: refactor(hooks,providers): rewrite useAckee hook and AckeeProvider

---
 .../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 +--
 6 files changed, 22 insertions(+), 60 deletions(-)

(limited to 'src/components/organisms/toolbar')

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<typeof Settings> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return (
-    <Settings
-      isActive={isOpen}
-      setIsActive={() => {
-        setIsOpen(!isOpen);
-      }}
-      {...args}
-    />
-  );
+  const toggle = useCallback(() => {
+    setIsOpen((prevState) => !prevState);
+  }, []);
+
+  return <Settings isActive={isOpen} setIsActive={toggle} {...args} />;
 };
 
 /**
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(
       <Settings
-        ackeeStorageKey="ackee-tracking"
         motionStorageKey="reduced-motion"
         isActive={false}
-        setIsActive={() => 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(
       <Settings
-        ackeeStorageKey="ackee-tracking"
         motionStorageKey="reduced-motion"
         isActive={true}
-        setIsActive={() => 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}
       />
       <SettingsModal
-        ackeeStorageKey={ackeeStorageKey}
         className={`${styles.modal} ${className}`}
         motionStorageKey={motionStorageKey}
       />
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(
-      <Toolbar
-        ackeeStorageKey="ackee-tracking"
-        motionStorageKey="reduced-motion"
-        nav={nav}
-        searchPage="#"
-      />
+      <Toolbar motionStorageKey="reduced-motion" nav={nav} searchPage="#" />
     );
-    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<SearchProps, 'searchPage'> &
-  Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
+  Pick<SettingsProps, 'motionStorageKey'> & {
     /**
      * Set additional classnames to the toolbar wrapper.
      */
@@ -24,7 +24,6 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
  * Render the website toolbar.
  */
 export const Toolbar: FC<ToolbarProps> = ({
-  ackeeStorageKey,
   className = '',
   motionStorageKey,
   nav,
@@ -76,7 +75,6 @@ export const Toolbar: FC<ToolbarProps> = ({
         setIsActive={toggleSearch}
       />
       <Settings
-        ackeeStorageKey={ackeeStorageKey}
         className={`${styles.modal} ${styles['modal--settings']}`}
         isActive={isSettingsOpened}
         motionStorageKey={motionStorageKey}
-- 
cgit v1.2.3