usage.tsx42 lines · main

1	import { useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useEffect } from 'react'
4
5	import DefaultLayout from '@/components/layouts/DefaultLayout'
6	import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
7	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
8	import type { NextPageWithLayout } from '@/types'
9
10	const ProjectBillingUsage: NextPageWithLayout = () => {
11	// This component is only used for redirects, as nextjs cant redirect based on hash
12	const router = useRouter()
13	const { ref } = useParams()
14	const { data: organization } = useSelectedOrganizationQuery()
15
16	const hash = router.asPath.split('#')[1]
17	const route = router.route
18
19	useEffect(() => {
20	if (!organization) return
21
22	let redirectUrl
23
24	if (['cpu', 'ram', 'disk_io'].includes(hash)) {
25	redirectUrl = `/project/${ref}/settings/infrastructure#${hash}`
26	} else {
27	redirectUrl = `/org/${organization.slug}/usage?projectRef=${ref}`
28	}
29
30	router.push(redirectUrl)
31	}, [hash, route, organization, ref, router])
32
33	return null
34	}
35
36	ProjectBillingUsage.getLayout = (page) => (
37	<DefaultLayout>
38	<SettingsLayout title="usage">{page}</SettingsLayout>
39	</DefaultLayout>
40	)
41
42	export default ProjectBillingUsage