fix scanner isolate

sitcon-tw · Feb 25, 2024 · 59b5ee2 · 59b5ee2
1 parent 14c8bd0
commit 59b5ee2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/src/app/(game)/scanner/page.tsx b/src/app/(game)/scanner/page.tsx
@@ -1,11 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Scanner from "@/components/Scanner";
 
 import { InfoWindow } from "@/components/InfoWindow";
-const page = () => {
+import { getBoothToken } from "@/lib/getBoothToken";
+
+function page() {
   const [result, setResult] = useState<string | null>(null);
+  const [info, setInfo] = useState({ title: "", msg: "" });
+  const [showInfo, setShowInfo] = useState(false);
+
+  useEffect(() => {
+    const handleResult = async () => {
+      if (typeof result !== "string") return;
+      var boothToken = await getBoothToken(result);
+      setResult(null);
+      if (boothToken) {
+        console.log(boothToken);
+        setInfo({ title: "已完成", msg: "恭喜獲得一塊拼圖!!" });
+      } else {
+        setInfo({ title: "失敗", msg: "掃描失敗，請再試一次。" });
+      }
+      setShowInfo(true);
+    };
+    handleResult();
+  });
 
   return (
     <>
@@ -14,24 +34,17 @@ const page = () => {
           setResult(result);
         }}
       />
-      console.log(result);
-
-      {result === "success" && (
-        <InfoWindow
-          title="已完成"
-          msg="恭喜獲得一塊拼圖!!"
-          onClose={() => setResult(null)}
-        />
-      )}
-      {result === "fail" && (
+      {showInfo && (
         <InfoWindow
-          title="失敗"
-          msg="掃描失敗，請再試一次。"
-          onClose={() => setResult(null)}
+          title={info.title}
+          msg={info.msg}
+          onClose={() => {
+            setShowInfo(false);
+          }}
         />
       )}
     </>
   );
-};
+}
 
 export default page;
diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { getBoothToken } from "@/lib/getBoothToken";
 import { useEffect, useState } from "react";
 import { QrReader } from "react-qr-reader";
 // Override console.error
@@ -43,15 +42,7 @@ function Scanner({ onResult }: { onResult: (result: string) => void }) {
           onResult={async (result) => {
             const text = result?.getText();
             if (text) {
-              console.log(text);
-              const boothToken = await getBoothToken(text);
-              console.log(boothToken);
-
-              if (boothToken) {
-                onResult("success");
-              } else {
-                onResult("fail");
-              }
+              onResult(text);
             }
           }}
           constraints={{