35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useEffect } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useNavigate } from '@tanstack/react-router'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { useAuth } from '../../context/AuthProvider'
|
|
import { getOnboardingStatus } from '../../lib/api'
|
|
import { RootLayout } from './RootLayout'
|
|
|
|
export function AppLayoutGuard({ children }: { children: ReactNode }) {
|
|
const { user, isPending } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
const statusQuery = useQuery({
|
|
queryKey: ['onboarding', 'status'],
|
|
queryFn: getOnboardingStatus,
|
|
enabled: !!user,
|
|
staleTime: 5 * 60 * 1000,
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!user || !statusQuery.data || statusQuery.data.completed) return
|
|
void navigate({ to: '/onboarding', replace: true })
|
|
}, [user, statusQuery.data, navigate])
|
|
|
|
if (isPending || (user && statusQuery.isPending)) {
|
|
return (
|
|
<div className="flex min-h-dvh items-center justify-center">
|
|
<Loader2 className="size-6 animate-spin text-foreground/40" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <RootLayout>{children}</RootLayout>
|
|
} |