chore: add new hook useCopyToClipboard (#3109)

shanpriyan · web-flow · commit 2e4bc25fddc2 · 2023-01-04T11:09:49.000+01:00
* Chore: add new hook `useCopyToClipboard`

* Chore: replace util with hook

* Chore: remove util

* CHore: update delay

* Chore: update format

* Chore: update test

* Chore: fix nits

* Chore: fix nits
diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { highlight, languages } from 'prismjs';
 import { sanitize } from 'isomorphic-dompurify';
 import classnames from 'classnames';
-import { copyTextToClipboard } from '../../../util/copyTextToClipboard';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import styles from './index.module.scss';
 
 interface Props {
@@ -26,8 +26,8 @@ const replaceLabelLanguages = (language: string) =>
     .toUpperCase();
 
 const Codebox = ({ children: { props } }: Props): JSX.Element => {
-  const [copied, setCopied] = useState(false);
   const [parsedCode, setParsedCode] = useState('');
+  const [copied, copyText] = useCopyToClipboard();
 
   // eslint-disable-next-line react/prop-types
   const className = props.className || 'text';
@@ -43,23 +43,9 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => {
 
   const handleCopyCode = async (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
-    setCopied(await copyTextToClipboard(stringCode));
+    copyText(stringCode);
   };
 
-  useEffect((): (() => void) => {
-    let timer: ReturnType<typeof setTimeout>;
-
-    if (copied) {
-      timer = setTimeout(() => setCopied(false), 3000);
-    }
-
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [copied]);
-
   useEffect(() => {
     const parsedLangauge = replaceLanguages(language);
 
diff --git a/src/components/CommonComponents/ShellBox/index.tsx b/src/components/CommonComponents/ShellBox/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { copyTextToClipboard } from '../../../util/copyTextToClipboard';
+import React from 'react';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import styles from './index.module.scss';
 
 interface Props {
@@ -10,27 +10,13 @@ const ShellBox = ({
   children,
   textToCopy,
 }: React.PropsWithChildren<Props>): JSX.Element => {
-  const [copied, setCopied] = useState(false);
+  const [copied, copyText] = useCopyToClipboard();
 
   const handleCopyCode = async (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
-    setCopied(await copyTextToClipboard(textToCopy));
+    copyText(textToCopy);
   };
 
-  useEffect((): (() => void) => {
-    let timer: ReturnType<typeof setTimeout>;
-
-    if (copied) {
-      timer = setTimeout(() => setCopied(false), 3000);
-    }
-
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [copied]);
-
   return (
     <pre className={styles.shellBox}>
       <div className={styles.top}>
diff --git a/src/hooks/__tests__/useCopyToClipboard.test.tsx b/src/hooks/__tests__/useCopyToClipboard.test.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { useCopyToClipboard } from '../useCopyToClipboard';
+
+describe('useCopyToClipboard', () => {
+  const HookRenderer = ({ text }: { text: string }): JSX.Element => {
+    const [copied, copyText] = useCopyToClipboard();
+
+    return (
+      <button onClick={() => copyText(text)} type="button">
+        {copied ? 'copied' : 'copy'}
+      </button>
+    );
+  };
+
+  it('should have `copy` text when failed', async () => {
+    const navigatorClipboardWriteTextSpy = jest
+      .fn()
+      .mockImplementation(() => Promise.reject());
+
+    Object.defineProperty(window.navigator, 'clipboard', {
+      writable: true,
+      value: {
+        writeText: navigatorClipboardWriteTextSpy,
+      },
+    });
+
+    render(<HookRenderer text="test copy" />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('copy');
+  });
+
+  it('should change to `copied` when copy succeeded', async () => {
+    jest.useFakeTimers();
+    const navigatorClipboardWriteTextSpy = jest
+      .fn()
+      .mockImplementation(() => Promise.resolve());
+
+    Object.defineProperty(window.navigator, 'clipboard', {
+      writable: true,
+      value: {
+        writeText: navigatorClipboardWriteTextSpy,
+      },
+    });
+
+    render(<HookRenderer text="test copy" />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(button).toHaveTextContent('copied');
+    });
+    jest.advanceTimersByTime(3000);
+    await waitFor(() => {
+      expect(button).toHaveTextContent('copy');
+    });
+  });
+
+  it('should call clipboard API with `test` once', () => {
+    const navigatorClipboardWriteTextSpy = jest
+      .fn()
+      .mockImplementation(() => Promise.resolve());
+
+    Object.defineProperty(window.navigator, 'clipboard', {
+      writable: true,
+      value: {
+        writeText: navigatorClipboardWriteTextSpy,
+      },
+    });
+
+    render(<HookRenderer text="test" />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
+    expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test');
+  });
+});
diff --git a/src/hooks/useCopyToClipboard.ts b/src/hooks/useCopyToClipboard.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+const copyToClipboard = (value: string) => {
+  if (typeof window === 'undefined') {
+    return Promise.resolve(false);
+  }
+
+  return navigator.clipboard
+    .writeText(value)
+    .then(() => true)
+    .catch(() => false);
+};
+
+export const useCopyToClipboard = (): [boolean, (text: string) => void] => {
+  const [copied, setCopied] = useState(false);
+
+  const copyText = (text: string) => copyToClipboard(text).then(setCopied);
+
+  useEffect(() => {
+    if (!copied) {
+      return undefined;
+    }
+
+    const timerId = setTimeout(() => setCopied(false), 3000);
+
+    return () => clearTimeout(timerId);
+  }, [copied]);
+
+  return [copied, copyText];
+};
diff --git a/src/util/__tests__/copyTextToClipboard.test.ts b/src/util/__tests__/copyTextToClipboard.test.ts
diff --git a/src/util/copyTextToClipboard.ts b/src/util/copyTextToClipboard.ts
