konnosDashboard
Entity.tsx146 lines · main
1import { useParams } from 'common'
2import { useEffect } from 'react'
3
4import LanguageSelector from '../LanguageSelector'
5import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
6import ResourceContent from '../ResourceContent'
7import type { ContentProps } from './Content.types'
8import { tempRemovePostgrestText } from './Content.utils'
9import Table from '@/components/to-be-cleaned/Table'
10import { useProjectJsonSchemaQuery } from '@/data/docs/project-json-schema-query'
11import { useAppStateSnapshot } from '@/state/app-state'
12
13function getColumnType(type: string, format: string) {
14 // json and jsonb both have type=undefined, so check format instead
15 if (type === undefined && (format === 'jsonb' || format === 'json')) return 'json'
16
17 switch (type) {
18 case 'string':
19 return 'string'
20 case 'integer':
21 return 'number'
22 case 'json':
23 return 'json'
24 case 'number':
25 return 'number'
26 case 'boolean':
27 return 'boolean'
28 default:
29 return type
30 }
31}
32
33export const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
34 const { ref } = useParams()
35 const snap = useAppStateSnapshot()
36 const resource = snap.activeDocsSection[1]
37
38 const { data: jsonSchema, refetch } = useProjectJsonSchemaQuery({ projectRef: ref })
39
40 const definition = jsonSchema?.definitions?.[resource]
41 const columns =
42 definition?.properties !== undefined
43 ? Object.entries(definition.properties).map(([id, val]: any) => ({
44 ...val,
45 id,
46 required: (definition?.required ?? []).includes(id),
47 }))
48 : []
49
50 useEffect(() => {
51 if (resource !== undefined) refetch()
52 }, [resource])
53
54 if (resource === undefined) return null
55
56 return (
57 <div className="divide-y relative">
58 <div className="flex items-center justify-between px-4 py-4 sticky top-0 bg-surface-100 z-10 border-b shadow-md">
59 <div className="flex flex-col gap-y-1">
60 <h2>{resource}</h2>
61 <p className="text-sm text-foreground-light">
62 {definition?.description ?? 'No description available'}
63 </p>
64 </div>
65 <LanguageSelector />
66 </div>
67 <div className="space-y-2 px-4 py-4 border-t-0!">
68 <p className="text-sm text-foreground-light">Columns</p>
69 <Table
70 head={[
71 <Table.th key="name">Name</Table.th>,
72 <Table.th key="format">Format</Table.th>,
73 <Table.th key="type">Type</Table.th>,
74 <Table.th key="description">Description</Table.th>,
75 ]}
76 body={columns.map((column) => {
77 const formattedColumnType = getColumnType(column.type, column.format)
78 return (
79 <Table.tr key={column.id}>
80 <Table.td title={column.id}>{column.id}</Table.td>
81 <Table.td title={column.format}>
82 <p className="truncate">{column.format}</p>
83 </Table.td>
84 <Table.td title={formattedColumnType}>{formattedColumnType}</Table.td>
85 <Table.td title={column.description}>
86 {tempRemovePostgrestText(column.description ?? '').trim()}
87 </Table.td>
88 </Table.tr>
89 )
90 })}
91 />
92 </div>
93
94 <ResourceContent
95 selectedLanguage={language}
96 snippet={DOCS_RESOURCE_CONTENT.readRows}
97 codeSnippets={DOCS_RESOURCE_CONTENT.readRows.code({
98 resourceId: resource,
99 endpoint,
100 apikey,
101 })}
102 />
103 <ResourceContent
104 selectedLanguage={language}
105 snippet={DOCS_RESOURCE_CONTENT.filtering}
106 codeSnippets={DOCS_RESOURCE_CONTENT.filtering.code({
107 resourceId: resource,
108 endpoint,
109 apikey,
110 })}
111 />
112 <ResourceContent
113 selectedLanguage={language}
114 snippet={DOCS_RESOURCE_CONTENT.insertRows}
115 codeSnippets={DOCS_RESOURCE_CONTENT.insertRows.code({
116 resourceId: resource,
117 endpoint,
118 apikey,
119 })}
120 />
121 <ResourceContent
122 selectedLanguage={language}
123 snippet={DOCS_RESOURCE_CONTENT.updateRows}
124 codeSnippets={DOCS_RESOURCE_CONTENT.updateRows.code({
125 resourceId: resource,
126 endpoint,
127 apikey,
128 })}
129 />
130 <ResourceContent
131 selectedLanguage={language}
132 snippet={DOCS_RESOURCE_CONTENT.deleteRows}
133 codeSnippets={DOCS_RESOURCE_CONTENT.deleteRows.code({
134 resourceId: resource,
135 endpoint,
136 apikey,
137 })}
138 />
139 <ResourceContent
140 selectedLanguage={language}
141 snippet={DOCS_RESOURCE_CONTENT.subscribeChanges}
142 codeSnippets={DOCS_RESOURCE_CONTENT.subscribeChanges.code({ resourceId: resource })}
143 />
144 </div>
145 )
146}