refactor: reorganize hooks and add safety checks

fix(api): add validation for listing and seller in bid route
feat(telemetry): add userId to MarketTelemetry
style(globe): add null check for canvas element
chore: add lint:fix script to package.json

components/marketplace/AnalyticsDashboard.tsx

@@ -40,18 +40,6 @@ export function AnalyticsDashboard() {
   const [analytics, setAnalytics] = useState<AdAnalytics | null>(null);
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    if (user?.userId) {
-      loadUserListings();
-    }
-  }, [user?.userId, loadUserListings]);
-
-  useEffect(() => {
-    if (selectedAd) {
-      loadAnalytics(selectedAd);
-    }
-  }, [selectedAd, loadAnalytics]);
-
   const loadUserListings = async () => {
     setLoading(true);
     try {
@@ -82,6 +70,18 @@ export function AnalyticsDashboard() {
     }
   };
 
+  useEffect(() => {
+    if (user?.userId) {
+      loadUserListings();
+    }
+  }, [user?.userId, loadUserListings]);
+
+  useEffect(() => {
+    if (selectedAd) {
+      loadAnalytics(selectedAd);
+    }
+  }, [selectedAd, loadAnalytics]);
+
   if (!user) {
     return (
       <div className="text-center py-12">

components/marketplace/BidModal.tsx

@@ -103,13 +103,6 @@ export function BidModal({
     }
   }, [minBid, bidAmount]);
 
-  // Buscar histórico de lances quando abrir modal
-  useEffect(() => {
-    if (open && listing) {
-      fetchBidHistory();
-    }
-  }, [open, listing?.listing_id, fetchBidHistory, listing]);
-
   const fetchBidHistory = async () => {
     if (!listing) return;
 
@@ -131,6 +124,13 @@ export function BidModal({
     }
   };
 
+  // Buscar histórico de lances quando abrir modal
+  useEffect(() => {
+    if (open && listing) {
+      fetchBidHistory();
+    }
+  }, [open, listing?.listing_id, fetchBidHistory, listing]);
+
   const handleBid = async () => {
     const amount = parseFloat(bidAmount);
 

components/marketplace/CreateAdModal.tsx

@@ -204,12 +204,6 @@ export function CreateAdModal({
   };
 
   // Carregar servidores ao abrir o modal
-  useEffect(() => {
-    if (open) {
-      loadServers();
-    }
-  }, [open, loadServers]);
-
   const loadServers = async () => {
     setLoadingServers(true);
     try {
@@ -225,6 +219,12 @@ export function CreateAdModal({
     }
   };
 
+  useEffect(() => {
+    if (open) {
+      loadServers();
+    }
+  }, [open, loadServers]);
+
   const handleClose = () => {
     if (!loading) {
       setSelectedItem(null);

components/marketplace/MyAdsIntentionList.tsx

@@ -135,10 +135,6 @@ export function MyAdsIntentionList({
     "all" | "pending" | "accepted" | "rejected"
   >("all");
 
-  useEffect(() => {
-    loadIntentions();
-  }, [loadIntentions]);
-
   const loadIntentions = async () => {
     setLoading(true);
     try {
@@ -162,6 +158,10 @@ export function MyAdsIntentionList({
     }
   };
 
+  useEffect(() => {
+    loadIntentions();
+  }, [loadIntentions]);
+
   const pendingCount = intentions.filter((i) => i.status === "pending").length;
 
   if (loading) {

components/messages/MessagesPanel.tsx

@@ -69,20 +69,6 @@ export function MessagesPanel({
       setIsLoading(false);
     }
   };
-
-  useEffect(() => {
-    if (open && user) {
-      fetchChats();
-      // Marcar todos como lidos ao abrir
-      markAllAsRead();
-    }
-  }, [
-    open,
-    user,
-    fetchChats, // Marcar todos como lidos ao abrir
-    markAllAsRead,
-  ]);
-
   const markAllAsRead = async () => {
     try {
       await fetch("/api/chats/mark-all-read", {
@@ -105,6 +91,19 @@ export function MessagesPanel({
     }
   };
 
+  useEffect(() => {
+    if (open && user) {
+      fetchChats();
+      // Marcar todos como lidos ao abrir
+      markAllAsRead();
+    }
+  }, [
+    open,
+    user,
+    fetchChats, // Marcar todos como lidos ao abrir
+    markAllAsRead,
+  ]);
+
   const handleChatClick = (chatId: string, _listingId: number) => {
     setSelectedChatId(chatId);
     setShowChatModal(true);

components/ui/globe.tsx

@@ -93,7 +93,12 @@ export function Globe({
       },
     });
 
-    setTimeout(() => (canvasRef.current?.style.opacity = "1"), 0);
+    setTimeout(() => {
+      const el = canvasRef.current;
+      if (el) {
+        el.style.opacity = "1";
+      }
+    }, 0);
     return () => {
       globe.destroy();
       window.removeEventListener("resize", onResize);

components/ui/particles.tsx

@@ -101,42 +101,7 @@ export const Particles: React.FC<ParticlesProps> = ({
   const rafID = useRef<number | null>(null);
   const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    if (canvasRef.current) {
-      context.current = canvasRef.current.getContext("2d");
-    }
-    initCanvas();
-    animate();
-
-    const handleResize = () => {
-      if (resizeTimeout.current) {
-        clearTimeout(resizeTimeout.current);
-      }
-      resizeTimeout.current = setTimeout(() => {
-        initCanvas();
-      }, 200);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      if (rafID.current != null) {
-        window.cancelAnimationFrame(rafID.current);
-      }
-      if (resizeTimeout.current) {
-        clearTimeout(resizeTimeout.current);
-      }
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [animate, initCanvas]);
-
-  useEffect(() => {
-    onMouseMove();
-  }, [onMouseMove]);
-
-  useEffect(() => {
-    initCanvas();
-  }, [initCanvas]);
+  
 
   const initCanvas = () => {
     resizeCanvas();
@@ -302,6 +267,44 @@ export const Particles: React.FC<ParticlesProps> = ({
     rafID.current = window.requestAnimationFrame(animate);
   };
 
+  // Efeitos devem vir após a declaração das funções referenciadas
+  useEffect(() => {
+    if (canvasRef.current) {
+      context.current = canvasRef.current.getContext("2d");
+    }
+    initCanvas();
+    animate();
+
+    const handleResize = () => {
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current);
+      }
+      resizeTimeout.current = setTimeout(() => {
+        initCanvas();
+      }, 200);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      if (rafID.current != null) {
+        window.cancelAnimationFrame(rafID.current);
+      }
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [animate, initCanvas]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [onMouseMove]);
+
+  useEffect(() => {
+    initCanvas();
+  }, [initCanvas]);
+
   return (
     <div
       className={cn("pointer-events-none", className)}