Merge pull request #199 from isd-sgcu/dev

trigger build
isd-sgcu · Jul 30, 2024 · 592c5a3 · 592c5a3
2 parents 9634347 + 1e32947
commit 592c5a3
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 53 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   compress: true,
   compiler: {
     removeConsole: process.env.APP_ENV == 'production',

diff --git a/src/app/rpkm/freshy-night/coming-soon/page.tsx b/src/app/rpkm/freshy-night/coming-soon/page.tsx
@@ -22,7 +22,7 @@ export default function ComingSoon() {
             ตั้งแต่วันที่ <strong>3 สิงหาคม 2567</strong>
           </p>
           <p>
-            เวลา <strong>00:00</strong> เป็นต้นไป
+            เวลา <strong>12:00</strong> เป็นต้นไป
           </p>
         </section>
       </Base>

diff --git a/src/app/rpkm/freshy-night/confirm-register/page.tsx b/src/app/rpkm/freshy-night/confirm-register/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, ChangeEvent } from 'react';
+import { useState, ChangeEvent, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/context/AuthContext';
 import { getAccessToken } from '@/utils/auth';
@@ -16,6 +16,7 @@ import Spinner from '@/components/firstdate/Spinner';
 import UserCard from '@/components/UserCard';
 import ConfirmRegisterModal from '@/components/rpkm/freshy-night/ConfirmRegisterModal';
 import { createCheckIn } from '@/utils/checkin';
+import { getCurrentTime } from '@/utils/time';
 
 type RegisterUser = Pick<
   UserDTO,
@@ -54,6 +55,16 @@ export default function Page() {
   });
   const [errors, setErrors] = useState<string[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentTime, setCurrentTime] = useState<Date | null>(null);
+
+  useEffect(() => {
+    const initialize = async () => {
+      const now = (await getCurrentTime()).currentTime;
+      setCurrentTime(now);
+    };
+
+    initialize();
+  }, []);
 
   const handleInputChange = (
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>
@@ -108,8 +119,20 @@ export default function Page() {
     }
   }
 
-  const handleConfirmBtn = () => {
-    if (!validateForm()) return;
+  const handleConfirmBtn = async () => {
+    if (!validateForm()) {
+      return;
+    }
+
+    const freshyNightEndDate = new Date(
+      process.env.NEXT_PUBLIC_END_FRESHY_NIGHT_DATE as string
+    );
+
+    if (currentTime && currentTime > freshyNightEndDate) {
+      toast.error('หมดเวลาลงทะเบียน');
+      return;
+    }
+
     setIsModalOpen(true);
   };
 

diff --git a/src/app/rpkm/freshy-night/register/page.tsx b/src/app/rpkm/freshy-night/register/page.tsx
@@ -8,7 +8,7 @@ export default function Register() {
   const { button } = modalStyles['red'];
 
   return (
-    <div className="min-h-screen w-full grid place-items-center">
+    <div className="min-h-screen w-full grid place-items-center relative">
       <Base
         className="p-[10%] h-[calc(70vw*(801/371))] gap-4"
         withBus={true}

diff --git a/src/app/rpkm/freshy-night/rules/page.tsx b/src/app/rpkm/freshy-night/rules/page.tsx
@@ -22,7 +22,7 @@ export default function Rules() {
   const { button } = modalStyles['red'];
 
   return (
-    <div className="min-h-screen w-full grid place-items-center">
+    <div className="min-h-screen w-full grid place-items-center relative">
       <Base
         className="p-[10%] h-[calc(50vw*(801/371))] gap-6"
         withBus={true}

diff --git a/src/app/rpkm/staff/home/page.tsx b/src/app/rpkm/staff/home/page.tsx
@@ -6,11 +6,11 @@ import React, { useEffect, useState } from 'react';
 
 function Page() {
   const [eventText, setEventText] = useState<string>('');
-  const [event, setEvent] = useState<string>('');
 
   useEffect(() => {
-    const checkEvent = async () => {
+    const initialize = async () => {
       const currentTime = (await getCurrentTime()).currentTime;
+
       const freshy_night_time = new Date(
         process.env.NEXT_PUBLIC_FRESHY_NIGHT_EVENT as string
       );
@@ -21,26 +21,16 @@ function Page() {
         process.env.NEXT_PUBLIC_RPKM_DAY_2 as string
       );
 
-      if (currentTime > freshy_night_time) {
+      if (currentTime >= freshy_night_time) {
         setEventText('Freshy Night');
-        setEvent('freshy-night');
-        return;
-      }
-
-      if (currentTime > rpkm_day_2_time) {
+      } else if (currentTime >= rpkm_day_2_time) {
         setEventText('Onsite 4 สิงหาคม 2567');
-        setEvent('rpkm-day-2');
-        return;
-      }
-
-      if (currentTime > rpkm_day_1_time) {
+      } else if (currentTime >= rpkm_day_1_time) {
         setEventText('Onsite 3 สิงหาคม 2567');
-        setEvent('rpkm-day-1');
-        return;
       }
     };
 
-    checkEvent();
+    initialize();
   }, []);
 
   return (
@@ -74,7 +64,7 @@ function Page() {
               {eventText}
             </div>
             <div className="w-4/5 h-fit">
-              <Scan event={event} />
+              <Scan />
             </div>
             <div className="text-xl font-semibold">QR-Reader</div>
           </div>

diff --git a/src/components/rpkm/Sidebar/FreshyNightLink.tsx b/src/components/rpkm/Sidebar/FreshyNightLink.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { GetCheckIn } from '@/types/checkIn';
 import { fetchCheckIn } from '@/utils/checkin';
 import { getCurrentTime } from '@/utils/time';
@@ -25,10 +26,14 @@ const FreshyNightLink = ({ children }: FreshyNightLinkProps) => {
     initialize();
   }, []);
 
-  const freshyNightDate = useMemo<Date>(() => {
+  const freshyNightStartDate = useMemo<Date>(() => {
     return new Date(process.env.NEXT_PUBLIC_FRESHY_NIGHT_DATE as string);
   }, []);
 
+  const freshyNightEndDate = useMemo<Date>(() => {
+    return new Date(process.env.NEXT_PUBLIC_END_FRESHY_NIGHT_DATE as string);
+  }, []);
+
   const isRegistered = useMemo<boolean>(() => {
     return (
       !!checkins &&
@@ -37,7 +42,7 @@ const FreshyNightLink = ({ children }: FreshyNightLinkProps) => {
   }, [checkins]);
 
   const handleOnClick = () => {
-    if (currentTime && currentTime < freshyNightDate) {
+    if (currentTime && currentTime < freshyNightStartDate) {
       router.push('/rpkm/freshy-night/coming-soon');
       return;
     }
@@ -50,7 +55,17 @@ const FreshyNightLink = ({ children }: FreshyNightLinkProps) => {
     router.push('/rpkm/freshy-night/register-done');
   };
 
-  return <div onClick={handleOnClick}>{children}</div>;
+  return (
+    <div
+      onClick={handleOnClick}
+      className={cn({
+        'opacity-30 pointer-events-none cursor-not-allowed':
+          !currentTime || (currentTime && currentTime > freshyNightEndDate),
+      })}
+    >
+      {children}
+    </div>
+  );
 };
 
 export default FreshyNightLink;
diff --git a/src/components/rpkm/Sidebar/Menu.tsx b/src/components/rpkm/Sidebar/Menu.tsx
@@ -10,12 +10,9 @@ function Menu() {
 
   return (
     <div className="w-full h-full text-left  font-medium flex flex-col pb-[5vh]">
-      <Link
-        href=""
-        className="text-left cursor-not-allowed text-gray-400"
-      >
+      <div className="text-left text-gray-400 cursor-context-menu">
         ลงทะเบียนเลือกบ้าน
-      </Link>
+      </div>
       <FreshyNightLink>
         <div className="text-left cursor-pointer">ลงทะเบียน Freshy Night</div>
       </FreshyNightLink>

diff --git a/src/components/rpkm/Sidebar/UserInfo.tsx b/src/components/rpkm/Sidebar/UserInfo.tsx
@@ -11,10 +11,12 @@ import { useAuth } from '@/context/AuthContext';
 import Link from 'next/link';
 import { baanInfos } from '../Baan/baanInfos';
 import { getCurrentTime } from '@/utils/time';
+import QrCodeModal from '../freshy-night/QrCodeModal';
 
 function UserInfo() {
   const { user } = useAuth();
   const [currentTime, setCurrentTime] = useState<Date | null>(null);
+  const [qrModal, setQrModal] = useState(false);
   const findBaan = (result: string) => {
     return baanInfos.find((baan) => baan.name.en === result);
   };
@@ -103,15 +105,20 @@ function UserInfo() {
         </div>
       </Link>
       <button
-        className="w-[4.8vh] h-[4.8vh] rounded-full flex justify-center items-center shadow-[0px_3px_4px_.5px_#00000048] hover:scale-105 bg-[#F1DFC1] opacity-30"
-        onClick={() => console.log('qrcode')}
+        className="w-[4.8vh] h-[4.8vh] rounded-full flex justify-center items-center hover:scale-105 bg-[#F1DFC1]"
+        onClick={() => setQrModal(true)}
       >
         <Image
           src={qrCodeIcon}
           alt="QR-Code Icon"
           style={{ width: '2.63vh', height: '2.63vh' }}
         />
       </button>
+      <QrCodeModal
+        setOpen={setQrModal}
+        open={qrModal}
+        userId={user ? user.id : ''}
+      />
     </div>
   );
 }

diff --git a/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx b/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { QrReader } from 'react-qr-reader';
 import { motion } from 'framer-motion';
 import { useAuth } from '@/context/AuthContext';
@@ -8,10 +8,9 @@ import FailureModal from './failureModal';
 import { createCheckIn } from '@/utils/checkin';
 import { CheckIn } from '@/types/checkIn';
 import dayjs from 'dayjs';
-interface ScanProp {
-  event: string;
-}
-const Scan: React.FC<ScanProp> = ({ event }) => {
+import { getCurrentTime } from '@/utils/time';
+
+const Scan: React.FC = () => {
   const [checkInData, setCheckInData] = useState<CheckIn | null>(null);
   const [taken, setTaken] = useState<boolean>(false);
   const [status, setStatus] = useState<'success' | 'error' | 'idle'>('idle');
@@ -25,13 +24,42 @@ const Scan: React.FC<ScanProp> = ({ event }) => {
       return;
     }
 
+    let event = '';
+    const currentTime = (await getCurrentTime()).currentTime;
+
+    //need to check date every time because qr component don't update function when function re-render
+    const freshy_night_time = new Date(
+      process.env.NEXT_PUBLIC_FRESHY_NIGHT_EVENT as string
+    );
+    const rpkm_day_1_time = new Date(
+      process.env.NEXT_PUBLIC_RPKM_DAY_1 as string
+    );
+    const rpkm_day_2_time = new Date(
+      process.env.NEXT_PUBLIC_RPKM_DAY_2 as string
+    );
+
+    if (currentTime > freshy_night_time) {
+      event = 'freshy-night';
+    } else if (currentTime > rpkm_day_2_time) {
+      event = 'rpkm-day-2';
+    } else if (currentTime > rpkm_day_1_time) {
+      event = 'rpkm-day-1';
+    }
+
+    //need to use localstorage to prevent user scan qr code multiple time
+    //i don't useState because it not work with qrscanner
+    const enable = localStorage.getItem('enable') === 'true';
+    if (!enable) return;
+
     const userId = scanRawData.text;
     const newCheckInData: CheckIn | null = await createCheckIn(
       userId,
       user.email,
       event
     );
 
+    localStorage.setItem('enable', 'false');
+
     if (newCheckInData) {
       if (newCheckInData.checkIn.isDuplicate) {
         const date = dayjs(newCheckInData.checkIn.timestamp);
@@ -62,16 +90,18 @@ const Scan: React.FC<ScanProp> = ({ event }) => {
     setStatus('idle');
   };
 
+  useEffect(() => {
+    localStorage.setItem('enable', 'true');
+  }, []);
+
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <div className="relative w-full h-full">
-        {event != '' && (
-          <QrReader
-            className="bg-black"
-            onResult={handleScanResult}
-            constraints={{ facingMode: 'environment' }}
-          />
-        )}
+        <QrReader
+          className="bg-black"
+          onResult={handleScanResult}
+          constraints={{ facingMode: 'environment' }}
+        />
 
         <motion.div
           className="absolute left-1/2 top-1/2 h-48 w-48 max-w-md -translate-x-1/2 -translate-y-1/2 transform rounded-3xl border-4 border-white"

diff --git a/src/components/rpkm/staff/home/qrscanner/confirmationModal.tsx b/src/components/rpkm/staff/home/qrscanner/confirmationModal.tsx
@@ -15,6 +15,11 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
   onClose,
   userData,
 }) => {
+  const handleOnClose = () => {
+    onClose();
+    localStorage.setItem('enable', 'true');
+  };
+
   const modalClasses = `fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 transition-all ease-in-out duration-300 ${
     isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
   }`;
@@ -45,7 +50,7 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
         </h1>
         <div className="flex flex-col items-center mx-auto justify-center">
           <button
-            onClick={onClose}
+            onClick={handleOnClose}
             className="drop-shadow-lg mt-5 w-32 h-10 text-white bg-[url('/rpkm/staff/button.svg')] bg-center bg-contain bg-no-repeat flex justify-center items-center"
           >
             สแกนต่อ

diff --git a/src/components/rpkm/staff/home/qrscanner/failureModal.tsx b/src/components/rpkm/staff/home/qrscanner/failureModal.tsx
@@ -21,17 +21,22 @@ const FailModal: React.FC<FailModalProps> = ({
     isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
   }`;
 
+  const handleOnClose = () => {
+    onClose();
+    localStorage.setItem('enable', 'true');
+  };
+
   const modalContentClasses = `flex flex-col justify-center items-center justify-around relative w-80 h-96 bg-contain bg-no-repeat bg-center bg-[url('/rpkm/staff/modal-background.svg')] pt-5 pb-10 `;
   const button = taken ? (
     <button
-      onClick={onClose}
+      onClick={handleOnClose}
       className="drop-shadow-lg mt-5 w-32 h-10 text-white bg-[url('/rpkm/staff/black-button.svg')] bg-center bg-contain bg-no-repeat flex justify-center items-center"
     >
       กลับ
     </button>
   ) : (
     <button
-      onClick={onClose}
+      onClick={handleOnClose}
       className="drop-shadow-lg mt-5 w-32 h-10 text-white bg-[url('/rpkm/staff/button.svg')] bg-center bg-contain bg-no-repeat flex justify-center items-center"
     >
       สแกนต่อ