[bucketId].tsx62 lines · main

1	import { useParams } from 'common'
2	import { AnalyticsBucket as AnalyticsBucketIcon } from 'icons'
3	import { useRouter } from 'next/router'
4	import { useEffect } from 'react'
5	import { toast } from 'sonner'
6
7	import { AnalyticBucketDetails } from '@/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails'
8	import { useSelectedAnalyticsBucket } from '@/components/interfaces/Storage/AnalyticsBuckets/useSelectedAnalyticsBucket'
9	import { BUCKET_TYPES } from '@/components/interfaces/Storage/Storage.constants'
10	import DefaultLayout from '@/components/layouts/DefaultLayout'
11	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
12	import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
13	import { DocsButton } from '@/components/ui/DocsButton'
14	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
15	import type { NextPageWithLayout } from '@/types'
16
17	const AnalyticsBucketPage: NextPageWithLayout = () => {
18	const config = BUCKET_TYPES.analytics
19	const router = useRouter()
20	const { ref, bucketId } = useParams()
21	const { data: project } = useSelectedProjectQuery()
22	const { data: bucket, isSuccess } = useSelectedAnalyticsBucket()
23
24	useEffect(() => {
25	if (isSuccess && !bucket) {
26	toast.info(`Bucket "${bucketId}" does not exist in your project`)
27	router.push(`/project/${ref}/storage/analytics`)
28	}
29	// eslint-disable-next-line react-hooks/exhaustive-deps
30	}, [isSuccess])
31
32	return (
33	<PageLayout
34	title={bucketId}
35	icon={
36	<div className="shrink-0 w-10 h-10 relative bg-surface-100 border rounded-md flex items-center justify-center">
37	<AnalyticsBucketIcon size={20} className="text-foreground-light" />
38	</div>
39	}
40	breadcrumbs={[
41	{
42	label: 'Analytics',
43	href: `/project/${project?.ref}/storage/analytics`,
44	},
45	{
46	label: 'Buckets',
47	},
48	]}
49	secondaryActions={config?.docsUrl ? [<DocsButton key="docs" href={config.docsUrl} />] : []}
50	>
51	<AnalyticBucketDetails />
52	</PageLayout>
53	)
54	}
55
56	AnalyticsBucketPage.getLayout = (page) => (
57	<DefaultLayout>
58	<StorageLayout title="Buckets">{page}</StorageLayout>
59	</DefaultLayout>
60	)
61
62	export default AnalyticsBucketPage