optimizations

Author: netteNz

veto-board/src/components/BanPhase.jsx

@@ -74,10 +74,26 @@ export default function BanPhase({ series, onSuccess }) {
     console.log("[DEBUG] Selection changed:", value);
 
     if (value) {
-      const [mapId, modeId] = value.split(",");
+      // FIXED: Add validation for split
+      const parts = value.split(",");
+      if (parts.length !== 2) {
+        console.warn("[DEBUG] Invalid selection format:", value);
+        setSelectedMap(null);
+        setSelectedMode(null);
+        return;
+      }
+      
+      const [mapId, modeId] = parts;
       const mapNum = Number(mapId);
       const modeNum = Number(modeId);
 
+      if (isNaN(mapNum) || isNaN(modeNum)) {
+        console.warn("[DEBUG] Invalid map or mode ID:", { mapNum, modeNum });
+        setSelectedMap(null);
+        setSelectedMode(null);
+        return;
+      }
+
       console.log("[DEBUG] Parsed selection:", { mapNum, modeNum });
       setSelectedMap(mapNum);
       setSelectedMode(modeNum);

veto-board/src/components/SeriesLayout.jsx

@@ -281,7 +281,7 @@ export default function SeriesLayout({ series, onSuccess }) {
       className="bg-gray-800 text-white p-6 mt-4 rounded space-y-6"
     >
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-bold">Series Layout — Bo7</h2>
+        <h2 className="text-2xl font-bold">Series Layout — {series?.type || 'Bo7'}</h2>
         <div className="flex items-center gap-4">
           <div className="text-sm text-gray-300">
             {series.team_a} vs {series.team_b}

veto-board/src/components/SeriesManager.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { getSeries, postUndo, postReset } from "../lib/api";
 import { processBansAndPicks } from "../lib/bans";
 import BanPhase from "./BanPhase";
@@ -12,23 +12,13 @@ import { Download } from "lucide-react";
 export default function SeriesManager({ seriesId, onSuccess }) {
   const [series, setSeries] = useState(null);
   const [error, setError] = useState("");
-  const [processedBanData, setProcessedBanData] = useState(null);
 
   useEffect(() => {
     if (seriesId) {
       loadSeries();
     }
   }, [seriesId]);
 
-  useEffect(() => {
-    if (series?.actions) {
-      const banData = processBansAndPicks(series.actions);
-      setProcessedBanData(banData);
-
-      console.log("[DEBUG] Processed ban data:", banData);
-    }
-  }, [series?.actions]);
-
   const loadSeries = async () => {
     try {
       console.log("[DEBUG] Loading series data...");
@@ -38,13 +28,6 @@ export default function SeriesManager({ seriesId, onSuccess }) {
       console.log("[DEBUG] First 3 actions:", data.actions?.slice(0, 3));
 
       setSeries(data);
-
-      // Process bans right after loading
-      if (data?.actions) {
-        const banData = processBansAndPicks(data.actions);
-        setProcessedBanData(banData);
-        console.log("[DEBUG] Processed ban data:", banData);
-      }
     } catch (err) {
       console.error("[DEBUG] Error loading series:", err);
       setError("Could not load series.");
@@ -110,6 +93,10 @@ export default function SeriesManager({ seriesId, onSuccess }) {
     }
   };
 
+  const processedBanData = useMemo(() => {
+    return processBansAndPicks(series?.actions || []);
+  }, [series?.actions]);
+
   const renderCurrentPhase = () => {
     if (!series) return null;
 

veto-board/src/lib/analytics.js

@@ -64,7 +64,13 @@ export function init({ measurementId, created, autoTrack = true } = {}) {
   window.gtag('js', new Date());
   window.gtag('config', _measurementId, { created: _created });
 
-  if (_autoTrack) hookHistory();
+  if (_autoTrack) {
+    // FIXED: Track which listeners we've added so we can avoid duplicates
+    if (!window._gaHistoryHooked) {
+      hookHistory();
+      window._gaHistoryHooked = true;
+    }
+  }
   _initialized = true;
 }