diff --git a/src/app/snippets/page.tsx b/src/app/snippets/page.tsx index 6210ba9..dae874b 100644 --- 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 (
@@ -30,3 +31,7 @@ export default function SnippetsPage() {
); } + +SnippetsPage.displayName = 'SnippetsPage'; + +export default SnippetsPage; diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 13b2ae8..1a77f96 100644 --- 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} /> +

{snippet.title} @@ -107,4 +122,8 @@ function generateRandomString(length: number) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; -}; \ No newline at end of file +} + +Card.displayName = 'CardComponent'; + +export default withLogger(Card); \ No newline at end of file diff --git a/src/components/ui/select-content.tsx b/src/components/ui/select-content.tsx deleted file mode 100644 index ee637db..0000000 --- a/src/components/ui/select-content.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { PropsWithChildren } from "react"; -import React from "react"; - -export const SelectContent = ({ - children, - onSelect, -}: PropsWithChildren<{ onSelect: (value: string) => void }>) => ( -
- {React.Children.map(children, (child) => - React.isValidElement(child) - ? React.createElement(child.type, { - ...(child.props as object), - onSelect, - }) - : child - )} -
-); diff --git a/src/components/ui/select-trigger.tsx b/src/components/ui/select-trigger.tsx deleted file mode 100644 index f332a1b..0000000 --- a/src/components/ui/select-trigger.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ChevronDown } from "lucide-react"; -import { PropsWithChildren } from "react"; - -export const SelectTrigger = ({ - children, - className = "", - onClick, -}: PropsWithChildren<{ className?: string; onClick?: () => void }>) => ( - -); - -SelectTrigger.displayName = "SelectTrigger"; diff --git a/src/components/ui/select-value.tsx b/src/components/ui/select-value.tsx deleted file mode 100644 index 4a3c74e..0000000 --- a/src/components/ui/select-value.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const SelectValue = ({ - placeholder, - value, -}: { - placeholder: string; - value: string; -}) => { - const displayValue = value === "all" ? placeholder : value; - return {displayValue || placeholder}; -}; diff --git a/src/utils/withLogger.tsx b/src/utils/withLogger.tsx new file mode 100644 index 0000000..606b800 --- /dev/null +++ b/src/utils/withLogger.tsx @@ -0,0 +1,59 @@ +import { useEffect, useRef } from "react"; + +export function withLogger

(WrappedComponent: React.ComponentType

) { + return function LoggerComponent(props: P) { + const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; + const renderCount = useRef(0); + const previousProps = useRef

(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 ; + }; +}