index.tsx50 lines · main

1	import { useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useEffect } from 'react'
4
5	import DefaultLayout from '@/components/layouts/DefaultLayout'
6	import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
7	import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
8	import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
9	import { useDashboardHistory } from '@/hooks/misc/useDashboardHistory'
10	import { useTabsStateSnapshot } from '@/state/tabs'
11	import type { NextPageWithLayout } from '@/types'
12
13	const SQLEditorIndexPage: NextPageWithLayout = () => {
14	const router = useRouter()
15	const { ref: projectRef } = useParams()
16	const store = useTabsStateSnapshot()
17
18	const { history, isHistoryLoaded } = useDashboardHistory()
19
20	useEffect(() => {
21	if (isHistoryLoaded) {
22	// Handle redirect to last opened snippet tab, or last snippet tab
23	const lastOpenedTab = history.sql
24	const lastTabId = store.openTabs.find((id) => store.tabsMap[id]?.type === 'sql')
25	if (lastOpenedTab !== undefined) {
26	router.replace(`/project/${projectRef}/sql/${history.sql}`)
27	} else if (lastTabId) {
28	const lastTab = store.tabsMap[lastTabId]
29	if (lastTab) {
30	router.replace(`/project/${projectRef}/sql/${lastTab.id.replace('sql-', '')}`)
31	}
32	} else {
33	router.replace(`/project/${projectRef}/sql/new`)
34	}
35	}
36	// eslint-disable-next-line react-hooks/exhaustive-deps
37	}, [isHistoryLoaded])
38
39	return null
40	}
41
42	SQLEditorIndexPage.getLayout = (page) => (
43	<DefaultLayout>
44	<EditorBaseLayout productMenu={<SQLEditorMenu />} product="SQL Editor">
45	<SQLEditorLayout>{page}</SQLEditorLayout>
46	</EditorBaseLayout>
47	</DefaultLayout>
48	)
49
50	export default SQLEditorIndexPage