DocView.tsx68 lines · main

1	import { useParams } from 'common'
2
3	import type { ShowApiKey } from '../../Docs/Docs.types'
4	import { GeneralContent } from '@/components/interfaces/Docs/GeneralContent'
5	import { ResourceContent } from '@/components/interfaces/Docs/ResourceContent'
6	import { RpcContent } from '@/components/interfaces/Docs/RpcContent'
7	import { buildEntityMaps } from '@/components/interfaces/Integrations/DataApi/DataApi.utils'
8	import { DocViewError } from '@/components/interfaces/Integrations/DataApi/DocViewError'
9	import { DocViewLoading } from '@/components/interfaces/Integrations/DataApi/DocViewLoading'
10	import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
11	import { useProjectJsonSchemaQuery } from '@/data/docs/project-json-schema-query'
12
13	interface DocViewProps {
14	selectedLang: 'js' | 'bash'
15	selectedApiKey: ShowApiKey
16	}
17
18	export const DocView = ({ selectedLang, selectedApiKey }: DocViewProps) => {
19	const { ref: projectRef, page, resource, rpc } = useParams()
20
21	const { data: settings, error: settingsError } = useProjectSettingsV2Query({ projectRef })
22	const {
23	data: jsonSchema,
24	error: jsonSchemaError,
25	isPending: isLoading,
26	refetch,
27	} = useProjectJsonSchemaQuery({ projectRef })
28
29	const { paths } = jsonSchema || {}
30	const PAGE_KEY = resource || rpc || page || 'index'
31
32	const { resources, rpcs } = buildEntityMaps(paths)
33
34	if (settingsError || jsonSchemaError) {
35	return <DocViewError error={settingsError || jsonSchemaError} />
36	}
37
38	if (isLoading || !settings || !jsonSchema) {
39	return <DocViewLoading />
40	}
41
42	return (
43	<div className="w-full h-full overflow-y-auto flex flex-col" key={PAGE_KEY}>
44	<div className="flex-1 flex flex-col">
45	{resource ? (
46	<ResourceContent
47	selectedLang={selectedLang}
48	resourceId={resource}
49	resources={resources}
50	showApiKey={selectedApiKey.key}
51	refreshDocs={refetch}
52	/>
53	) : rpc ? (
54	<RpcContent
55	selectedLang={selectedLang}
56	rpcId={rpc}
57	paths={paths}
58	rpcs={rpcs}
59	showApiKey={selectedApiKey.key}
60	refreshDocs={refetch}
61	/>
62	) : (
63	<GeneralContent selectedLang={selectedLang} showApiKey={selectedApiKey.key} page={page} />
64	)}
65	</div>
66	</div>
67	)
68	}