fix: add failsafe for how tabs are stored (#23)

Author: ytkimirti

src/components/databrowser/components/databrowser-tabs.tsx

@@ -1,23 +1,26 @@
-import { IconPlus } from "@tabler/icons-react"
-import { Button } from "@/components/ui/button"
 import type { TabId } from "@/store"
 import { useDatabrowserStore } from "@/store"
 import { TabIdProvider } from "@/tab-provider"
+import { IconPlus } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+
 import { Tab } from "./tab"
 
 export const DatabrowserTabs = () => {
-  const { tabs, addTab } = useDatabrowserStore()
+  const { tabs, addTab, selectedTab } = useDatabrowserStore()
 
   return (
     <div className="relative mb-2 shrink-0">
       <div className="absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" />
 
       <div className="scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden">
-        {tabs.map(([id]) => (
-          <TabIdProvider key={id} value={id as TabId}>
-            <Tab id={id} />
-          </TabIdProvider>
-        ))}
+        {selectedTab &&
+          tabs.map(([id]) => (
+            <TabIdProvider key={id} value={id as TabId}>
+              <Tab id={id} />
+            </TabIdProvider>
+          ))}
         <Button
           variant="secondary"
           size="icon-sm"

src/components/databrowser/index.tsx

@@ -69,11 +69,14 @@ export const RedisBrowser = ({
 }
 
 const DatabrowserInstances = () => {
-  const { tabs, selectedTab, addTab } = useDatabrowserStore()
+  const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore()
 
   useEffect(() => {
     if (tabs.length === 0) addTab()
-  }, [tabs])
+    else if (!selectedTab) selectTab(tabs[0][0])
+  }, [tabs, selectedTab, addTab, selectTab])
+
+  if (!selectedTab) return
 
   return tabs.map(([id]) => (
     <TabIdProvider key={id} value={id as TabId}>

src/tab-provider.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useMemo } from "react"
+
 import type { SearchFilter, SelectedItem } from "./store"
 import { useDatabrowserStore, type TabId } from "./store"
 import type { DataType } from "./types"
@@ -30,7 +31,8 @@ export const useTab = () => {
   const tabId = useTabId()
   const tabData = useMemo(() => tabs.find(([id]) => id === tabId)?.[1], [tabs, tabId])
 
-  if (!selectedTab || !tabData) throw new Error("selectedTab is undefined when using useTab()")
+  if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()")
+  if (!tabData) throw new Error("tabData is undefined when using useTab()")
 
   return useMemo(
     () => ({