[id].tsx77 lines · main

1	import { useParams } from 'common'
2	import { PageContainer } from 'ui-patterns/PageContainer'
3	import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
4	import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
5
6	import { ColumnList } from '@/components/interfaces/Database/Tables/ColumnList'
7	import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
8	import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
9	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
10	import DefaultLayout from '@/components/layouts/DefaultLayout'
11	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
12	import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
13	import { isTableLike } from '@/data/table-editor/table-editor-types'
14	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
15	import { useTableEditorStateSnapshot } from '@/state/table-editor'
16	import { TableEditorTableStateContextProvider } from '@/state/table-editor-table'
17	import type { NextPageWithLayout } from '@/types'
18
19	const DatabaseTables: NextPageWithLayout = () => {
20	const snap = useTableEditorStateSnapshot()
21
22	const { id: _id, ref } = useParams()
23	const id = _id ? Number(_id) : undefined
24
25	const { data: project } = useSelectedProjectQuery()
26	const { data: selectedTable, isPending: isLoading } = useTableEditorQuery({
27	projectRef: project?.ref,
28	connectionString: project?.connectionString,
29	id,
30	})
31
32	return (
33	<>
34	<PageLayout
35	title={isLoading ? <ShimmeringLoader className="w-40" /> : (selectedTable?.name ?? '')}
36	breadcrumbs={[
37	{
38	label: 'Tables',
39	href: `/project/${ref}/database/tables`,
40	},
41	]}
42	size="large"
43	>
44	<PageContainer size="large">
45	<PageSection>
46	<PageSectionContent>
47	<ColumnList
48	onAddColumn={snap.onAddColumn}
49	onEditColumn={snap.onEditColumn}
50	onDeleteColumn={snap.onDeleteColumn}
51	/>
52	</PageSectionContent>
53	</PageSection>
54	</PageContainer>
55	</PageLayout>
56
57	{project?.ref !== undefined && selectedTable !== undefined && isTableLike(selectedTable) && (
58	<TableEditorTableStateContextProvider
59	key={`table-editor-table-${selectedTable.id}`}
60	projectRef={project?.ref}
61	table={selectedTable}
62	>
63	<DeleteConfirmationDialogs selectedTable={selectedTable} />
64	<SidePanelEditor includeColumns selectedTable={selectedTable} />
65	</TableEditorTableStateContextProvider>
66	)}
67	</>
68	)
69	}
70
71	DatabaseTables.getLayout = (page) => (
72	<DefaultLayout>
73	<DatabaseLayout title="Tables">{page}</DatabaseLayout>
74	</DefaultLayout>
75	)
76
77	export default DatabaseTables