cannot fix issue with elapsed timer on admin dashboard. fixing issues with QR code editing.

Grey = cant click
Red = current
Green = complete
blue = skipped?

app/(main)/clue/[clueId]/page.js

@@ -20,11 +20,27 @@ export default function CluePage({ params }) {
   const [showScanner, setShowScanner] = useState(false);
   const [scanResult, setScanResult] = useState(null);
   const [scanMessage, setScanMessage] = useState(null);
+  const [lastRefresh, setLastRefresh] = useState(0); // Track last refresh time
   const router = useRouter();
-  const { status } = useSession();
+  const { data: session, status } = useSession(); // Get session to check if user is admin
   const { clueId } = params;
 
+  // Check if user is admin
+  const isAdmin = session?.user?.role === "admin";
+
+  // This effect handles authentication and initial clue data fetch
   useEffect(() => {
+    let isMounted = true; // Flag to prevent state updates after unmount
+    const now = Date.now();
+
+    // Only allow refreshes every 10 seconds (more for admins)
+    const minRefreshInterval = isAdmin ? 30000 : 10000; // 30 seconds for admins, 10 seconds for regular users
+
+    // Skip if we refreshed too recently and this isn't the first load
+    if (loading === false && now - lastRefresh < minRefreshInterval) {
+      return;
+    }
+
     if (status === "unauthenticated") {
       router.push("/login");
       return;
@@ -34,11 +50,14 @@ export default function CluePage({ params }) {
       return;
     }
 
-    // Fetch clue data
+    // One-time fetch clue data with debouncing
     async function fetchClue() {
       try {
         setLoading(true);
-        const response = await fetch(`/api/clues/${clueId}`, {
+
+        // Add timestamp to avoid browser caching
+        const timestamp = Date.now();
+        const response = await fetch(`/api/clues/${clueId}?t=${timestamp}`, {
           method: "GET",
           headers: {
             "Content-Type": "application/json",
@@ -57,49 +76,76 @@ export default function CluePage({ params }) {
         }
 
         const data = await response.json();
-        setClue(data);
-        setFoundNow(data.foundNow);
-        setLoading(false);
+
+        // Only update state if the component is still mounted
+        if (isMounted) {
+          setClue(data);
+          // Only set foundNow on initial load or if it's actually newly found
+          if (loading === true) {
+            setFoundNow(data.foundNow);
+          }
+          setLoading(false);
+          setLastRefresh(Date.now()); // Update last refresh timestamp
+        }
       } catch (err) {
         console.error("Error fetching clue:", err);
-        setError(err.message);
-        setLoading(false);
+        if (isMounted) {
+          setError(err.message);
+          setLoading(false);
+        }
       }
     }
 
     fetchClue();
-  }, [clueId, router, status]);
 
-  // Update timer display
+    // Cleanup function to prevent state updates after unmount
+    return () => {
+      isMounted = false;
+    };
+  }, [clueId, router, status, lastRefresh, loading, isAdmin]); // Add isAdmin and lastRefresh to dependencies
+
+  // Separate effect to handle timer updates - doesn't re-fetch data
   useEffect(() => {
+    let timerId;
+
     // Set up timer display updates
     const timerData = getHuntTimer();
     if (!timerData || !timerData.isActive) {
       return;
     }
 
-    const timer = setInterval(() => {
-      setElapsedTime(formatElapsedTime(timerData.startTime));
-    }, 1000);
-
     // Initial set
     setElapsedTime(formatElapsedTime(timerData.startTime));
 
-    return () => clearInterval(timer);
-  }, []);
+    // Update timer every second
+    timerId = setInterval(() => {
+      setElapsedTime(formatElapsedTime(timerData.startTime));
+    }, 1000);
+
+    return () => {
+      if (timerId) clearInterval(timerId);
+    };
+  }, []); // Empty dependency array so it only runs once
 
   // Handle QR scan result
   const handleScan = (data) => {
     setScanResult(data);
     setScanMessage(`QR Code scanned: ${data}`);
 
-    // Here you would typically verify the QR code matches expected value
-    // and then mark the clue as found via API
-
-    // For now, just simulate successful scan and move to the next clue
     try {
-      const scannedClueId = parseInt(data);
-      if (scannedClueId === parseInt(clueId)) {
+      // Handle both "QR123" format and just "123" format
+      let scannedClueId;
+      const match = data.match(/^QR(\d+)$/i);
+
+      if (match) {
+        // Extract the number from QR[number]
+        scannedClueId = parseInt(match[1], 10);
+      } else {
+        // Try to parse the raw value
+        scannedClueId = parseInt(data, 10);
+      }
+
+      if (!isNaN(scannedClueId) && scannedClueId === parseInt(clueId)) {
         // Correct QR code scanned, mark as found and move to next clue
         markClueAsFound(clueId);
       } else {
@@ -178,6 +224,12 @@ export default function CluePage({ params }) {
     }
   };
 
+  // Function for manual refresh - for admins to test without waiting
+  const handleManualRefresh = () => {
+    // Force a refresh by setting lastRefresh to 0
+    setLastRefresh(0);
+  };
+
   if (loading) {
     return (
       <div className="clue-container">
@@ -226,6 +278,19 @@ export default function CluePage({ params }) {
       <div className="timer-display">{elapsedTime}</div>
 
       <div className="clue-content-wrapper">
+        {/* Admin tools section - only visible to admins */}
+        {isAdmin && (
+          <div className="admin-tools">
+            <div className="admin-badge">Admin View</div>
+            <button
+              onClick={handleManualRefresh}
+              className="admin-refresh-button"
+            >
+              Refresh Clue Data
+            </button>
+          </div>
+        )}
+
         {/* QR Scanner Section */}
         <div className="scanner-section">
           <h2>Scan QR Code</h2>
@@ -517,6 +582,37 @@ export default function CluePage({ params }) {
         .nav-label {
           font-size: 12px;
         }
+
+        /* Admin tools styling */
+        .admin-tools {
+          background-color: #f8d7da;
+          border: 2px dashed #d9534f;
+          border-radius: 8px;
+          padding: 12px;
+          margin-bottom: 15px;
+          text-align: center;
+          width: 100%;
+        }
+
+        .admin-badge {
+          font-weight: bold;
+          margin-bottom: 8px;
+          color: #d9534f;
+        }
+
+        .admin-refresh-button {
+          background-color: #d9534f;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 8px 16px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+
+        .admin-refresh-button:hover {
+          background-color: #c9302c;
+        }
       `}</style>
     </div>
   );