renish-hood · renish-hood · Jun 3, 2025
diff --git a/src/app/snippets/page.tsx b/src/app/snippets/page.tsx
@@ -2,10 +2,11 @@
 
 import React from 'react';
 import Head from "next/head";
-import { Card } from "../../components/Card";
+import Card from "../../components/Card";
 import { mockSnippets } from '@/constants';
 
-export default function SnippetsPage() {
+
+function SnippetsPage() {
   return (
     <div className="min-h-screen bg-black">
       <Head>
@@ -30,3 +31,7 @@ export default function SnippetsPage() {
     </div>
   );
 }
+
+SnippetsPage.displayName = 'SnippetsPage';
+
+export default SnippetsPage;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -5,21 +5,32 @@ import { useMotionValue } from "framer-motion";
 import { CardPattern } from "./CardPattern";
 import { useRouter } from "next/navigation";
 import { CardProps } from "@/types/snippet.types";
+import { withLogger } from "@/utils/withLogger";
 
-
-
-export const Card = ({ snippet }: CardProps) => {
+const Card = ({ snippet }: CardProps) => {
   const router = useRouter();
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   const [randomString, setRandomString] = useState("");
   const [isHovered, setIsHovered] = useState(false);
 
+  const componentName = 'CardComponent';
+
   useEffect(() => {
     const str = generateRandomString(1500);
     setRandomString(str);
+    console.log(`🎯 [${componentName}] Random string generated on mount`);
   }, []);
 
+  // Log state changes
+  useEffect(() => {
+    console.log(`🎯 [${componentName}] Hover state changed:`, isHovered);
+  }, [isHovered]);
+
+  useEffect(() => {
+    console.log(`🎯 [${componentName}] Random string updated:`, randomString.length, 'characters');
+  }, [randomString]);
+
   function onMouseMove({
     currentTarget,
     clientX,
@@ -34,10 +45,13 @@ export const Card = ({ snippet }: CardProps) => {
     mouseY.set(clientY - top);
     const str = generateRandomString(1500);
     setRandomString(str);
+
+    console.log(`🖱️ [${componentName}] Mouse moved:`, { x: mouseX, y: mouseY });
   }
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
+    console.log(`🔗  Card clicked, navigating to:`, `/snippets/${snippet.id}`);
     router.push(`/snippets/${snippet.id}`, { scroll: false });
   };
 
@@ -60,6 +74,7 @@ export const Card = ({ snippet }: CardProps) => {
           mouseY={mouseY.get()}
           randomString={randomString}
         />
+
         <div className="relative z-10 flex-1 flex flex-col">
           <h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-400 transition-colors">
             {snippet.title}
@@ -107,4 +122,8 @@ function generateRandomString(length: number) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
-};
+}
+
+Card.displayName = 'CardComponent';
+
+export default withLogger(Card);
diff --git a/src/components/ui/select-content.tsx b/src/components/ui/select-content.tsx
diff --git a/src/components/ui/select-trigger.tsx b/src/components/ui/select-trigger.tsx
diff --git a/src/components/ui/select-value.tsx b/src/components/ui/select-value.tsx
diff --git a/src/utils/withLogger.tsx b/src/utils/withLogger.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react";
+
+export function withLogger<P extends object>(WrappedComponent: React.ComponentType<P>) {
+  return function LoggerComponent(props: P) {
+    const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    const renderCount = useRef(0);
+    const previousProps = useRef<P | null>(null);
+
+    // Increment render count
+    renderCount.current += 1;
+
+    useEffect(() => {
+      console.log(`🚀 [${componentName}] Component mounted at:`, new Date().toISOString());
+      console.log(`📦 [${componentName}] Initial Props:`, props);
+
+      // Log performance timing
+      const startTime = performance.now();
+
+      return () => {
+        const endTime = performance.now();
+        console.log(`💀 [${componentName}] Component unmounted at:`, new Date().toISOString());
+        console.log(`⏱️ [${componentName}] Component was mounted for:`, `${(endTime - startTime).toFixed(2)}ms`);
+        console.log(`🔄 [${componentName}] Total renders:`, renderCount.current);
+      };
+    }, []);
+
+    // Log every re-render with render count
+    useEffect(() => {
+      if (renderCount.current > 1) {
+        console.log(`🔄 [${componentName}] Re-render #${renderCount.current} at:`, new Date().toISOString());
+        console.log(`📦 [${componentName}] Current Props:`, props);
+
+        // Check if props actually changed
+        if (previousProps.current) {
+          const propsChanged = JSON.stringify(previousProps.current) !== JSON.stringify(props);
+          if (propsChanged) {
+            console.log(`🔀 [${componentName}] Props changed!`);
+            console.log(`📦 [${componentName}] Previous Props:`, previousProps.current);
+            console.log(`📦 [${componentName}] New Props:`, props);
+          } else {
+            console.log(`🔄 [${componentName}] Re-render triggered by internal state change (props unchanged)`);
+          }
+        }
+      }
+
+      // Store current props for next comparison
+      previousProps.current = JSON.parse(JSON.stringify(props));
+    });
+
+    // Detailed prop change logging
+    useEffect(() => {
+      if (renderCount.current > 1) {
+        console.log(`📝 [${componentName}] Props effect triggered - props may have changed:`, props);
+      }
+    }, [props]);
+
+    return <WrappedComponent {...props} />;
+  };
+}