konnosDashboard
RPC.tsx103 lines · main
1import { useParams } from 'common'
2import { useEffect } from 'react'
3import { Badge } from 'ui'
4
5import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
6import ResourceContent from '../ResourceContent'
7import type { ContentProps } from './Content.types'
8import Table from '@/components/to-be-cleaned/Table'
9import { useProjectJsonSchemaQuery } from '@/data/docs/project-json-schema-query'
10import { useOpenAPISpecQuery } from '@/data/open-api/api-spec-query'
11import { useAppStateSnapshot } from '@/state/app-state'
12
13export const RPC = ({ language }: ContentProps) => {
14 const { ref } = useParams()
15 const snap = useAppStateSnapshot()
16
17 const { data: jsonSchema, refetch: refetchJsonSchema } = useProjectJsonSchemaQuery({
18 projectRef: ref,
19 })
20 const { data, refetch: refetchOpenAPISpec } = useOpenAPISpecQuery({ projectRef: ref })
21 const functions = data?.functions ?? []
22
23 const rpcName = snap.activeDocsSection[1]
24 const rpc = functions.find((fn) => fn.name === rpcName)
25
26 const {
27 post: { parameters: postParameters },
28 } = rpc ?? {}
29 const rpcJsonSchema = jsonSchema?.paths[rpc?.path]
30 const summary = rpcJsonSchema?.post?.summary
31
32 const rpcParamsObject =
33 postParameters &&
34 postParameters[0] &&
35 postParameters[0].schema &&
36 postParameters[0].schema.properties
37 ? postParameters[0].schema.properties
38 : {}
39 const parameters: { name: string; format: string; type: string; required: boolean }[] =
40 Object.entries(rpcParamsObject)
41 .map(([k, v]: any) => ({
42 name: k,
43 ...v,
44 required: postParameters[0].schema.required.includes(k),
45 }))
46 .filter((x) => !!x.name)
47
48 useEffect(() => {
49 if (rpcName !== undefined) {
50 refetchJsonSchema()
51 refetchOpenAPISpec()
52 }
53 }, [rpcName])
54
55 if (rpc === undefined) return null
56
57 return (
58 <div className="divide-y">
59 <div className="space-y-1 px-4 py-4">
60 <h2>{rpc.name}</h2>
61 <p className="text-sm text-foreground-light">{summary ?? 'No description available'}</p>
62 </div>
63 <div className="space-y-2 px-4 py-4">
64 <p className="text-sm text-foreground-light">Function arguments</p>
65 <Table
66 head={[
67 <Table.th key="name">Name</Table.th>,
68 <Table.th key="format">Format</Table.th>,
69 <Table.th key="type">Type</Table.th>,
70 <Table.th key="required"></Table.th>,
71 ]}
72 body={parameters.map((parameter) => (
73 <Table.tr key={parameter.name}>
74 <Table.td title={parameter.name}>
75 <p className="font-mono text-xs text-foreground truncate">{parameter.name}</p>
76 </Table.td>
77 <Table.td title={parameter.format}>{parameter.format}</Table.td>
78 <Table.td title={parameter.type}>{parameter.type}</Table.td>
79 <Table.td>
80 {parameter.required ? (
81 <Badge variant="warning">Required</Badge>
82 ) : (
83 <Badge variant="default">Optional</Badge>
84 )}
85 </Table.td>
86 </Table.tr>
87 ))}
88 />
89 </div>
90 <ResourceContent
91 selectedLanguage={language}
92 snippet={DOCS_RESOURCE_CONTENT.rpcSingle}
93 codeSnippets={DOCS_RESOURCE_CONTENT.rpcSingle.code({
94 rpcName,
95 rpcParams: parameters,
96 endpoint: 'endpoint',
97 apiKey: 'apiKey',
98 showBearer: true,
99 })}
100 />
101 </div>
102 )
103}