feature use usehooks-ts to handle localstorage

sitcon-tw · Feb 27, 2024 · a46609f · a46609f
1 parent 1179b59
commit a46609f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react-toastify": "^10.0.4",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
+    "usehooks-ts": "^2.15.1",
     "vaul": "^0.9.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(game)/layout.tsx b/src/app/(game)/layout.tsx
@@ -2,6 +2,7 @@
 import Head from "next/head";
 import { Nav } from "@/components/Nav";
 import { Footer } from "@/components/Footer";
+import { useReadLocalStorage } from "usehooks-ts";
 
 import "../globals.css";
 import NonTokenModalContent from "@/components/NonTokenModalContent";
@@ -12,11 +13,12 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const [mounted, setMounted] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+  const token = useReadLocalStorage("token");
   useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
+    setIsClient(true);
   }, []);
+
   return (
     <html lang="zh-TW">
       <Head>
@@ -34,8 +36,8 @@ export default function RootLayout({
       <body>
         <div className="mx-auto flex h-[100svh] w-screen max-w-[768px] flex-col font-sans">
           <Nav />
-          {mounted && localStorage.getItem("token")
-            ? <p>playerToken: {localStorage.getItem("token")}</p>
+          {isClient && token
+            ? <div>playerToken: {token}</div>
             : <NonTokenModalContent />}
           <div className="grow overflow-y-scroll">{children}</div>
           <Footer />

diff --git a/src/app/(game)/scanner/page.tsx b/src/app/(game)/scanner/page.tsx
@@ -6,20 +6,21 @@ import Scanner from "@/components/Scanner";
 import { InfoWindow } from "@/components/InfoWindow";
 import { getBoothToken } from "@/lib/getBoothToken";
 import { sendPuzzle2Player } from "@/lib/sendPuzzle2Player";
+import { useReadLocalStorage } from "usehooks-ts";
 import { invalidToken, puzzleSuccess, puzzleTaken } from "@/lib/const";
 
 export default function Page() {
   const [result, setResult] = useState<string | null>(null);
   const [info, setInfo] = useState({ title: "", msg: "" });
   const [showInfo, setShowInfo] = useState(false);
+  const playerToken: string | null = useReadLocalStorage("token");
 
   useEffect(() => {
     const handleResult = async () => {
       if (typeof result !== "string") return;
       var boothToken = await getBoothToken(result);
       setResult(null);
       if (boothToken) {
-        const playerToken = localStorage.getItem("token");
         if (!playerToken) {
           setInfo({ title: "失敗", msg: "請先報到。" });
           setShowInfo(true);

diff --git a/src/components/NonTokenModalContent.tsx b/src/components/NonTokenModalContent.tsx
@@ -3,23 +3,24 @@ import React, { useEffect, useState } from "react";
 import Dialog from "./Dialog";
 import Scanner from "./Scanner";
 import { getPlayerPuzzle } from "@/lib/getPlayerPuzzle";
+import { useLocalStorage } from "usehooks-ts";
 
 const NonTokenModalContent = () => {
   const [isModalOpen, setModalOpen] = useState(true);
   const [manualInputModal, setManualInputModal] = useState<boolean>(false);
   const [scanQRCodeModal, setScanQRCodeModal] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState("");
   const [result, setResult] = useState<string | null>(null);
+  const [token, setToken] = useLocalStorage("token", "");
 
   useEffect(() => {
     const handleLogin = async () => {
-      console.log(result);
       if (typeof result !== "string") return;
       var puzzle = await getPlayerPuzzle(result);
       setResult(null);
       if (puzzle !== "Invalid token, please try again after checkin.") {
         console.log(puzzle);
-        localStorage.setItem("token", result);
+        setToken(() => result);
         // setModalOpen(false);
       } else {
         setModalOpen(true);