fix: resolve 16 of 54 lint warnings (#2652)

* fix: adjust useEffect dependencies to prevent lint warnings in button components * fix: remove unused dependencies from useEffects in meteor lines * fix: resolve lint warnings in Particles and ShinyCard components * fix: adjust useEffect dependencies as per coderabbitai comments --------- Co-authored-by: chronark <dev@chronark.com>
unkeyed · Nov 13, 2024 · 0baaa06 · 0baaa06
1 parent 1c31431
commit 0baaa06
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 55 deletions.
diff --git a/apps/dashboard/components/dashboard/copy-button.tsx b/apps/dashboard/components/dashboard/copy-button.tsx
@@ -15,13 +15,17 @@ async function copyToClipboardWithMeta(value: string, _meta?: Record<string, unk
 }
 
 export function CopyButton({ value, className, src, ...props }: CopyButtonProps) {
-  const [hasCopied, setHasCopied] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
 
   React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false);
+    if (!copied) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setCopied(false);
     }, 2000);
-  }, [hasCopied]);
+    return () => clearTimeout(timer);
+  }, [copied]);
 
   return (
     <button
@@ -31,12 +35,12 @@ export function CopyButton({ value, className, src, ...props }: CopyButtonProps)
         copyToClipboardWithMeta(value, {
           component: src,
         });
-        setHasCopied(true);
+        setCopied(true);
       }}
       {...props}
     >
       <span className="sr-only">Copy</span>
-      {hasCopied ? <CopyCheck className="w-full h-full" /> : <Copy className="w-full h-full" />}
+      {copied ? <CopyCheck className="w-full h-full" /> : <Copy className="w-full h-full" />}
     </button>
   );
 }
diff --git a/apps/dashboard/components/dashboard/visible-button.tsx b/apps/dashboard/components/dashboard/visible-button.tsx
@@ -1,7 +1,6 @@
-import * as React from "react";
-
 import { cn } from "@/lib/utils";
 import { Eye, EyeOff } from "lucide-react";
+import { useEffect } from "react";
 
 type VisibleButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
   isVisible: boolean;
@@ -14,11 +13,15 @@ export function VisibleButton({
   setIsVisible,
   ...props
 }: VisibleButtonProps) {
-  React.useEffect(() => {
-    setTimeout(() => {
+  useEffect(() => {
+    if (!isVisible) {
+      return;
+    }
+    const timer = setTimeout(() => {
       setIsVisible(false);
     }, 10000);
-  }, [isVisible]);
+    return () => clearTimeout(timer);
+  }, [setIsVisible, isVisible]);
 
   return (
     <button

diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { Copy, CopyCheck } from "lucide-react";
-import * as React from "react";
+import { useEffect, useState } from "react";
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   value: string;
@@ -14,13 +14,17 @@ async function copyToClipboardWithMeta(value: string, _meta?: Record<string, unk
 }
 
 export function CopyButton({ value, className, src, children, ...props }: CopyButtonProps) {
-  const [hasCopied, setHasCopied] = React.useState(false);
+  const [copied, setCopied] = useState(false);
 
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false);
+  useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setCopied(false);
     }, 2000);
-  }, [hasCopied]);
+    return () => clearTimeout(timer);
+  }, [copied]);
 
   return (
     <button
@@ -34,12 +38,12 @@ export function CopyButton({ value, className, src, children, ...props }: CopyBu
         copyToClipboardWithMeta(value, {
           component: src,
         });
-        setHasCopied(true);
+        setCopied(true);
       }}
       {...props}
     >
       <span className="sr-only">Copy</span>
-      {hasCopied ? (
+      {copied ? (
         <CopyCheck className="w-4 h-4 text-white/40" />
       ) : (
         <Copy className="w-4 h-4 text-white/40" />

diff --git a/apps/www/components/particles.tsx b/apps/www/components/particles.tsx
@@ -2,7 +2,7 @@
 
 import { useMousePosition } from "@/lib/mouse";
 import type React from "react";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 interface ParticlesProps {
   className?: string;
@@ -59,20 +59,19 @@ export const Particles: React.FC<ParticlesProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    onMouseMove();
-  }, [mousePosition.x, mousePosition.y]);
+  const initCanvas = useCallback(() => {
+    resizeCanvas();
+    drawParticles();
+  }, []);
 
   useEffect(() => {
+    if (!refresh) {
+      return;
+    }
     initCanvas();
-  }, [refresh]);
-
-  const initCanvas = () => {
-    resizeCanvas();
-    drawParticles();
-  };
+  }, [initCanvas, refresh]);
 
-  const onMouseMove = () => {
+  const onMouseMove = useCallback(() => {
     if (canvasRef.current) {
       const rect = canvasRef.current.getBoundingClientRect();
       const { w, h } = canvasSize.current;
@@ -84,7 +83,11 @@ export const Particles: React.FC<ParticlesProps> = ({
         mouse.current.y = y;
       }
     }
-  };
+  }, [mousePosition.x, mousePosition.y]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [onMouseMove]);
 
   type Circle = {
     x: number;

diff --git a/apps/www/components/shiny-card.tsx b/apps/www/components/shiny-card.tsx
@@ -2,7 +2,7 @@
 
 import { useMousePosition } from "@/lib/mouse";
 import type React from "react";
-import { type PropsWithChildren, useEffect, useRef, useState } from "react";
+import { type PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
 
 type ShinyCardGroupProps = {
   children: React.ReactNode;
@@ -33,24 +33,16 @@ export const ShinyCardGroup: React.FC<ShinyCardGroupProps> = ({
     return () => {
       window.removeEventListener("resize", initContainer);
     };
-  }, [setBoxes]);
-
-  useEffect(() => {
-    onMouseMove();
-  }, [mousePosition]);
-
-  useEffect(() => {
-    initContainer();
-  }, [refresh]);
+  }, []);
 
-  const initContainer = () => {
+  const initContainer = useCallback(() => {
     if (containerRef.current) {
       containerSize.current.w = containerRef.current.offsetWidth;
       containerSize.current.h = containerRef.current.offsetHeight;
     }
-  };
+  }, []);
 
-  const onMouseMove = () => {
+  const onMouseMove = useCallback(() => {
     if (containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const { w, h } = containerSize.current;
@@ -68,7 +60,18 @@ export const ShinyCardGroup: React.FC<ShinyCardGroupProps> = ({
         });
       }
     }
-  };
+  }, [mousePosition.x, mousePosition.y]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [onMouseMove]);
+
+  useEffect(() => {
+    if (!refresh) {
+      return;
+    }
+    initContainer();
+  }, [initContainer, refresh]);
 
   return (
     <div className={className} ref={containerRef}>

diff --git a/apps/www/components/ui/copy-code-button.tsx b/apps/www/components/ui/copy-code-button.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 type Props = {
   textToCopy: string;
@@ -8,6 +8,16 @@ type Props = {
 export function CopyCodeSnippetButton(props: Props) {
   const [copied, setCopied] = useState(false);
 
+  useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
   return (
     <button
       type="button"
@@ -16,9 +26,6 @@ export function CopyCodeSnippetButton(props: Props) {
       onClick={() => {
         navigator.clipboard.writeText(props.textToCopy);
         setCopied(true);
-        setTimeout(() => {
-          setCopied(false);
-        }, 2000);
       }}
     >
       {copied ? <CheckmarkCircle /> : <CopyIcon />}

diff --git a/apps/www/components/ui/meteorLines.tsx b/apps/www/components/ui/meteorLines.tsx
@@ -21,7 +21,6 @@ const MeteorLines = ({
   className,
 }: MeteorsProps) => {
   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>([]);
-  const [windowWidth, _setWindowWidth] = useState<number>(0);
   useEffect(() => {
     const width = window.innerWidth;
     const pos = direction === "left" ? xPos : width - (xPos + 75);
@@ -35,7 +34,7 @@ const MeteorLines = ({
     }));
 
     setMeteorStyles(styles);
-  }, [number, windowWidth]);
+  }, [number, delay, xPos, speed]);
 
   return (
     <>
@@ -65,11 +64,8 @@ const MeteorLinesAngular = ({
   className,
 }: MeteorsProps) => {
   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>([]);
-  const [windowWidth, setWindowWidth] = useState<number>(0);
-
   useEffect(() => {
     const width = window.innerWidth;
-    setWindowWidth(width);
     const pos = width / 2 + xPos;
     const styles = [...new Array(number)].map(() => ({
       top: -100,
@@ -78,7 +74,7 @@ const MeteorLinesAngular = ({
       animationDuration: speed ? `${speed}s` : `${Math.floor(Math.random() * 10 + 2)}s`,
     }));
     setMeteorStyles(styles);
-  }, [number, windowWidth]);
+  }, [number, delay, xPos, speed]);
   return (
     <>
       {[...meteorStyles].map((style, idx) => (