fix: apply coderabbitai suggestions

- add browser compatibility check for Clipboard API - propagate copy to clipboard error for higher-level handling - add error handling and improve user feedback to ratelimits logs menu
unkeyed · Nov 13, 2024 · 26055c5 · 26055c5
1 parent c385257
commit 26055c5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx
@@ -40,11 +40,17 @@ export const Menu: React.FC<Props> = ({ namespace, identifier }) => {
       <DropdownMenuContent className="w-56">
         <DropdownMenuItem
           onClick={() => {
-            copyToClipboard(identifier).then(() =>
-              toast.success("Copied to clipboard", {
-                description: identifier,
-              }),
-            );
+            copyToClipboard(identifier)
+              .then(() =>
+                toast.success("Identifier copied to clipboard", {
+                  description: identifier,
+                }),
+              )
+              .catch((err) =>
+                toast.error("Failed to copy to clipboard", {
+                  description: (err as Error).message,
+                }),
+              );
           }}
         >
           <Copy className="w-4 h-4 mr-2" />

diff --git a/internal/ui/src/hooks/use-copy-to-clipboard.tsx b/internal/ui/src/hooks/use-copy-to-clipboard.tsx
@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+const DEFAULT_TIMEOUT = 3000;
+
 export const useCopyToClipboard = (
-  timeout = 3000,
+  timeout = DEFAULT_TIMEOUT,
 ): [boolean, (value: string | ClipboardItem) => Promise<void>] => {
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [copied, setCopied] = useState(false);
@@ -13,23 +15,40 @@ export const useCopyToClipboard = (
     }
   };
 
+  const writeToClipboard = async (value: string | ClipboardItem) => {
+    const isClipboardAvailable =
+      typeof navigator !== "undefined" && navigator.clipboard !== undefined;
+
+    if (!isClipboardAvailable) {
+      throw new Error("Clipboard API is not supported in this browser");
+    }
+
+    if (typeof value === "string") {
+      await navigator.clipboard.writeText(value);
+    } else if (value instanceof ClipboardItem) {
+      await navigator.clipboard.write([value]);
+    }
+  };
+
+  const handleTimeout = () => {
+    if (Number.isFinite(timeout) && timeout >= 0) {
+      timer.current = setTimeout(() => setCopied(false), timeout);
+    } else {
+      console.warn(`Invalid timeout value; defaulting to ${DEFAULT_TIMEOUT}ms`);
+      timer.current = setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);
+    }
+  };
+
   const copyToClipboard = useCallback(
     async (value: string | ClipboardItem) => {
       clearTimer();
       try {
-        if (typeof value === "string") {
-          await navigator.clipboard.writeText(value);
-        } else if (value instanceof ClipboardItem) {
-          await navigator.clipboard.write([value]);
-        }
+        await writeToClipboard(value);
         setCopied(true);
-
-        // Ensure timeout is a non-negative finite number
-        if (Number.isFinite(timeout) && timeout >= 0) {
-          timer.current = setTimeout(() => setCopied(false), timeout);
-        }
+        handleTimeout();
       } catch (error) {
-        console.error("Failed to copy: ", error);
+        console.warn("Failed to copy to clipboard. ", error);
+        throw error; // Propagate error for higher-level handling
       }
     },
     [timeout],