feat: add quest page

frontend/src/@types/index.ts

@@ -46,3 +46,16 @@ export interface DatasetExport {
   fileNames: string[];
   dataSets: Array<any>;
 }
+
+export interface IQuest {
+  title: string;
+  description: string;
+  config: string;
+  guid: string;
+  userGuid: string;
+  createdAt: string;
+  updatedAt: string;
+  joinCode: string;
+  organizerName?: string;
+  participants?: string[]; // userNpubs
+}

frontend/src/pages/quest/[guid].tsx

@@ -0,0 +1,118 @@
+// this is what will contain the dashboard
+
+import { GetServerSideProps, NextPage } from "next";
+import { getServerSession } from "next-auth";
+import { DashboardLayout, Meta } from "~/components/layouts";
+import { authOptions } from "../api/auth/[...nextauth]";
+import { Button } from "~/components/ui";
+import React from "react";
+import { api } from "~/config";
+import { useSession } from "next-auth/react";
+import { IQuest } from "~/@types";
+import { usePathname } from "next/navigation";
+
+const QuestDetailPage: NextPage = () => {
+  const [quest, setQuest] = React.useState<IQuest | null>(null);
+  const pathname = usePathname();
+
+  // get the last part of the pathname
+  const questId = pathname.split("/").pop();
+
+  const session = useSession();
+  // fetch the quest info
+  React.useEffect(() => {
+    // maker request to backend to get quest info
+    (async () => {
+      const res = await api.get("/quest/detail", {
+        params: {
+          questId,
+        },
+        headers: {
+          Authorization: `Bearer ${session.data?.user?.authToken}`,
+        },
+      });
+
+      if (res.status === 200) {
+        const data = res.data;
+        setQuest(data.quest);
+
+        const questSubscribers = await getQuestSubscribers(questId!);
+        if (questSubscribers) {
+          setQuestSubscribers(questSubscribers);
+        }
+      }
+    })();
+  }, []);
+
+  // TODO: move to quest.service.ts
+  const [questSubscribers, setQuestSubscribers] = React.useState<any[]>([]);
+  const getQuestSubscribers = async (questId: string) => {
+    try {
+      const res = await api.get(
+        "/quest/subscribers",
+
+        {
+          params: {
+            questId,
+          },
+          headers: {
+            Authorization: `Bearer ${session.data?.user?.authToken}`,
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        console.log("Quest Subscribers fetched successfully");
+        console.log(res.data);
+        return res.data.userQuests;
+      } else {
+        console.error("Failed to fetch quest subscribers");
+      }
+    } catch (error) {
+      console.error("Failed to fetch quest subscribers", error);
+    }
+  };
+
+  return (
+    <DashboardLayout>
+      <Meta
+        meta={{
+          title: `${quest?.title ?? "Quest"} | NeuroFusion Explorer`,
+          description: `${quest?.description ?? ""}`,
+        }}
+      />
+      <h1 className="text-4xl">Quest</h1>
+
+      {/* display overall quest details */}
+      <div className="mt-5">
+        <h2 className="text-2xl">{quest?.title}</h2>
+        <p className="mt-2">{quest?.description}</p>
+
+        <p className="mt-2">Active Participants: {questSubscribers.length}</p>
+      </div>
+
+      <Button intent="primary" className="mt-4">
+        Download Data
+      </Button>
+    </DashboardLayout>
+  );
+};
+
+export default QuestDetailPage;
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: { session },
+  };
+};

frontend/src/pages/quests.tsx

@@ -7,6 +7,7 @@ import { DashboardLayout, Meta } from "~/components/layouts";
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input } from "~/components/ui";
 import { api } from "~/config";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 
 interface IQuest {
   title: string;
@@ -175,6 +176,8 @@ const QuestsPage: NextPage = () => {
       <Meta
         meta={{
           title: "NeuroFusion | Quests",
+          description:
+            "Create and manage quests for your participants to run. Wearables. Behavior Tracking. Health Data.",
         }}
       />{" "}
       <h1 className="text-4xl">Quests</h1>
@@ -273,7 +276,9 @@ const QuestsPage: NextPage = () => {
             <tbody>
               {savedQuests.map((quest) => (
                 <tr key={quest.guid}>
-                  <td>{quest.title}</td>
+                  <Link href={`/quest/${quest.guid}`}>
+                    <td className="underline">{quest.title}</td>
+                  </Link>
                   <td>{quest.description}</td>
                   <td className="flex justify-center">
                     <Button