dashboard.tsx54 lines · main

1	import { useFlag } from 'common'
2	import { useRouter } from 'next/router'
3	import { useEffect } from 'react'
4	import { PageContainer } from 'ui-patterns/PageContainer'
5	import {
6	PageHeader,
7	PageHeaderDescription,
8	PageHeaderMeta,
9	PageHeaderSummary,
10	PageHeaderTitle,
11	} from 'ui-patterns/PageHeader'
12
13	import { DashboardPreferences } from '@/components/interfaces/Settings/General/DashboardPreferences'
14	import DefaultLayout from '@/components/layouts/DefaultLayout'
15	import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
16	import { IS_PLATFORM } from '@/lib/constants'
17	import type { NextPageWithLayout } from '@/types'
18
19	const Preferences: NextPageWithLayout = () => {
20	const router = useRouter()
21	// [Joshen] Using this flag to determine whether to show query preferences or not
22	const showQueryPreferences = useFlag('dashboardPreferences')
23
24	useEffect(() => {
25	if (!IS_PLATFORM) {
26	router.replace('/account/me#dashboard')
27	}
28	}, [router])
29
30	if (!IS_PLATFORM) return null
31
32	return (
33	<>
34	<PageHeader size="small">
35	<PageHeaderMeta>
36	<PageHeaderSummary>
37	<PageHeaderTitle>Dashboard</PageHeaderTitle>
38	<PageHeaderDescription>
39	Configure dashboard query preferences for this project.
40	</PageHeaderDescription>
41	</PageHeaderSummary>
42	</PageHeaderMeta>
43	</PageHeader>
44	<PageContainer size="small">{showQueryPreferences && <DashboardPreferences />}</PageContainer>
45	</>
46	)
47	}
48
49	Preferences.getLayout = (page) => (
50	<DefaultLayout>
51	<SettingsLayout title="general">{page}</SettingsLayout>
52	</DefaultLayout>
53	)
54	export default Preferences