konnosDashboard
Entities.tsx64 lines · main
1import { useParams } from 'common'
2import { Download } from 'lucide-react'
3import { useState } from 'react'
4import { toast } from 'sonner'
5import { Button } from 'ui'
6
7import ContentSnippet from '../ContentSnippet'
8import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
9import type { ContentProps } from './Content.types'
10import { DocsButton } from '@/components/ui/DocsButton'
11import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
12import { generateTypes } from '@/data/projects/project-type-generation-query'
13import { DOCS_URL } from '@/lib/constants'
14
15export const Entities = ({ language }: ContentProps) => {
16 const { ref } = useParams()
17 const [isGeneratingTypes, setIsGeneratingTypes] = useState(false)
18
19 const { data: config } = useProjectPostgrestConfigQuery({ projectRef: ref })
20
21 const onClickGenerateTypes = async () => {
22 try {
23 setIsGeneratingTypes(true)
24 const res = await generateTypes({ ref, included_schemas: config?.db_schema })
25 let element = document.createElement('a')
26 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.types))
27 element.setAttribute('download', 'briven.ts')
28 element.style.display = 'none'
29 document.body.appendChild(element)
30 element.click()
31 document.body.removeChild(element)
32 toast.success(`Successfully generated types! File is being downloaded`)
33 } catch (error: any) {
34 toast.error(`Failed to generate types: ${error.message}`)
35 } finally {
36 setIsGeneratingTypes(false)
37 }
38 }
39
40 return (
41 <>
42 <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.entitiesIntroduction} />
43 <div>
44 <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.generatingTypes} />
45 <div className="flex items-center gap-x-2 px-4 mt-3">
46 <DocsButton href={`${DOCS_URL}/guides/database/api/generating-types`} />
47 <Button
48 type="default"
49 disabled={isGeneratingTypes}
50 loading={isGeneratingTypes}
51 icon={<Download strokeWidth={1.5} />}
52 onClick={onClickGenerateTypes}
53 >
54 Generate and download types
55 </Button>
56 </div>
57 <p className="text-xs text-foreground-light px-4 mt-2">
58 Remember to re-generate and download this file as you make changes to your tables.
59 </p>
60 </div>
61 <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.graphql} />
62 </>
63 )
64}