Clear winner selection after reporting score

app/components/SubmitButton.tsx

@@ -4,16 +4,21 @@ import { useTimeoutState } from "~/utils/hooks";
 import { Button, ButtonProps } from "./Button";
 
 export function SubmitButton(
-  _props: ButtonProps & { actionType: string; successText?: string }
+  _props: ButtonProps & {
+    actionType: string;
+    successText?: string;
+    onSuccess?: () => void;
+  }
 ) {
-  const { actionType, successText, children, ...rest } = _props;
+  const { actionType, successText, onSuccess, children, ...rest } = _props;
   const actionData = useActionData<{ ok?: string }>();
   const transition = useTransition();
   const [showSuccess, setShowSuccess] = useTimeoutState(false);
 
   useEffect(() => {
-    if (!successText || actionData?.ok !== actionType) return;
+    if ((!successText && !onSuccess) || actionData?.ok !== actionType) return;
 
+    onSuccess?.();
     setShowSuccess(true);
   }, [actionData]);
 

app/components/tournament/DuringMatchActionsRosters.tsx

@@ -4,8 +4,8 @@ import { Form } from "remix";
 import { TOURNAMENT_TEAM_ROSTER_MIN_SIZE } from "~/constants";
 import type { FindTournamentByNameForUrlI } from "~/services/tournament";
 import { Unpacked } from "~/utils";
-import { Button } from "../Button";
 import { Label } from "../Label";
+import { SubmitButton } from "../SubmitButton";
 
 export function DuringMatchActionsRosters({
   ownTeam,
@@ -22,6 +22,7 @@ export function DuringMatchActionsRosters({
     [string[], string[]]
   >(checkedPlayersInitialState([ownTeam, opponentTeam]));
   const [winnerId, setWinnerId] = React.useState<string | null>(null);
+
   return (
     <Form method="post" className="width-full">
       <div>
@@ -36,6 +37,7 @@ export function DuringMatchActionsRosters({
                   name="winnerTeamId"
                   value={team.id}
                   onChange={(e) => setWinnerId(e.currentTarget.value)}
+                  checked={winnerId === team.id}
                 />
                 <Label className="mb-0 ml-2" htmlFor={team.id}>
                   Winner
@@ -95,6 +97,7 @@ export function DuringMatchActionsRosters({
           <ReportScoreButtons
             checkedPlayers={checkedPlayers}
             winnerName={winningTeam()}
+            clearWinner={() => setWinnerId(null)}
           />
         </div>
       </div>
@@ -130,9 +133,11 @@ function checkedPlayersInitialState([teamOne, teamTwo]: [
 function ReportScoreButtons({
   checkedPlayers,
   winnerName,
+  clearWinner,
 }: {
   checkedPlayers: string[][];
   winnerName?: string;
+  clearWinner: () => void;
 }) {
   if (
     !checkedPlayers.every(
@@ -156,8 +161,13 @@ function ReportScoreButtons({
   }
 
   return (
-    <Button type="submit" variant="minimal">
+    <SubmitButton
+      variant="minimal"
+      actionType="REPORT_SCORE"
+      loadingText={`Reporting ${winnerName} win...`}
+      onSuccess={clearWinner}
+    >
       Report {winnerName} win
-    </Button>
+    </SubmitButton>
   );
 }

app/services/tournament.ts

@@ -677,7 +677,6 @@ function resolveNewOrder({
     matchesThatLeadToNewMatch.length === 2,
     `matchesThatLeadToNewMatch length was unexpected: ${matchesThatLeadToNewMatch.length}`
   );
-  console.log(JSON.stringify({ matchesThatLeadToNewMatch, oldMatch }, null, 2));
   invariant(
     matchesThatLeadToNewMatch.find((m) => m.id === oldMatch.id),
     "oldMatch not among matchesThatLeadToNewMatch"