fix: reload tables in open tabs on refresh

Author: TeaCoder52

apps/desktop/renderer/src/app/providers/datary-provider.tsx

@@ -8,37 +8,37 @@ interface DataryProviderProps {
 }
 
 export function DataryProvider({ children }: DataryProviderProps) {
-	const [dataryReady, setDataryReady] = useState<boolean | null>(null)
+	const [ready, setReady] = useState<boolean | null>(null)
 
 	useEffect(() => {
 		const checkInterval = setInterval(() => {
-			if ((window as any).datary) {
-				setDataryReady(true)
+			if (window.datary) {
+				setReady(true)
 				clearInterval(checkInterval)
 			}
 		}, 100)
 
 		const timeout = setTimeout(() => {
-			if (!dataryReady) setDataryReady(false)
+			if (!ready) setReady(false)
 		}, 3000)
 
 		return () => {
 			clearInterval(checkInterval)
 			clearTimeout(timeout)
 		}
-	}, [dataryReady])
+	}, [ready])
 
 	const handleReload = () => window.location.reload()
 
-	if (dataryReady === null) {
+	if (ready === null) {
 		return (
 			<div className="bg-background text-foreground flex h-screen w-screen items-center justify-center">
 				<Loader2 className="text-primary h-9 w-9 animate-spin" />
 			</div>
 		)
 	}
 
-	if (!dataryReady) {
+	if (!ready) {
 		return (
 			<div className="bg-background text-foreground flex h-screen w-screen flex-col items-center justify-center gap-4">
 				<h1 className="text-2xl font-bold">Something went wrong</h1>

apps/desktop/renderer/src/app/store/table-data.store.ts

@@ -7,6 +7,7 @@ interface TableDataState {
 	tables: Record<string, TableData>
 	loading: boolean
 	loadTable: (schema: string, table: string) => Promise<void>
+	reset: () => void
 }
 
 export const useTableDataStore = create<TableDataState>((set, get) => ({
@@ -34,5 +35,10 @@ export const useTableDataStore = create<TableDataState>((set, get) => ({
 			},
 			loading: false
 		}))
-	}
+	},
+	reset: () =>
+		set({
+			tables: {},
+			loading: false
+		})
 }))

apps/desktop/renderer/src/app/styles/globals.css

@@ -120,6 +120,7 @@
 }
 
 @layer base {
+
 	html,
 	body {
 		margin: 0;
@@ -158,4 +159,4 @@
 
 *::-webkit-scrollbar-corner {
 	background: var(--color-sidebar);
-}
+}

apps/desktop/renderer/src/modules/explorer/components/ExplorerHeader.tsx

@@ -1,5 +1,6 @@
-import { LogOut, RefreshCw, Settings, Terminal } from 'lucide-react'
+import { LogOut, RefreshCw, Terminal } from 'lucide-react'
 
+import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/ui/button'
 
 interface ExplorerHeaderProps {
@@ -27,9 +28,10 @@ export function ExplorerHeader({
 					size="sm"
 					className="gap-2 bg-transparent"
 					onClick={onRefresh}
+					disabled={isRefreshing}
 				>
-					<RefreshCw className="h-4 w-4" data-animate={isRefreshing ? 'spin' : ''} />
-					Refresh
+					<RefreshCw className={cn('h-4 w-4', isRefreshing && 'animate-spin')} />
+					{isRefreshing ? 'Refreshing' : 'Refresh'}
 				</Button>
 
 				<Button
@@ -42,11 +44,6 @@ export function ExplorerHeader({
 					Query
 				</Button>
 
-				<Button variant="outline" size="icon" className="h-8 w-8 bg-transparent">
-					<Settings className="h-4 w-4" />
-					<span className="sr-only">Settings</span>
-				</Button>
-
 				<Button
 					variant="ghost"
 					size="icon"

apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx

@@ -4,6 +4,7 @@ import type { Tab } from '../../types/explorer.types'
 
 import { TabContent } from './TabContent'
 import { TableTabs } from '@/shared/components/table-tabs'
+import { cn } from '@/shared/lib/utils'
 
 interface Props {
 	tabs: Tab[]
@@ -23,8 +24,11 @@ export function ExplorerTabs({ tabs, activeTab, onSelectTab, onCloseTab }: Props
 				onCloseTab={onCloseTab}
 			>
 				{tabs.map(tab => (
-					<div key={tab.id} className="h-full">
-						{activeTab === tab.id && <TabContent tab={tab} />}
+					<div
+						key={tab.id}
+						className={cn('h-full', activeTab === tab.id ? 'block' : 'hidden')}
+					>
+						<TabContent tab={tab} />
 					</div>
 				))}
 			</TableTabs>

apps/desktop/renderer/src/modules/explorer/hooks/useDatabase.ts

@@ -1,5 +1,6 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
+import { useTableDataStore } from '@/app/store/table-data.store'
 import { useConnectionStore } from '@/entities/connection/model/connection.store'
 
 export function useDatabase() {
@@ -11,30 +12,54 @@ export function useDatabase() {
 	const databases = useConnectionStore(s => s.databases)
 	const setDatabases = useConnectionStore(s => s.setDatabases)
 
-	useEffect(() => {
-		if (!connection) return
+	const resetTables = useTableDataStore(s => s.reset)
+
+	const connect = useCallback(
+		async (dbName?: string) => {
+			if (!connection) return
 
-		const init = async () => {
 			await window.datary.db.connect({
 				...connection,
-				database: connection.database || 'postgres'
+				database: dbName ?? connection.database ?? 'postgres'
 			})
+
 			const dbs = await window.datary.db.loadDatabases()
 
 			setDatabases(dbs.map(d => d.name))
-			setSelectedDatabase(connection.database || dbs[0].name)
-		}
+			setSelectedDatabase(dbName ?? connection.database ?? dbs[0]?.name)
+		},
+		[connection]
+	)
 
-		init()
+	useEffect(() => {
+		if (!connection) return
+		connect()
 	}, [connection])
 
 	const selectDatabase = async (dbName: string) => {
+		resetTables()
+
+		await connect(dbName)
+	}
+
+	const refresh = async () => {
 		if (!connection) return
 
-		await window.datary.db.connect({ ...connection, database: dbName })
+		resetTables()
 
-		setSelectedDatabase(dbName)
+		await window.datary.db.connect({
+			...connection,
+			database: selectedDatabase
+		})
+
+		const dbs = await window.datary.db.loadDatabases()
+		setDatabases(dbs.map(d => d.name))
 	}
 
-	return { selectedDatabase, databases, selectDatabase }
+	return {
+		selectedDatabase,
+		databases,
+		selectDatabase,
+		refresh
+	}
 }

apps/desktop/renderer/src/modules/explorer/hooks/useExplorer.ts

@@ -7,7 +7,7 @@ export function useExplorer() {
 	const sidebar = useExplorerSidebar()
 	const tabs = useExplorerTabs()
 	const database = useDatabase()
-	const actions = useExplorerActions(tabs)
+	const actions = useExplorerActions(tabs, database)
 
 	return {
 		sidebar,

apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts

@@ -1,15 +1,34 @@
 import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { useNavigate } from 'react-router-dom'
 
 import { useTableDataStore } from '@/app/store/table-data.store'
 
-export function useExplorerActions(tabs: any) {
+export function useExplorerActions(tabs: any, database: any) {
 	const loadTable = useTableDataStore(s => s.loadTable)
+
 	const [isRefreshing, setIsRefreshing] = useState(false)
+	const navigate = useNavigate()
 
 	const handleRefresh = async () => {
+		if (isRefreshing) return
+
 		setIsRefreshing(true)
-		await new Promise(r => setTimeout(r, 800))
-		setIsRefreshing(false)
+
+		try {
+			await database.refresh()
+
+			for (const tab of tabs.tabs) {
+				if (tab.type === 'table') {
+					await loadTable('public', tab.name)
+				}
+			}
+		} catch (e: any) {
+			toast.error(`Refresh error: ${e.message}`)
+			console.error(e)
+		} finally {
+			setIsRefreshing(false)
+		}
 	}
 
 	const handleOpenQueryTab = () => tabs.addTab({ name: 'Query', type: 'query' })
@@ -20,8 +39,10 @@ export function useExplorerActions(tabs: any) {
 		tabs.addTab({ name: tableName, type: 'table' })
 	}
 
-	const handleDisconnect = () => {
-		window.location.hash = '/'
+	const handleDisconnect = async () => {
+		await window.datary.db.disconnect()
+
+		navigate('/')
 	}
 
 	return {

apps/desktop/renderer/src/modules/explorer/hooks/useExplorerTabs.ts

@@ -16,10 +16,29 @@ export function useExplorerTabs() {
 		return id
 	}, [])
 
-	const closeTab = useCallback((tabId: string) => {
-		setTabs(prev => prev.filter(t => t.id !== tabId))
-		setActiveTab(prevActive => (prevActive === tabId ? '' : prevActive))
-	}, [])
+	const closeTab = useCallback(
+		(tabId: string) => {
+			setTabs(prev => {
+				const index = prev.findIndex(t => t.id === tabId)
+				const nextTabs = prev.filter(t => t.id !== tabId)
+
+				if (activeTab !== tabId) {
+					return nextTabs
+				}
+
+				if (nextTabs.length === 0) {
+					setActiveTab('')
+					return nextTabs
+				}
+
+				const nextIndex = index < nextTabs.length ? index : nextTabs.length - 1
+				setActiveTab(nextTabs[nextIndex].id)
+
+				return nextTabs
+			})
+		},
+		[activeTab]
+	)
 
 	return { tabs, activeTab, setActiveTab, addTab, closeTab }
 }

apps/desktop/renderer/src/shared/components/data-table.tsx

@@ -334,7 +334,7 @@ export function DataTable({ data, onCellUpdate }: DataTableProps) {
 						<SelectTrigger className="h-8 w-16">
 							<SelectValue />
 						</SelectTrigger>
-						<SelectContent>
+						<SelectContent position="popper" side="top">
 							<SelectItem value="10">10</SelectItem>
 							<SelectItem value="25">25</SelectItem>
 							<SelectItem value="50">50</SelectItem>