#RI-6081 - fix context selected key

Author: rsergeenko

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -43,6 +43,7 @@ import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import OnboardingStartPopover from 'uiSrc/pages/browser/components/onboarding-start-popover'
 import { sidePanelsSelector } from 'uiSrc/slices/panels/sidePanels'
+import { useStateWithContext } from 'uiSrc/services/hooks'
 import BrowserSearchPanel from './components/browser-search-panel'
 import BrowserLeftPanel from './components/browser-left-panel'
 import BrowserRightPanel from './components/browser-right-panel'
@@ -76,15 +77,12 @@ const BrowserPage = () => {
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
   const [arePanelsCollapsed, setArePanelsCollapsed] = useState(isOneSideMode(!!openedSidePanel))
-  const [selectedKey, setSelectedKey] = useState<Nullable<RedisResponseBuffer>>(
-    contextInstanceId === instanceId
-      ? selectedKeyContext
-      : null
-  )
   const [isAddKeyPanelOpen, setIsAddKeyPanelOpen] = useState(false)
   const [isCreateIndexPanelOpen, setIsCreateIndexPanelOpen] = useState(false)
   const [isBulkActionsPanelOpen, setIsBulkActionsPanelOpen] = useState(bulkActionOpenContext)
 
+  const [selectedKey, setSelectedKey] = useStateWithContext<Nullable<RedisResponseBuffer>>(selectedKeyContext, null)
+
   const [sizes, setSizes] = useState(panelSizes)
 
   const prevSelectedType = useRef<string>(type)
@@ -125,8 +123,8 @@ const BrowserPage = () => {
   }, [isBulkActionsPanelOpen])
 
   useEffect(() => {
-    setSelectedKey(selectedKeyContext)
-  }, [selectedKeyContext])
+    if (contextInstanceId === instanceId) setSelectedKey(selectedKeyContext)
+  }, [selectedKeyContext, contextInstanceId])
 
   useEffect(() => {
     selectedKeyRef.current = selectedKey

redisinsight/ui/src/services/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './hooks'
 export * from './useWebworkers'
 export * from './useCabability'
+export * from './useStateWithContext'

redisinsight/ui/src/services/hooks/useStateWithContext.ts

@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { appContextSelector } from 'uiSrc/slices/app/context'
+
+export const useStateWithContext = <T>(value: T, initialValue: T) => {
+  const { instanceId } = useParams<{ instanceId: string }>()
+  const { contextInstanceId } = useSelector(appContextSelector)
+
+  return useState<T>(instanceId === contextInstanceId ? value : initialValue)
+}