index.tsx81 lines · main

1	import { useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useEffect } from 'react'
4
5	import { buildTableEditorUrl } from '@/components/grid/BrivenGrid.utils'
6	import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
7	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
8	import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
9	import { TableEditorLayout } from '@/components/layouts/TableEditorLayout/TableEditorLayout'
10	import { TableEditorMenu } from '@/components/layouts/TableEditorLayout/TableEditorMenu'
11	import { NewTab } from '@/components/layouts/Tabs/NewTab'
12	import { useDashboardHistory } from '@/hooks/misc/useDashboardHistory'
13	import { useQuerySchemaState } from '@/hooks/misc/useSchemaQueryState'
14	import { editorEntityTypes, useTabsStateSnapshot } from '@/state/tabs'
15	import type { NextPageWithLayout } from '@/types'
16
17	const TableEditorPage: NextPageWithLayout = () => {
18	const router = useRouter()
19	const { ref: projectRef } = useParams()
20	const tabStore = useTabsStateSnapshot()
21	const { selectedSchema } = useQuerySchemaState()
22	const { history, isHistoryLoaded } = useDashboardHistory()
23
24	const onTableCreated = (table: { id: number }) => {
25	router.push(
26	`/project/${projectRef}/editor/${table.id}${!!selectedSchema ? `?schema=${selectedSchema}` : ''}`
27	)
28	}
29
30	useEffect(() => {
31	if (isHistoryLoaded && projectRef && router) {
32	const lastOpenedTableId = Number(history.editor)
33	const lastTabId = Number(
34	tabStore.openTabs.find((id) => editorEntityTypes.table.includes(tabStore.tabsMap[id]?.type))
35	)
36
37	// Handle redirect to last opened table tab, or last table tab
38	if (Number.isInteger(lastOpenedTableId)) {
39	const lastOpenedTableData = tabStore.tabsMap[lastOpenedTableId]
40	router.push(
41	buildTableEditorUrl({
42	projectRef,
43	tableId: lastOpenedTableId,
44	schema: lastOpenedTableData?.metadata?.schema,
45	})
46	)
47	} else if (Number.isInteger(lastTabId)) {
48	const lastOpenedTableData = tabStore.tabsMap[lastTabId]
49	router.push(
50	buildTableEditorUrl({
51	projectRef,
52	tableId: lastTabId,
53	schema: lastOpenedTableData?.metadata?.schema,
54	})
55	)
56	}
57	}
58	// eslint-disable-next-line react-hooks/exhaustive-deps
59	}, [isHistoryLoaded, projectRef, router])
60
61	return (
62	<>
63	<NewTab />
64	<SidePanelEditor onTableCreated={onTableCreated} />
65	</>
66	)
67	}
68
69	TableEditorPage.getLayout = (page) => (
70	<DefaultLayout>
71	<EditorBaseLayout
72	productMenu={<TableEditorMenu />}
73	product="Table Editor"
74	productMenuClassName="overflow-y-hidden"
75	>
76	<TableEditorLayout>{page}</TableEditorLayout>
77	</EditorBaseLayout>
78	</DefaultLayout>
79	)
80
81	export default TableEditorPage