diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.test.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.test.tsx index 11257771d5..4158cd7a47 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.test.tsx +++ b/redisinsight/ui/src/pages/browser/BrowserPage.test.tsx @@ -51,6 +51,7 @@ const selectKey = (state: any, selectedKey: any, data?: any = {}) => { ...state.app, context: { ...state.app.context, + contextInstanceId: 'instanceId', browser: { ...state.app.context.browser, bulkActions: { diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx index ce76ff629b..41e0322071 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx +++ b/redisinsight/ui/src/pages/browser/BrowserPage.tsx @@ -33,6 +33,7 @@ import { setBrowserPanelSizes, setLastPageContext, setBrowserBulkActionOpen, + appContextSelector, } from 'uiSrc/slices/app/context' import { resetErrors } from 'uiSrc/slices/app/notifications' import { RedisResponseBuffer } from 'uiSrc/slices/interfaces' @@ -42,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' @@ -66,6 +68,8 @@ const BrowserPage = () => { keyList: { selectedKey: selectedKeyContext }, bulkActions: { opened: bulkActionOpenContext }, } = useSelector(appContextBrowser) + const { contextInstanceId } = useSelector(appContextSelector) + const { isBrowserFullScreen } = useSelector(keysSelector) const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 } const { viewType, searchMode } = useSelector(keysSelector) @@ -73,11 +77,12 @@ const BrowserPage = () => { const [isPageViewSent, setIsPageViewSent] = useState(false) const [arePanelsCollapsed, setArePanelsCollapsed] = useState(isOneSideMode(!!openedSidePanel)) - const [selectedKey, setSelectedKey] = useState>(selectedKeyContext) const [isAddKeyPanelOpen, setIsAddKeyPanelOpen] = useState(false) const [isCreateIndexPanelOpen, setIsCreateIndexPanelOpen] = useState(false) const [isBulkActionsPanelOpen, setIsBulkActionsPanelOpen] = useState(bulkActionOpenContext) + const [selectedKey, setSelectedKey] = useStateWithContext>(selectedKeyContext, null) + const [sizes, setSizes] = useState(panelSizes) const prevSelectedType = useRef(type) @@ -118,8 +123,8 @@ const BrowserPage = () => { }, [isBulkActionsPanelOpen]) useEffect(() => { - setSelectedKey(selectedKeyContext) - }, [selectedKeyContext]) + if (contextInstanceId === instanceId) setSelectedKey(selectedKeyContext) + }, [selectedKeyContext, contextInstanceId]) useEffect(() => { selectedKeyRef.current = selectedKey diff --git a/redisinsight/ui/src/pages/instance/InstancePage.tsx b/redisinsight/ui/src/pages/instance/InstancePage.tsx index 5cc9477449..220d238588 100644 --- a/redisinsight/ui/src/pages/instance/InstancePage.tsx +++ b/redisinsight/ui/src/pages/instance/InstancePage.tsx @@ -70,7 +70,10 @@ const InstancePage = ({ routes = [] }: Props) => { }, [pathname]) useEffect(() => { - if (isShouldChildrenRerender) setIsShouldChildrenRerender(false) + if (isShouldChildrenRerender) { + dispatch(resetDatabaseContext()) + setIsShouldChildrenRerender(false) + } }, [isShouldChildrenRerender]) if (isShouldChildrenRerender) { diff --git a/redisinsight/ui/src/services/hooks/index.ts b/redisinsight/ui/src/services/hooks/index.ts index e7bf515ac4..4b1ac5c8b8 100644 --- a/redisinsight/ui/src/services/hooks/index.ts +++ b/redisinsight/ui/src/services/hooks/index.ts @@ -1,3 +1,4 @@ export * from './hooks' export * from './useWebworkers' export * from './useCabability' +export * from './useStateWithContext' diff --git a/redisinsight/ui/src/services/hooks/useStateWithContext.ts b/redisinsight/ui/src/services/hooks/useStateWithContext.ts new file mode 100644 index 0000000000..13c5c3cfe3 --- /dev/null +++ b/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 = (value: T, initialValue: T) => { + const { instanceId } = useParams<{ instanceId: string }>() + const { contextInstanceId } = useSelector(appContextSelector) + + return useState(instanceId === contextInstanceId ? value : initialValue) +}