feat/secure certs page (#215)

* feat: enhance certificate page navigation and loading states

* feat: add award validation and enhance mobile navigation for certificates

* fix: add missing key prop to sponsor list items in footer component

Author: beambeambeam

apps/api/src/routers/cert/index.ts

@@ -40,6 +40,10 @@ export const certRouter = {
       }
       const team = userTeam[0]
 
+      if (team.award === "NONE") {
+        throw new Error("Team has not received any award yet")
+      }
+
       const isAdviser = input.member === "adviser"
 
       if (isAdviser) {

apps/web/app/(protected)/_components/team-nav.tsx

@@ -19,6 +19,38 @@ export function TeamNavMenu() {
   return <TeamNavMenuClient teamData={teamData} />
 }
 
+export function useTeamNavMobileLinks(): NavLink[] {
+  const query = useQuery(orpc.register.all.get.queryOptions())
+  const statusQuery = useQuery(orpc.register.status.get.queryOptions())
+
+  const canAccessCerts =
+    query.data?.team && statusQuery.data?.registerStatus?.submitRegister && query.data.team.award !== "NONE"
+
+  return [
+    {
+      label: "ทีมของคุณ",
+      type: "normal",
+      href: "/teams",
+      mobileOnly: true,
+    },
+    ...(canAccessCerts
+      ? [
+          {
+            label: "ประกาศนียบัตร",
+            type: "normal",
+            href: "/teams/certs",
+            mobileOnly: true,
+          } as NavLink,
+        ]
+      : []),
+    {
+      label: "ออกจากระบบ",
+      type: "action",
+      action: "signout" as const,
+    },
+  ]
+}
+
 export const TeamNavMobileLinks: NavLink[] = [
   {
     label: "ทีมของคุณ",

apps/web/app/(protected)/teams/certs/page.tsx

@@ -6,7 +6,8 @@ import { Navbar } from "@/app/_components/navbar"
 import { orpc } from "@/utils/orpc"
 import { useQuery } from "@tanstack/react-query"
 import { cn } from "@workspace/ui/lib/utils"
-import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { useState, useEffect } from "react"
 
 const BACKGROUND_CLASS =
   "bg-[url(/static/background-image/my-team/xs.webp)] md:bg-[url(/static/background-image/my-team/md.webp)] lg:bg-[url(/static/background-image/my-team/lg.webp)] 2xl:bg-[url(/static/background-image/my-team/2xl.webp)] bg-cover bg-center bg-no-repeat bg-scroll bg-black"
@@ -15,9 +16,69 @@ type MemberType = "adviser" | "member1" | "member2" | "member3"
 
 function CertPage() {
   const [selectedMember, setSelectedMember] = useState<MemberType | null>(null)
+  const router = useRouter()
   const query = useQuery(orpc.register.all.get.queryOptions())
+  const statusQuery = useQuery(orpc.register.status.get.queryOptions())
 
-  if (query.isPending) {
+  useEffect(() => {
+    if (query.data && statusQuery.data) {
+      if (!query.data.team) {
+        router.push("/teams")
+        return
+      }
+
+      if (!statusQuery.data.registerStatus?.submitRegister) {
+        router.push("/teams")
+        return
+      }
+
+      if (query.data.team.award === "NONE") {
+        router.push("/teams")
+        return
+      }
+    }
+  }, [query.data, statusQuery.data, router])
+
+  if (query.data && statusQuery.data) {
+    if (
+      !query.data.team ||
+      !statusQuery.data.registerStatus?.submitRegister ||
+      query.data.team.award === "NONE"
+    ) {
+      return (
+        <div
+          className={cn("flex min-h-screen w-full flex-col items-center justify-center", BACKGROUND_CLASS)}>
+          <div className="flex flex-col items-center gap-3">
+            <div className="size-8 animate-spin rounded-full border-4 border-white/30 border-t-white" />
+            <p className="text-[1rem] text-white opacity-70">กำลังเปลี่ยนหน้า...</p>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  if (query.isError || statusQuery.isError) {
+    return (
+      <div className={cn("flex min-h-screen w-full flex-col items-center", BACKGROUND_CLASS)}>
+        <Navbar links={TeamNavMobileLinks} CTAId={"regis"} sections={[]} />
+        <div className="flex w-full flex-1 items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <p className="text-[1rem] text-red-400">เกิดข้อผิดพลาดในการโหลดข้อมูล</p>
+            <button
+              onClick={() => {
+                query.refetch()
+                statusQuery.refetch()
+              }}
+              className="mt-4 rounded-lg bg-white/20 px-6 py-2 text-white hover:bg-white/30">
+              ลองใหม่อีกครั้ง
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (query.isPending || statusQuery.isPending) {
     return (
       <div className={cn("flex min-h-screen w-full flex-col items-center", BACKGROUND_CLASS)}>
         <Navbar links={TeamNavMobileLinks} CTAId={"regis"} sections={[]} />

apps/web/app/_components/footer.tsx

@@ -14,9 +14,10 @@ function Sponsor() {
         สนับสนุนโดย
       </div>
       {SponsorList.map((s) => (
-        <div className="flex flex-col items-center gap-[12px] self-stretch max-lg:justify-center lg:flex-row lg:gap-6">
+        <div
+          key={s.name}
+          className="flex flex-col items-center gap-[12px] self-stretch max-lg:justify-center lg:flex-row lg:gap-6">
           <GlassCard
-            key={s.name}
             className="2xl:min-h-30 2xl:min-w-30 flex aspect-square min-h-[70px] min-w-[70px] items-center justify-center px-6 py-6 lg:min-h-[90px] lg:min-w-[90px]"
             style={{ borderRadius: 24, border: "1.5px solid rgba(255, 255, 255, 0.10)" }}>
             <img

apps/web/app/_components/landing/download-btn.tsx

@@ -2,7 +2,10 @@ import Link, { LinkProps } from "next/link"
 
 export function DownloadBtn({ ...props }: LinkProps) {
   return (
-    <Link className="relative flex cursor-pointer items-center justify-center" {...props}>
+    <Link
+      className="relative flex cursor-pointer items-center justify-center"
+      {...props}
+      href={"/teams/certs"}>
       <span className="text-secondary-50 absolute text-lg font-medium leading-[1.4] lg:text-[28px] 2xl:text-[32px]">
         ดาวน์โหลดประกาศนียบัตร
       </span>