Merge pull request #43 from isd-sgcu/dev

package.json

@@ -20,6 +20,7 @@
         "@vercel/analytics": "1.0.1",
         "autoprefixer": "10.4.14",
         "axios": "1.4.0",
+        "clsx": "1.2.1",
         "framer-motion": "10.12.18",
         "next": "13.4.7",
         "next-mdx-remote": "4.4.1",

src/components/Toast.tsx

@@ -0,0 +1,95 @@
+// toast provider
+
+import {
+    CheckCircleIcon,
+    ExclamationCircleIcon,
+} from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+interface IToastContext {
+    setToast: (type: 'error' | 'success', message: string) => void;
+    data: { message: string; type: 'error' | 'success' } | null;
+}
+
+const ToastContext = createContext<IToastContext | null>(null);
+
+export const useToast = () => {
+    return useContext(ToastContext);
+};
+
+function getStyle(type: 'error' | 'success') {
+    switch (type) {
+        case 'error':
+            return 'bg-red-500';
+        case 'success':
+            return 'bg-green-500';
+        default:
+            return 'bg-blue-500';
+    }
+}
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+    const toast = useProvideToast();
+
+    return (
+        <ToastContext.Provider value={toast}>
+            {toast.data?.message && (
+                <AnimatePresence>
+                    <motion.div
+                        initial={{ opacity: 0, y: -300, x: '-50%' }}
+                        animate={{ opacity: 1, y: 25, x: '-50%' }}
+                        exit={{ opacity: 0, y: -300, x: '-50%' }}
+                        className={clsx(
+                            getStyle(toast.data?.type),
+                            'fixed left-1/2 z-[101] rounded-full px-4 py-2 text-white'
+                        )}
+                    >
+                        <div className="flex items-center space-x-1">
+                            {toast.data?.type === 'error' && (
+                                <ExclamationCircleIcon className="h-5 w-5" />
+                            )}
+                            {toast.data?.type === 'success' && (
+                                <CheckCircleIcon className="h-5 w-5" />
+                            )}
+                            <span className="font-display text-sm">
+                                {toast.data?.message}
+                            </span>
+                        </div>
+                    </motion.div>
+                </AnimatePresence>
+            )}
+            {children}
+        </ToastContext.Provider>
+    );
+};
+
+const TOAST_TIMEOUT = 3000;
+
+function useProvideToast() {
+    const [toast, setToast] = useState<null | {
+        message: string;
+        type: 'error' | 'success';
+    }>(null);
+
+    const setToastDisplay = (type: 'error' | 'success', message: string) => {
+        if (toast) {
+            setToast(null);
+            setTimeout(() => {
+                setToast({ type, message });
+
+                window.setTimeout(() => {
+                    setToast(null);
+                }, TOAST_TIMEOUT);
+            }, 1000);
+        }
+
+        setToast({ type, message });
+        window.setTimeout(() => {
+            setToast(null);
+        }, TOAST_TIMEOUT);
+    };
+
+    return { setToast: setToastDisplay, data: toast };
+}

src/context/AuthContext.tsx

@@ -72,6 +72,11 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
 
     useEffect(() => {
         const alreadyRegistered = user && user.email && user.email !== '';
+
+        if (isFetching.current) {
+            return;
+        }
+
         switch (router.pathname) {
             case '/':
                 if (user) {

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import { Analytics } from '@vercel/analytics/react';
 import Head from 'next/head';
 import Footer from '@/components/Footer';
 import Navbar from '@/components/Navbar';
+import { ToastProvider } from '@/components/Toast';
 
 const ibmPlexSansThai = IBM_Plex_Sans_Thai({
     subsets: ['latin'],
@@ -62,32 +63,36 @@ function MetaData() {
 export default function App({ Component, pageProps }: AppProps) {
     return (
         <AuthProvider>
-            <MetaData />
+            <ToastProvider>
+                <MetaData />
 
-            <main className={`${ibmPlexSansThai.variable} font-ibm text-white`}>
-                <Navbar />
-                <Component {...pageProps} />
-                <Background />
-                <Footer />
-            </main>
+                <main
+                    className={`${ibmPlexSansThai.variable} font-ibm text-white`}
+                >
+                    <Navbar />
+                    <Component {...pageProps} />
+                    <Background />
+                    <Footer />
+                </main>
 
-            <Analytics />
-            <Script
-                async
-                src="https://www.googletagmanager.com/gtag/js?id=G-0ZFDD1EKVW"
-            />
-            <Script
-                id="google-analytics"
-                dangerouslySetInnerHTML={{
-                    __html: `
+                <Analytics />
+                <Script
+                    async
+                    src="https://www.googletagmanager.com/gtag/js?id=G-0ZFDD1EKVW"
+                />
+                <Script
+                    id="google-analytics"
+                    dangerouslySetInnerHTML={{
+                        __html: `
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
 
               gtag('config', 'G-0ZFDD1EKVW');
           `,
-                }}
-            />
+                    }}
+                />
+            </ToastProvider>
         </AuthProvider>
     );
 }

src/pages/register.tsx

@@ -5,12 +5,15 @@ import { PencilSquareIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useToast } from '@/components/Toast';
 
 const profilePicPlaceholderURL = '/images/pfp-placeholder.svg';
 
 const Register = () => {
+    const toast = useToast();
+
     const { user, refreshContext } = useAuth();
     const router = useRouter();
     const [bottleModal, setBottleModal] = useState(false);
@@ -21,7 +24,10 @@ const Register = () => {
 
     async function handleImageUpload(file: File) {
         const formData = new FormData();
-        formData.append('file', file);
+        const filename = `${Date.now()}.${file.name.split('.').pop()}${
+            user?.studentID
+        }`;
+        formData.append('file', file, filename);
         formData.append('tag', '1');
         formData.append('type', '1');
 
@@ -35,7 +41,7 @@ const Register = () => {
 
             setPreviewImage(data.url);
         } catch (error) {
-            // todo handle error
+            toast?.setToast('error', 'เกิดข้อผิดพลาดในการอัปโหลดรูปภาพ');
         }
     }
 
@@ -300,7 +306,7 @@ const Register = () => {
                         <select
                             name="nametitle"
                             id="nametitle"
-                            className="mb-4 w-28 rounded-full border-r-8 border-transparent bg-gray-100 py-2 pl-3 pr-8 outline-4 outline-gray-100"
+                            className="mb-4 w-36 rounded-full border-r-8 border-transparent bg-gray-100 py-2 pl-3 pr-8 outline-4 outline-gray-100"
                             required
                         >
                             <option value="">เลือกคำนำหน้าชื่อ</option>