[id].tsx69 lines · main

1	import { useParams } from 'common'
2	import { useEffect } from 'react'
3
4	import { TableGridEditor } from '@/components/interfaces/TableGridEditor/TableGridEditor'
5	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
6	import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
7	import { TableEditorLayout } from '@/components/layouts/TableEditorLayout/TableEditorLayout'
8	import { TableEditorMenu } from '@/components/layouts/TableEditorLayout/TableEditorMenu'
9	import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
10	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
11	import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
12	import type { NextPageWithLayout } from '@/types'
13
14	const TableEditorPage: NextPageWithLayout = () => {
15	const { id: _id, ref: projectRef } = useParams()
16	const id = _id ? Number(_id) : undefined
17	const store = useTabsStateSnapshot()
18
19	const { data: project } = useSelectedProjectQuery()
20	const { data: selectedTable, isPending: isLoading } = useTableEditorQuery({
21	projectRef: project?.ref,
22	connectionString: project?.connectionString,
23	id,
24	})
25
26	/**
27	* Effect: Creates or updates tab when table is loaded
28	* Runs when:
29	* - selectedTable changes (when a new table is loaded)
30	* - id changes (when URL parameter changes)
31	*/
32
33	useEffect(() => {
34	if (selectedTable && projectRef) {
35	const tabId = createTabId(selectedTable.entity_type, { id: selectedTable.id })
36	if (!store.tabsMap[tabId]) {
37	store.addTab({
38	id: tabId,
39	type: selectedTable.entity_type,
40	label: selectedTable.name,
41	metadata: {
42	schema: selectedTable.schema,
43	name: selectedTable.name,
44	tableId: id,
45	},
46	})
47	} else {
48	// If tab already exists, just make it active
49	store.makeTabActive(tabId)
50	}
51	}
52	}, [selectedTable, id, projectRef])
53
54	return <TableGridEditor isLoadingSelectedTable={isLoading} selectedTable={selectedTable} />
55	}
56
57	TableEditorPage.getLayout = (page) => (
58	<DefaultLayout>
59	<EditorBaseLayout
60	productMenu={<TableEditorMenu />}
61	product="Table Editor"
62	productMenuClassName="overflow-y-hidden"
63	>
64	<TableEditorLayout>{page}</TableEditorLayout>
65	</EditorBaseLayout>
66	</DefaultLayout>
67	)
68
69	export default TableEditorPage