Add useRouter hook and refactor Scanner component

sitcon-tw · Mar 2, 2024 · f14c20c · f14c20c
1 parent 1c8b699
commit f14c20c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/app/(game)/scanner/page.tsx b/src/app/(game)/scanner/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import Scanner from "@/components/Scanner";
-
+import { useRouter } from "next/router";
 import { InfoWindow } from "@/components/InfoWindow";
 import { getBoothToken } from "@/lib/getBoothToken";
 import { sendPuzzle2Player } from "@/lib/sendPuzzle2Player";
@@ -14,7 +14,6 @@ export default function Page() {
   const [info, setInfo] = useState({ title: "", msg: "" });
   const [showInfo, setShowInfo] = useState(false);
   const playerToken: string | null = useReadLocalStorage("token");
-
   useEffect(() => {
     async function handleResult() {
       if (typeof result !== "string") return;
@@ -49,20 +48,22 @@ export default function Page() {
 
   return (
     <>
-      <Scanner
-        onResult={(result) => {
-          if (result.startsWith("http")) {
-            // get token from query string
-            const url = new URL(result);
-            const token = url.searchParams.get("token");
-            if (token) {
-              setResult(token);
+      {!showInfo && (
+        <Scanner
+          onResult={(result) => {
+            if (result.startsWith("http")) {
+              // get token from query string
+              const url = new URL(result);
+              const token = url.searchParams.get("token");
+              if (token) {
+                setResult(token);
+              }
+            } else {
+              setResult(result);
             }
-          } else {
-            setResult(result);
-          }
-        }}
-      />
+          }}
+        />
+      )}
       {showInfo && (
         <InfoWindow
           title={info.title}

diff --git a/src/components/InfoWindow.tsx b/src/components/InfoWindow.tsx
@@ -12,12 +12,10 @@ export function InfoWindow({ title, msg, onClose }: Props) {
       <div
         className="fixed left-0 top-0 h-full w-full bg-black bg-opacity-50"
         onClick={onClose}
-      >
-      </div>
+      />
       <div className="z-50 rounded-lg bg-white p-6 shadow-md">
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-800">{title}</h2>
-          {/* <img src="" alt="" /> */}
+        <div className="mb-4 flex items-center justify-between text-lg font-semibold text-gray-800">
+          {title}
         </div>
         <p className="text-gray-700">{msg}</p>
       </div>