show stored tabs on start

src/global.d.ts

@@ -4,7 +4,8 @@ import { WindowApp, WindowMain } from './insomnia/insomnia.types'
 declare global {
   interface Window {
     app: WindowApp,
-    main: WindowMain
+    main: WindowMain,
+    dev: any,
   }
 }
 

src/index.ts

@@ -3,13 +3,8 @@ import * as ui from './ui'
 import { cleanupWorkspacesAsync } from './services/db'
 
 const initAsync = async () => {
-  // can be used during development, to be able to access insomnia instance from console for experiments
-  // (global as any).dev = {
-  //   insomnia
-  // }
-
   // initialize ui components
-  ui.render()
+  await ui.renderAsync()
   await cleanupWorkspacesAsync()
   console.log('[plugin-navigator]', 'initialized')
 }

src/services/insomnia/connector/refs-react.ts

@@ -15,7 +15,7 @@ export const getReactRefs = (): ReactRefs | null => {
 
   const containerElement = Object.getOwnPropertyNames(rootElement).findLast(x => x.startsWith('__reactContainer'))
   if (!containerElement) {
-    console.error('[plugin-navigator]', 'store container element not found')
+    console.warn('[plugin-navigator]', 'store container element not found')
     return null
   }
 

src/ui/index.tsx

@@ -3,10 +3,13 @@ import { TabsPanel } from './tabs-panel'
 import React from 'react'
 import './index.styles.scss'
 
-export const render = () => {
+export const renderAsync = (): Promise<void> => new Promise((resolve, reject) => {
   // find app header
   const header: HTMLElement | null = document.querySelector('.app-header')
-  if (!header) throw new Error('Root element not found')
+  if (!header) {
+    reject(new Error('App header not found'))
+    return
+  }
 
   // check if root element already exists
   const existsRoot: HTMLElement | null = document.querySelector('#plugin-request-navigator-hub')
@@ -21,7 +24,7 @@ export const render = () => {
 
   ReactDOM.render(
     (<TabsPanel />),
-    root
+    root,
+    () => resolve()
   )
-
-}
+})

src/ui/tabs-panel/tabs-panel.hook.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import { TabData } from './tabs-panel.types'
 import { onRouteChanged } from '../../services/insomnia/events/route-changed'
 import { database, Workspace, WorkspaceTab } from '../../services/db'
-import { getStore, getAllRequests } from '../../services/insomnia/connector'
+import { getStore, getAllRequests, getRouter } from '../../services/insomnia/connector'
 import { getRequestMethodName } from '../../services/helpers'
 
 const debugViewRouteTemplate = /\/organization\/org_[^/]+\/project\/proj_[^/]+\/workspace\/wrk_[^/]+\/debug/gm
@@ -15,43 +15,49 @@ export const useTabsPanel = () => {
   // reset tabs on route change
   useEffect(() => {
     onRouteChanged(route => {
-      if (debugViewRouteTemplate.test(route)) {
-        const store = getStore()
-        const state = store.getState()
-        const workspaceId = state.global.activeWorkspaceId
-        database.findOne<Workspace>({ workspaceId }, (err, storeWorkspace) => {
-          if (err) {
-            // if not able to load workspace tabs
-            console.error('[plugin-navigator]', 'error loading workspace tabs', err)
-            _setTabs([])
-          } else if (!storeWorkspace || storeWorkspace.tabs.length === 0) {
-            // if no saved tabs for workspace
-            _setTabs([])
-          } else {
-            // try to restore saved tabs
-            const allRequests = getAllRequests()
-            const loadedTabs = storeWorkspace
-              .tabs // all saved tabs for workspace
-              .map(x => ({ entity: x, doc: allRequests[x.requestId] })) // try to find request by id
-              .filter(x => x.doc) // filter out not found requests
-              .map<TabData>(x => { // map to tab data
-                const method = getRequestMethodName(x.doc)
-                return ({ requestId: x.doc._id, isActive: x.entity.isActive ?? false, method, title: x.doc.name })
-              }) || [] as TabData[]
-
-            // fix active tab
-            if (loadedTabs.length > 0 && loadedTabs.filter(x => x.isActive).length === 0) loadedTabs[0].isActive = true
-            setTabs(loadedTabs)
-          }
-        })
-      } else if (tabDataRef.current.length > 0) _setTabs([])
+      if (debugViewRouteTemplate.test(route)) requestChanged()
+      else if (tabDataRef.current.length > 0) _setTabs([])
     })
+
+    if (debugViewRouteTemplate.test(getRouter().state.location.pathname))
+      requestChanged()
   }, [])
 
   useEffect(() => {
     tabDataRef.current = tabs
   }, [tabs])
 
+  const requestChanged = () => {
+    const store = getStore()
+    const state = store.getState()
+    const workspaceId = state.global.activeWorkspaceId
+    database.findOne<Workspace>({ workspaceId }, (err, storeWorkspace) => {
+      if (err) {
+        // if not able to load workspace tabs
+        console.error('[plugin-navigator]', 'error loading workspace tabs', err)
+        _setTabs([])
+      } else if (!storeWorkspace || storeWorkspace.tabs.length === 0) {
+        // if no saved tabs for workspace
+        _setTabs([])
+      } else {
+        // try to restore saved tabs
+        const allRequests = getAllRequests()
+        const loadedTabs = storeWorkspace
+          .tabs // all saved tabs for workspace
+          .map(x => ({ entity: x, doc: allRequests[x.requestId] })) // try to find request by id
+          .filter(x => x.doc) // filter out not found requests
+          .map<TabData>(x => { // map to tab data
+            const method = getRequestMethodName(x.doc)
+            return ({ requestId: x.doc._id, isActive: x.entity.isActive ?? false, method, title: x.doc.name })
+          }) || [] as TabData[]
+
+        // fix active tab
+        if (loadedTabs.length > 0 && loadedTabs.filter(x => x.isActive).length === 0) loadedTabs[0].isActive = true
+        setTabs(loadedTabs)
+      }
+    })
+  }
+
   const setTabs = (tabs: TabData[]) => {
     const store = getStore()
     const state = store.getState()