feat: add dynamic date time

src/components/buttons/StartFormButton.tsx

@@ -3,16 +3,17 @@ import type { Dispatch, FC } from "react"
 import { IlluminateButton } from "@/components/buttons/animated/illuminated"
 import { useFirebaseAuth } from "@/contexts/firebaseAuth"
 import { useRegister } from "@/contexts/RegisterContext"
-import { isClosed } from "@/utils/timer"
+import { useTimer } from "@/hooks/useTimer"
 
 export const StartFormButton: FC<{
   byPass: boolean | undefined
   setShowLogin: Dispatch<boolean>
 }> = ({ byPass, setShowLogin }) => {
   const { user, signOut } = useFirebaseAuth()
+  const { isClosed } = useTimer()
   const { section } = useRegister()
 
-  return user.isLoggedIn() ? (
+  return user.isLoggedIn() && isClosed(false) ? (
     <div className="flex flex-col items-center">
       <p className="mb-2 max-w-[400px] text-center text-sm text-red-400">
         ขณะนี้ระบบได้ปิดรับผู้สมัครแล้ว

src/components/texts/static/Footer.tsx

@@ -1,6 +1,6 @@
 export const Footer = () => {
   return (
-    <div className="absolute bottom-0 w-full pb-3">
+    <div className="mt-4 w-full pb-3">
       <h1 className="text-center text-xs text-gray-500">
         TUMSO (Triam Udom Mathematics and Science Olympiad)
       </h1>

src/components/texts/static/FormDescription.tsx

@@ -1,18 +1,23 @@
+import { useTimer } from "@/hooks/useTimer"
+import { pad, THMONTH } from "@/utils/timer"
+
 export const FormDescription = () => {
+  const { open, close, round } = useTimer()
+
   return (
     <div className="rounded-xl border border-gray-600 border-opacity-60 px-6 pt-4 pb-5">
       <h1 className="font-semibold">ข้อมูลการสมัคร</h1>
       <ol className="list-decimal pl-6">
         <li>
-          การแข่งขันคณิตศาสตร์และวิทยาศาสตร์ระหว่างโรงเรียน ครั้งที่ 19
-          เป็นการแข่งขันในรายวิชาคณิตศาสตร์ ฟิสิกส์ เคมี ชีววิทยา และคอมพิวเตอร์
+          การแข่งขันคณิตศาสตร์และวิทยาศาสตร์ระหว่างโรงเรียน ครั้งที่ {round}{" "}
+          เป็นการแข่งขันในรายวิชาฟิสิกส์ เคมี ชีววิทยา และคอมพิวเตอร์
           โดยแข่งขันในลักษณะทีม ทีมละไม่เกิน 2 คน
           เข้าแข่งขันแยกกันในแต่ละรายวิชา (ในแต่ละรายวิชานักเรียนผู้เข้าแข่งขัน
           1 ทีม ต้องมีครูผู้ควบคุมทีม 1 คน)
         </li>
         <li>
-          นักเรียนผู้เข้าแข่งขันต้องกําลังศึกษาอยู่ในระดับมัธยมศึกษาตอนต้นหรือมัธยมศึกษาตอนปลายของปีการศึกษา
-          2565 ในสถานศึกษาเดียวกัน
+          นักเรียนผู้เข้าแข่งขันต้องกําลังศึกษาอยู่ในระดับมัธยมศึกษาตอนต้นหรือมัธยมศึกษาตอนปลายของปีการศึกษา{" "}
+          {open.getFullYear() + 543} ในสถานศึกษาเดียวกัน
         </li>
         <li>แต่ละรายวิชารับสมัครนักเรียนผู้เข้าแข่งขันจํานวน 30 ทีมเท่านั้น</li>
         <li>
@@ -30,7 +35,9 @@ export const FormDescription = () => {
           <span className="text-red-400 underline">
             อัพโหลดขึ้นสู่ระบบพร้อมกับส่งแบบฟอร์ม
           </span>{" "}
-          ภายในวันที่ 11 มกราคม 2565 เวลา 12.00 น.
+          ภายในวันที่ {close.getDate()} {THMONTH[close.getMonth()]}{" "}
+          {close.getFullYear() + 543} เวลา {pad(close.getHours())}:
+          {pad(close.getMinutes())} น.
         </li>
         <li>
           ผู้สมัครสามารถบันทึกข้อมูลแบบฟอร์มไว้ส่งในภายหลังได้

src/components/texts/static/group/FormsHeading.tsx

@@ -1,10 +1,19 @@
+import { useTimer } from "@/hooks/useTimer"
+import { pad, THMONTH } from "@/utils/timer"
+
 export const FormsHeading = () => {
+  const { close } = useTimer()
   return (
     <div>
       <h1 className="text-2xl font-semibold">ลงทะเบียนสมัครแข่งขัน</h1>
       <h1 className="mt-1 font-medium leading-4 text-gray-600">
         หมดเขตรับสมัคร:{" "}
-        <span className="text-red-600">11 มกราคม 2565 เวลา 12.00 น.</span>
+        <span className="text-red-600">
+          {close.getDate()} {THMONTH[close.getMonth()]}{" "}
+          {close.getFullYear() + 543} เวลา {pad(close.getHours())}:
+          {pad(close.getMinutes())}
+          น.
+        </span>
       </h1>
       <p className="text-gray-600">
         ขอความร่วมมือผู้สมัคร

src/contexts/firebaseAuth.tsx

@@ -82,6 +82,7 @@ export const FirebaseAuthProvider: FC<{ children: any }> = ({ children }) => {
     appId: "1:183078975975:web:d1c7436fa6fc91f1d2e542"
   }
   initializeApp(firebaseConfig)
+
   return (
     <FirebaseAuthContext.Provider value={useFBAuthAction()}>
       {children}

src/hooks/groups/sectionContainer/usePageRestrictionEffects.tsx

@@ -2,14 +2,15 @@ import { useEffect } from "react"
 
 import { useFirebaseAuth } from "@/contexts/firebaseAuth"
 import { useRegister } from "@/contexts/RegisterContext"
-import { isClosed } from "@/utils/timer"
+import { useTimer } from "@/hooks/useTimer"
 
 export const usePageRestrictionEffects = (
   query: any,
   byPass: boolean | undefined
 ) => {
   const { user } = useFirebaseAuth()
   const { section } = useRegister()
+  const { isClosed } = useTimer()
   useEffect(() => {
     if (!user.isLoggedIn()) {
       section.set("landing")

src/hooks/useTimer.tsx

@@ -0,0 +1,61 @@
+import { collection, doc, getDoc, getFirestore } from "@firebase/firestore"
+import { useEffect, useState } from "react"
+
+export const useTimer = () => {
+  const [CTIME, setCT] = useState(0)
+  const [OTIME, setOT] = useState(0)
+  const [round, setRound] = useState(0)
+
+  useEffect(() => {
+    if (!localStorage.getItem("CLOSE_T")) {
+      const getTimer = async () => {
+        const timerRef = collection(getFirestore(), "configs")
+        const docData = await getDoc(doc(timerRef, "timers"))
+        const a = docData.get("REG_CLOSE_TIMESTAMP").toMillis()
+        const b = docData.get("REG_OPEN_TIMESTAMP").toMillis()
+        const r = docData.get("COMP_ROUND")
+        setCT(a)
+        setOT(b)
+        setRound(r)
+
+        localStorage.setItem(
+          "CLOSE_T",
+          docData.get("REG_CLOSE_TIMESTAMP").toMillis()
+        )
+
+        localStorage.setItem(
+          "OPEN_T",
+          docData.get("REG_OPEN_TIMESTAMP").toMillis()
+        )
+        localStorage.setItem("ROUND_C", docData.get("COMP_ROUND"))
+      }
+
+      getTimer()
+    }
+
+    const CLOSE_TIMESTAMP = parseInt(localStorage.getItem("CLOSE_T") || "0", 10)
+    const OPEN_TIMESTAMP = parseInt(localStorage.getItem("OPEN_T") || "0", 10)
+    setCT(CLOSE_TIMESTAMP)
+    setOT(OPEN_TIMESTAMP)
+    setRound(parseInt(localStorage.getItem("ROUND_C") || "0", 10))
+  }, [])
+
+  const isClosed = (byPass: boolean | undefined): boolean => {
+    if (byPass === true) {
+      return false
+    }
+    return new Date().getTime() >= CTIME
+  }
+
+  const isStarted = () => {
+    return new Date().getTime() >= OTIME
+  }
+
+  return {
+    isStarted,
+    isClosed,
+    open: new Date(OTIME),
+    close: new Date(CTIME),
+    round
+  }
+}

src/pages/index.tsx

@@ -5,7 +5,9 @@ import Link from "next/link"
 import { useEffect, useState } from "react"
 
 import { RevealText } from "@/components/texts/animated/reveal"
+import { useTimer } from "@/hooks/useTimer"
 import { useWindowDimensions } from "@/utils/dimension"
+import { MONTH, nth, THMONTH } from "@/utils/timer"
 
 const Page = () => {
   const { scrollY } = useScroll()
@@ -14,6 +16,8 @@ const Page = () => {
   const { height } = useWindowDimensions()
   const [docHeight, setDocHeight] = useState(0)
 
+  const { open, round } = useTimer()
+
   useEffect(() => {
     scrollY.onChange((d) => {
       setSY(d)
@@ -40,7 +44,8 @@ const Page = () => {
           transition={{ type: "tween", delay: 0.4, duration: 0.6 }}
           className="pt-1 text-gray-600"
         >
-          Registration starts 30th December 2022
+          Registration starts {open.getDate()}
+          {nth(open.getDate())} {MONTH[open.getMonth()]} {open.getFullYear()}
         </RevealText>
         <motion.div
           initial={{ opacity: 0 }}
@@ -100,8 +105,8 @@ const Page = () => {
               </h1>
               <p className="mt-2 max-w-lg break-all text-center text-gray-200">
                 TUMSO คือ
-                การแข่งขันคณิตศาสตร์และวิทยาศาสตร์ระหว่างโรงเรียนครั้งที่ 19
-                จัดขึ้นโดยโรงเรียนเตรียมอุมดมศึกษา
+                การแข่งขันคณิตศาสตร์และวิทยาศาสตร์ระหว่างโรงเรียนครั้งที่{" "}
+                {round} จัดขึ้นโดยโรงเรียนเตรียมอุมดมศึกษา
                 เป็นการแข่งขันในรายวิชาคณิตศาสตร์ฟิสิกส์เคมี ชีววิทยา
                 และคอมพิวเตอร์ โดยแข่งขันในลักษณะทีม ทีมละไม่เกิน 2 คน
                 เข้าแข่งขันแยกกันในแต่ละรายวิชา{" "}
@@ -278,7 +283,8 @@ const Page = () => {
                 </Link>
               </div>
               <p className="mt-2 text-center text-xs text-gray-400">
-                เริ่มวันที่ 30 ธันวาคม 2565
+                เริ่มวันที่ {open.getDate()} {THMONTH[open.getMonth()]}{" "}
+                {open.getFullYear()}
               </p>
             </motion.div>
           </div>
@@ -306,7 +312,8 @@ const Page = () => {
                 </Link>
               </div>
               <p className="mt-2 text-center text-xs text-gray-400">
-                เริ่มวันที่ 30 ธันวาคม 2565
+                เริ่มวันที่ {open.getDate()} {THMONTH[open.getMonth()]}{" "}
+                {open.getFullYear()}
               </p>
             </motion.div>
             <motion.div

src/utils/fixedSelection.ts

@@ -4,7 +4,7 @@ export const availableSelection = [
   "วิชาฟิสิกส์",
   "วิชาเคมี",
   "วิชาชีวะ",
-  "วิชาคณิตศาสตร์",
+  // "วิชาคณิตศาสตร์",
   "วิชาคอมพิวเตอร์"
 ]
 

src/utils/timer.ts

@@ -1,7 +1,52 @@
-const CLOSE_TIMESTAMP = 1873413200000
-export const isClosed = (byPass: boolean | undefined): boolean => {
-  if (byPass === true) {
-    return false
+export const MONTH = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+]
+
+export function pad(num: number | undefined) {
+  if (num === 0) return "00"
+  if (!num) return ""
+  let strNum = num.toString()
+  while (strNum.length < 2) {
+    strNum = `0${strNum}`
+  }
+  return strNum
+}
+export const THMONTH = [
+  "มกราคม",
+  "กุมภาพันธ์",
+  "มีนาคม",
+  "เมษายน",
+  "พฤษภาคม",
+  "มิถุนายน",
+  "กรกฎาคม",
+  "สิงหาคม",
+  "กันยายน",
+  "ตุลาคม",
+  "พฤศจิกายน",
+  "ธันวาคม"
+]
+
+export const nth = (d: number) => {
+  if (d > 3 && d < 21) return "th"
+  switch (d % 10) {
+    case 1:
+      return "st"
+    case 2:
+      return "nd"
+    case 3:
+      return "rd"
+    default:
+      return "th"
   }
-  return new Date().getTime() >= CLOSE_TIMESTAMP
 }