overview.tsx76 lines · main

1	import { FeatureFlagContext, useFlag, useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useContext, useEffect } from 'react'
4	import { PageContainer } from 'ui-patterns/PageContainer'
5	import {
6	PageHeader,
7	PageHeaderAside,
8	PageHeaderMeta,
9	PageHeaderSummary,
10	PageHeaderTitle,
11	} from 'ui-patterns/PageHeader'
12
13	import { OverviewLearnMore } from '@/components/interfaces/Auth/Overview/OverviewLearnMore'
14	import { OverviewMetrics } from '@/components/interfaces/Auth/Overview/OverviewMetrics'
15	import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
16	import DefaultLayout from '@/components/layouts/DefaultLayout'
17	import { DocsButton } from '@/components/ui/DocsButton'
18	import { useAuthOverviewQuery } from '@/data/auth/auth-overview-query'
19	import { DOCS_URL } from '@/lib/constants'
20	import { NextPageWithLayout } from '@/types'
21
22	const AuthOverview: NextPageWithLayout = () => {
23	const router = useRouter()
24	const { ref } = useParams()
25	const { hasLoaded } = useContext(FeatureFlagContext)
26	const authOverviewPageEnabled = useFlag('authOverviewPage')
27
28	const {
29	data: metrics,
30	isPending: isLoading,
31	error,
32	} = useAuthOverviewQuery({ projectRef: ref }, { enabled: !!ref })
33
34	useEffect(() => {
35	if (hasLoaded && !authOverviewPageEnabled) {
36	router.replace(`/project/${ref}/auth/users`)
37	}
38	// eslint-disable-next-line react-hooks/exhaustive-deps
39	}, [authOverviewPageEnabled, router, ref])
40
41	if (!authOverviewPageEnabled) {
42	return null
43	}
44
45	return (
46	<>
47	<PageHeader size="large">
48	<PageHeaderMeta>
49	<PageHeaderSummary>
50	<PageHeaderTitle>Overview</PageHeaderTitle>
51	</PageHeaderSummary>
52	<PageHeaderAside>
53	<div className="flex items-center gap-2">
54	<span className="text-sm text-foreground-light">
55	<span className="text-foreground">Last 24 hours</span>
56	</span>
57	<DocsButton href={`${DOCS_URL}/guides/auth`} />
58	</div>
59	</PageHeaderAside>
60	</PageHeaderMeta>
61	</PageHeader>
62	<PageContainer size="large">
63	<OverviewMetrics metrics={metrics} isLoading={isLoading} error={error} />
64	<OverviewLearnMore />
65	</PageContainer>
66	</>
67	)
68	}
69
70	AuthOverview.getLayout = (page) => (
71	<DefaultLayout>
72	<AuthLayout title="Overview">{page}</AuthLayout>
73	</DefaultLayout>
74	)
75
76	export default AuthOverview