From 757201fdc5c04a3f15504f74bf8ab85bb6018c2b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 27 Oct 2023 11:09:38 +0200
Subject: refactor(hooks,provider): move reduce motion setter

Since the local storage key is not meant to change between the
components, it should be set directly inside the app file. So
both the local storage and the data attribute should be handle
in a provider.
I also added a custom document because we need a script to
retrieve the stored value in local storage earlier to avoid
flashing on hydration.
---
 src/utils/hooks/index.ts                           |  1 +
 src/utils/hooks/use-reduced-motion/index.ts        |  1 +
 .../use-reduced-motion/use-reduced-motion.test.tsx | 66 ++++++++++++++++++++++
 .../hooks/use-reduced-motion/use-reduced-motion.ts |  9 +++
 4 files changed, 77 insertions(+)
 create mode 100644 src/utils/hooks/use-reduced-motion/index.ts
 create mode 100644 src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
 create mode 100644 src/utils/hooks/use-reduced-motion/use-reduced-motion.ts

(limited to 'src/utils/hooks')

diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index cf8c01c..606c259 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -17,6 +17,7 @@ export * from './use-prism';
 export * from './use-query-selector-all';
 export * from './use-reading-time';
 export * from './use-redirection';
+export * from './use-reduced-motion';
 export * from './use-route-change';
 export * from './use-scroll-position';
 export * from './use-settings';
diff --git a/src/utils/hooks/use-reduced-motion/index.ts b/src/utils/hooks/use-reduced-motion/index.ts
new file mode 100644
index 0000000..23d9c62
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/index.ts
@@ -0,0 +1 @@
+export * from './use-reduced-motion';
diff --git a/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
new file mode 100644
index 0000000..6423c4c
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
@@ -0,0 +1,66 @@
+import { act, renderHook } from '@testing-library/react';
+import type { FC, ReactNode } from 'react';
+import { MotionProvider, type MotionProviderProps } from '../../providers';
+import { useReducedMotion } from './use-reduced-motion';
+
+const createWrapper = (
+  Wrapper: FC<MotionProviderProps>,
+  config: MotionProviderProps
+) =>
+  function CreatedWrapper({ children }: { children: ReactNode }) {
+    return <Wrapper {...config}>{children}</Wrapper>;
+  };
+
+describe('useReducedMotion', () => {
+  it('should return the default value without provider and prevent update', () => {
+    const { result } = renderHook(() => useReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.setIsReduced(true));
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+  });
+
+  it('can update the value', () => {
+    const defaultValue = true;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    const newValue = false;
+
+    act(() => result.current.setIsReduced(newValue));
+
+    expect(result.current.isReduced).toBe(newValue);
+  });
+
+  it('can toggle the value', () => {
+    const defaultValue = false;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(!defaultValue);
+  });
+});
diff --git a/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts b/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts
new file mode 100644
index 0000000..2937b75
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts
@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { MotionContext } from '../../providers/motion-provider';
+
+export const useReducedMotion = () => {
+  const { isReduced, setIsReduced, toggleReducedMotion } =
+    useContext(MotionContext);
+
+  return { isReduced, setIsReduced, toggleReducedMotion };
+};
-- 
cgit v1.2.3