get finished puzzle from opass server

src/app/(game)/page.tsx

@@ -3,11 +3,13 @@
 import { useDetail } from "@/components/Detail";
 import { Menu } from "@/components/Menu";
 import { activities, type ActivityType } from "@/data/activity";
+import { useFinished } from "@/hooks/useFinished";
 import { heading } from "@/varients/heading";
 import { text } from "@/varients/text";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { twMerge } from "tailwind-merge";
+import { useLocalStorage } from "usehooks-ts";
 
 function Activity({
   activity,
@@ -99,13 +101,15 @@ const menus = [
 
 export default function Home() {
   const [active, setActive] = useState(0);
-  const finished = [[1, 2, 5], [1, 2], [4]][active]; // TODO: useFinished('session')
   const [filter, setFilter] = useState<Filter>("all");
   const [Detail, setOpen] = useDetail();
+  const finishedList = useFinished(useLocalStorage("token", "")[0]);
 
   // This maybe need to be modified
   function isActivityFinished(activity: ActivityType, index: number) {
-    return finished.includes(index);
+    const finished = finishedList.includes(activity.name);
+    // console.log(activity.name, finished);
+    return finished;
   }
 
   const data = activities[active].map((item, index) => ({
@@ -129,7 +133,7 @@ export default function Home() {
       <div className="mx-8 my-8 flex flex-col gap-4">
         <div className="flex flex-col gap-1">
           <h5 className={heading({ level: 5 })}>如何完成任務?</h5>
-          <p className={text({ level: 3 })}>{menus[active].description}</p>
+          <div className={text({ level: 3 })}>{menus[active].description}</div>
         </div>
 
         <div className="flex items-center gap-3">

src/hooks/useFinished.ts

@@ -0,0 +1,19 @@
+import { getPlayerPuzzle } from "@/lib/getPlayerPuzzle";
+import { useEffect, useState } from "react";
+
+type finished = string[];
+
+export function useFinished(token: string) {
+    const [finished, setFinished] = useState<finished>([]);
+
+    useEffect(() => {
+        getPlayerPuzzle(token).then((data) => {
+            if (data == "Invalid token, please try again after checkin.") {
+                return;
+            }
+            setFinished(data.deliverers.map((d: any) => d.deliverer));
+        });
+    }, [token]);
+
+    return finished;
+}

src/lib/getPlayerPuzzle.ts

@@ -21,7 +21,7 @@ export async function getPlayerPuzzle(playerToken: string) {
             if (data.message && data.message.startsWith("Invalid token")) {
                 return data.message;
             } else {
-                return data.puzzles.length as number;
+                return data
             }
         });
 }