From b56494b6e3efbdbf2a7b2ce276b2f64ea6c2bbc0 Mon Sep 17 00:00:00 2001
From: shishirbychapur <shishirbychapur@gmail.com>
Date: Wed, 13 Nov 2024 00:56:32 +0800
Subject: [PATCH] fix: resolve bug in landing page

---
 frontend/components/customs/custom-loader.tsx | 35 +------------------
 frontend/components/dashboard/new-session.tsx |  7 +---
 .../components/dashboard/recent-sessions.tsx  |  7 +---
 .../components/dashboard/resume-session.tsx   |  8 +----
 frontend/pages/index.tsx                      | 24 +++++++------
 5 files changed, 18 insertions(+), 63 deletions(-)

diff --git a/frontend/components/customs/custom-loader.tsx b/frontend/components/customs/custom-loader.tsx
index e67f5c3c1a..934de5e19a 100644
--- a/frontend/components/customs/custom-loader.tsx
+++ b/frontend/components/customs/custom-loader.tsx
@@ -17,31 +17,6 @@ function LargeTextSkeleton() {
     return <Skeleton className="inline-block align-baseline h-40 w-full" />
 }
 
-const NewSessionSkeleton = () => {
-    return (
-        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
-            <div>
-                <Skeleton className="w-1/3 h-10 mb-4" />
-                <LargeTextSkeleton />
-                <LargeTextSkeleton />
-            </div>
-            <LongTextSkeleton />
-        </div>
-    )
-}
-
-const RecentSessionSkeleton = () => {
-    return (
-        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
-            <div>
-                <Skeleton className="w-1/3 h-10 mb-4" />
-                <Skeleton className="inline-block align-baseline h-80 w-full" />
-            </div>
-            <LongTextSkeleton />
-        </div>
-    )
-}
-
 function LongTextSkeleton() {
     return <Skeleton className="inline-block align-baseline h-6 w-full" />
 }
@@ -58,12 +33,4 @@ function DataSkeleton() {
     )
 }
 
-export {
-    TableSkeleton,
-    DataSkeleton,
-    TextSkeleton,
-    LargeTextSkeleton,
-    LongTextSkeleton,
-    NewSessionSkeleton,
-    RecentSessionSkeleton,
-}
+export { TableSkeleton, DataSkeleton, TextSkeleton, LargeTextSkeleton, LongTextSkeleton }
diff --git a/frontend/components/dashboard/new-session.tsx b/frontend/components/dashboard/new-session.tsx
index 6198ed5c92..c998735027 100644
--- a/frontend/components/dashboard/new-session.tsx
+++ b/frontend/components/dashboard/new-session.tsx
@@ -14,9 +14,8 @@ import { addUserToMatchmaking } from '../../services/matching-service-api'
 import CustomModal from '../customs/custom-modal'
 import Loading from '../customs/loading'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { LargeTextSkeleton, NewSessionSkeleton } from '../customs/custom-loader'
 
-export const NewSession = ({ isLoading }: { isLoading: boolean }) => {
+export const NewSession = () => {
     const router = useRouter()
     const socketRef = useRef<WebSocket | undefined>(undefined)
 
@@ -167,10 +166,6 @@ export const NewSession = ({ isLoading }: { isLoading: boolean }) => {
         }))
     }
 
-    if (isLoading) {
-        return <NewSessionSkeleton />
-    }
-
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/recent-sessions.tsx b/frontend/components/dashboard/recent-sessions.tsx
index 1158a70345..8e09f1c0af 100644
--- a/frontend/components/dashboard/recent-sessions.tsx
+++ b/frontend/components/dashboard/recent-sessions.tsx
@@ -7,7 +7,6 @@ import { MoveRight } from 'lucide-react'
 import { IPartialSessions } from '@/types'
 import CustomLabel from '../ui/label'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { RecentSessionSkeleton } from '../customs/custom-loader'
 
 const cols: { key: keyof IPartialSessions; label: string }[] = [
     {
@@ -24,11 +23,7 @@ const cols: { key: keyof IPartialSessions; label: string }[] = [
     },
 ]
 
-export const RecentSessions = ({ data, isLoading }: { data: IPartialSessions[]; isLoading: boolean }) => {
-    if (isLoading) {
-        return <RecentSessionSkeleton />
-    }
-
+export const RecentSessions = ({ data }: { data: IPartialSessions[] }) => {
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/resume-session.tsx b/frontend/components/dashboard/resume-session.tsx
index 0c3f953a1c..4f6ec06293 100644
--- a/frontend/components/dashboard/resume-session.tsx
+++ b/frontend/components/dashboard/resume-session.tsx
@@ -3,15 +3,13 @@ import { Button } from '../ui/button'
 import { IMatch } from '@repo/user-types'
 import { convertSortedComplexityToComplexity } from '@repo/question-types'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { LargeTextSkeleton } from '../customs/custom-loader'
 
 interface IResumeSessionProps {
     match: IMatch
     isOngoing: () => Promise<boolean>
-    isLoading: boolean
 }
 
-export default function ResumeSession({ match, isOngoing, isLoading }: IResumeSessionProps) {
+export default function ResumeSession({ match, isOngoing }: IResumeSessionProps) {
     const router = useRouter()
 
     const { category, complexity } = match
@@ -24,10 +22,6 @@ export default function ResumeSession({ match, isOngoing, isLoading }: IResumeSe
         } catch (error) {}
     }
 
-    if (isLoading) {
-        return <LargeTextSkeleton />
-    }
-
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div className="space-y-6">
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 60200925d7..82e82f48b0 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import ConfirmDialog, { ConfirmDialogProps } from '@/components/customs/confirm-dialog'
+import Loading from '@/components/customs/loading'
 import { NewSession } from '@/components/dashboard/new-session'
 import { ProgressCard } from '@/components/dashboard/progress-card'
 import { RecentSessions } from '@/components/dashboard/recent-sessions'
@@ -37,7 +38,7 @@ export default function Home() {
         },
     ]
 
-    const { session } = useProtectedRoute()
+    const { session, loading } = useProtectedRoute()
     const [ongoingMatchData, setOngoingMatchData] = useState<IMatch | null>()
     const [dialog, setDialog] = useState<ConfirmDialogProps>({
         dialogData: {
@@ -54,8 +55,6 @@ export default function Home() {
         showCancelButton: false,
     })
     const [recentSessions, setRecentSessions] = useState<IPartialSessions[]>([])
-    const [loadingNewSession, setLoadingNewSession] = useState(true)
-    const [loadingRecentSessions, setLoadingRecentSessions] = useState(true)
 
     const checkOngoingSession = async () => {
         if (!session?.user?.id) return
@@ -103,12 +102,17 @@ export default function Home() {
     }
 
     useEffect(() => {
-        setLoadingNewSession(true)
-        setLoadingRecentSessions(true)
-        checkOngoingSession().then(() => setLoadingNewSession(false))
-        getRecentSessions().then(() => setLoadingRecentSessions(false))
+        checkOngoingSession()
+        getRecentSessions()
     }, [])
 
+    if (loading)
+        return (
+            <div className="flex flex-col h-screen w-screen items-center justify-center">
+                <Loading />
+            </div>
+        )
+
     return (
         <div className="my-4">
             <h2 className="text-xl font-bold my-6">Welcome Back, {session?.user.username}</h2>
@@ -126,11 +130,11 @@ export default function Home() {
             </div>
             <div className="flex flex-row justify-between my-4">
                 {ongoingMatchData ? (
-                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} isLoading={loadingNewSession} />
+                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} />
                 ) : (
-                    <NewSession isLoading={loadingNewSession} />
+                    <NewSession />
                 )}
-                <RecentSessions data={recentSessions} isLoading={loadingRecentSessions} />
+                <RecentSessions data={recentSessions} />
             </div>
             <ConfirmDialog {...dialog} />
         </div>