From f8c61918d52afeb387e65d3552b83071f4d20137 Mon Sep 17 00:00:00 2001
From: Stijnvandenbroek <broekvandens@gmail.com>
Date: Fri, 6 Mar 2026 15:04:27 +0000
Subject: [PATCH] fix: prevent immediate elo update on listing selection

---
 frontend/src/views/CompareView.tsx | 35 +++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/CompareView.tsx b/frontend/src/views/CompareView.tsx
index 334ef03..9ba8361 100644
--- a/frontend/src/views/CompareView.tsx
+++ b/frontend/src/views/CompareView.tsx
@@ -9,7 +9,7 @@ interface Toast {
 
 export default function CompareView() {
   const [matchup, setMatchup] = useState<Matchup | null>(null);
-  const [result, setResult] = useState<CompareResult | null>(null);
+  const [selected, setSelected] = useState<{ winner: Listing; loser: Listing } | null>(null);
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -19,7 +19,7 @@ export default function CompareView() {
 
   const fetchMatchup = useCallback(async () => {
     setLoading(true);
-    setResult(null);
+    setSelected(null);
     setError(null);
     try {
       const m = await api.getMatchup();
@@ -35,18 +35,26 @@ export default function CompareView() {
     fetchMatchup();
   }, [fetchMatchup]);
 
-  const handlePick = async (winner: Listing, loser: Listing) => {
-    if (submitting) return;
+  const handlePick = (winner: Listing, loser: Listing) => {
+    setSelected({ winner, loser });
+  };
+
+  const handleNext = async () => {
+    if (!selected || submitting) return;
     setSubmitting(true);
     try {
-      const res = await api.submitComparison(winner.global_id, loser.global_id);
-      setResult(res);
+      const res = await api.submitComparison(selected.winner.global_id, selected.loser.global_id);
       setComparisonCount((c) => c + 1);
 
       // Add toast
       const id = ++toastId.current;
       setToasts((prev) => [...prev, { id, result: res }]);
       setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 3000);
+
+      // Load next pair
+      setSelected(null);
+      const m = await api.getMatchup();
+      setMatchup(m);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to submit comparison");
     } finally {
@@ -95,13 +103,13 @@ export default function CompareView() {
           listing={matchup.listing_a}
           onClick={() => handlePick(matchup.listing_a, matchup.listing_b)}
           disabled={submitting}
-          highlight={result?.winner_id === matchup.listing_a.global_id}
+          highlight={selected?.winner.global_id === matchup.listing_a.global_id}
         />
         <ListingCard
           listing={matchup.listing_b}
           onClick={() => handlePick(matchup.listing_b, matchup.listing_a)}
           disabled={submitting}
-          highlight={result?.winner_id === matchup.listing_b.global_id}
+          highlight={selected?.winner.global_id === matchup.listing_b.global_id}
         />
       </div>
 
@@ -112,12 +120,13 @@ export default function CompareView() {
         >
           Skip
         </button>
-        {result && (
+        {selected && (
           <button
-            onClick={fetchMatchup}
-            className="px-6 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors"
+            onClick={handleNext}
+            disabled={submitting}
+            className="px-6 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-50"
           >
-            Next pair →
+            {submitting ? "Submitting..." : "Next pair →"}
           </button>
         )}
       </div>
@@ -138,7 +147,7 @@ export default function CompareView() {
                 <p className="text-xs text-slate-500">Comparison recorded</p>
               </div>
             </div>
-            <div className="flex items-center justify-between mt-2 text-sm">
+            <div className="flex items-center justify-between gap-4 mt-2 text-sm">
               <span className="text-green-600 font-bold">
                 Winner: {t.result.new_winner_elo.toFixed(0)}{" "}
                 <span className="text-green-500 text-xs">(+{t.result.elo_change.toFixed(1)})</span>