feat(scanner): immediately refresh match on scan

src/components/matches/MatchDetail.tsx

@@ -17,7 +17,11 @@ const MatchDetail = ({ matchId }: { matchId: string }) => {
   );
   const userId = accessToken?.details;
 
-  const { data: matches, error: matchesError } = useSWR(
+  const {
+    data: matches,
+    error: matchesError,
+    mutate: updateMatches,
+  } = useSWR(
     `${BL_CONFIG.collection.match}/me`,
     apiFetcher<MatchWithDetails[]>,
     { refreshInterval: 5000 },
@@ -64,7 +68,11 @@ const MatchDetail = ({ matchId }: { matchId: string }) => {
           <StandMatchDetail match={match} />
         )}
         {match._variant === MatchVariant.UserMatch && (
-          <UserMatchDetail match={match} currentUserId={userId} />
+          <UserMatchDetail
+            match={match}
+            currentUserId={userId}
+            handleItemTransferred={() => updateMatches()}
+          />
         )}
       </Container>
     </Card>

src/components/matches/Scanner/ScannerModal.tsx

@@ -36,12 +36,14 @@ type Feedback = {
 const ScannerModal = ({
   open,
   handleClose,
+  handleItemTransferred,
   itemStatuses,
   expectedItems,
   fulfilledItems,
 }: {
   open: boolean;
   handleClose: () => void;
+  handleItemTransferred?: (() => void) | undefined;
   itemStatuses: ItemStatus[];
   expectedItems: string[];
   fulfilledItems: string[];
@@ -91,6 +93,7 @@ const ScannerModal = ({
         severity: feedback ? "info" : "success",
         visible: true,
       });
+      handleItemTransferred?.();
     } catch (error) {
       setFeedback({
         text: String(error),
@@ -136,9 +139,15 @@ const ScannerModal = ({
             constraints={{ facingMode: "environment" }}
             formats={["qr_code", "code_128", "ean_8", "ean_13"]}
             components={{ torch: true }}
-            onScan={(detectedCodes) => {
+            onScan={async (detectedCodes) => {
               for (const code of detectedCodes) {
-                handleRegistration(code.rawValue);
+                await handleRegistration(code.rawValue).catch((error) =>
+                  console.error("Failed to handle scan", error),
+                );
+                // Arbitrary delay to somewhat avoid races the backend isn't smart enough to handle
+                await new Promise((resolve) => {
+                  window.setTimeout(resolve, 250);
+                });
               }
             }}
           />

src/components/matches/UserMatchDetail.tsx

@@ -21,9 +21,11 @@ import { UserMatchWithDetails } from "@/utils/types";
 const UserMatchDetail = ({
   match,
   currentUserId,
+  handleItemTransferred,
 }: {
   match: UserMatchWithDetails;
   currentUserId: string;
+  handleItemTransferred?: (() => void) | undefined;
 }) => {
   const [scanModalOpen, setScanModalOpen] = useState(false);
   const [redirectCountdownStarted, setRedirectCountdownStarted] =
@@ -136,6 +138,7 @@ const UserMatchDetail = ({
 
       <ScannerModal
         open={scanModalOpen}
+        handleItemTransferred={handleItemTransferred}
         handleClose={() => {
           setScanModalOpen(false);
           setRedirectCountdownStarted(isFulfilled);