fix: resolve bug in landing page

CS3219-AY2425S1 · Nov 12, 2024 · b56494b · b56494b
1 parent 29a720b
commit b56494b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>