Rename hook

src/components/RoadCard/LongBadge.tsx

@@ -1,8 +1,8 @@
-import { useIsCopied } from '../../hooks/use-is-copied';
+import { useCopyText } from '../../hooks/use-copy-text';
 import type { BadgeProps } from './RoadCardPage';
 
 export function LongBadge({ badgeUrl }: BadgeProps) {
-  const { isCopied, handleCopy } = useIsCopied();
+  const { isCopied, copyText } = useCopyText();
 
   return (
     <div className="col-span-2">
@@ -29,7 +29,7 @@ export function LongBadge({ badgeUrl }: BadgeProps) {
         </a>
         <button
           className="flex h-8 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none cursor-pointer hover:opacity-75"
-          onClick={() => handleCopy(badgeUrl)}
+          onClick={() => copyText(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}
         </button>

src/components/RoadCard/RoadCardPage.tsx

@@ -5,7 +5,7 @@ import { WideBadge } from './WideBadge';
 import { LongBadge } from './LongBadge';
 
 import CopyIcon from '../../icons/copy.svg';
-import { useIsCopied } from '../../hooks/use-is-copied';
+import { useCopyText } from '../../hooks/use-copy-text';
 
 export type BadgeProps = {
   badgeUrl: string;
@@ -16,9 +16,9 @@ export function RoadCardPage() {
   const [selectedVariant, setSelectedVariant] = useState<'dark' | 'light'>(
     'dark'
   );
-  const { isCopied, handleCopy } = useIsCopied();
+  const { isCopied, copyText } = useCopyText();
-  const { isCopied: isMarkdownCopied, handleCopy: handleMarkdownCopy } =
+  const { isCopied: isMarkdownCopied, copyText: handleMarkdownCopy } =
-    useIsCopied();
+    useCopyText();
 
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   if (!token) {
@@ -159,7 +159,7 @@ export function RoadCardPage() {
                 </span>
                 <button
                   className="flex items-center"
-                  onClick={() => handleCopy(textareaContent)}
+                  onClick={() => copyText(textareaContent)}
                 >
                   {isCopied && (
                     <span className="mr-2 text-xs leading-none text-green-500">

src/components/RoadCard/WideBadge.tsx

@@ -1,8 +1,8 @@
-import { useIsCopied } from '../../hooks/use-is-copied';
+import { useCopyText } from '../../hooks/use-copy-text';
 import type { BadgeProps } from './RoadCardPage';
 
 export function WideBadge({ badgeUrl }: BadgeProps) {
-  const { isCopied, handleCopy } = useIsCopied();
+  const { isCopied, copyText } = useCopyText();
   return (
     <div>
       <a
@@ -28,7 +28,7 @@ export function WideBadge({ badgeUrl }: BadgeProps) {
         </a>
         <button
           className="flex h-8 cursor-pointer items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none hover:opacity-75"
-          onClick={() => handleCopy(badgeUrl)}
+          onClick={() => copyText(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}
         </button>

src/hooks/use-copy-text.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'preact/hooks';
 
-export function useIsCopied() {
+export function useCopyText() {
   const [isCopied, setIsCopied] = useState(false);
 
-  const handleCopy = (text: string) => {
+  const copyText = (text: string) => {
-    navigator.clipboard.writeText(text);
+    navigator.clipboard.writeText(text).then();
     setIsCopied(true);
   };
 
@@ -18,5 +18,5 @@ export function useIsCopied() {
     return () => clearTimeout(timeout);
   }, [isCopied]);
 
-  return { isCopied, handleCopy };
+  return { isCopied, copyText };
 }