Enhance version selector caching and state management in Content component

- Introduce content-specific caching for version selector state.
- Clear cache when content ID changes to ensure accurate state management.
- Update localStorage handling to use dynamic storage keys based on content ID.

Author: bdahle

xp-archive/client/content/Content.tsx

@@ -12,6 +12,7 @@ import { EmptyState } from '@common/shared/EmptyState/EmptyState';
 import {
     setCachedVersionSelector,
     getCachedVersionSelector,
+    clearCachedVersionSelector,
 } from 'client/versionSelector/VersionSelectorCache';
 
 import style from './Content.module.css';
@@ -64,14 +65,24 @@ export const Content = () => {
 
     // Get cached state or initialize
     const [versionSelectorCache, setVersionSelectorCache] = useState(() => {
-        const cache = getCachedVersionSelector();
+        const cache = getCachedVersionSelector(selectedContentId || '');
         return {
             component: cache.component,
             versions: cache.versions,
             isOpen: cache.isOpen,
         };
     });
 
+    // Clear cache when content changes
+    useEffect(() => {
+        // When content ID changes, reset the cache for the previous content
+        return () => {
+            if (selectedContentId) {
+                clearCachedVersionSelector(selectedContentId);
+            }
+        };
+    }, [selectedContentId]);
+
     // Update the cache when versions change
     useEffect(() => {
         if (data?.versions && data.versions.length > 0) {
@@ -143,8 +154,9 @@ export const Content = () => {
                                     }));
                                 }}
                                 onMount={(component) => {
-                                    // Cache the rendered component
+                                    // Cache the rendered component with the content ID
                                     setCachedVersionSelector(
+                                        selectedContentId || '',
                                         component,
                                         versionSelectorCache.versions.length > 0
                                             ? versionSelectorCache.versions

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -34,17 +34,19 @@ const VersionButton = ({ isSelected, onClick, children }: VersionButtonProps) =>
 );
 
 // Storage key for persisting version selector state
-const STORAGE_KEY = 'versionSelector_state';
+const getStorageKey = (contentId: string) => `versionSelector_state_${contentId}`;
 
 export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) => {
     const [searchQuery, setSearchQuery] = useState('');
-    const { setSelectedContentId, selectedVersion, setSelectedVersion } = useAppState();
+    const { setSelectedContentId, selectedVersion, setSelectedVersion, selectedContentId } =
+        useAppState();
+    const storageKey = getStorageKey(selectedContentId || '');
 
     // Load search query from localStorage on mount
     useEffect(() => {
         if (isOpen) {
             try {
-                const savedState = localStorage.getItem(STORAGE_KEY);
+                const savedState = localStorage.getItem(storageKey);
                 if (savedState) {
                     const { searchQuery: savedQuery } = JSON.parse(savedState);
                     if (savedQuery) {
@@ -55,14 +57,14 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
                 console.error('Failed to load version selector state', e);
             }
         }
-    }, [isOpen]);
+    }, [isOpen, storageKey]);
 
     // Save state to localStorage when it changes
     useEffect(() => {
         if (isOpen) {
             try {
                 localStorage.setItem(
-                    STORAGE_KEY,
+                    storageKey,
                     JSON.stringify({
                         searchQuery,
                         selectedVersion,
@@ -72,7 +74,7 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
                 console.error('Failed to save version selector state', e);
             }
         }
-    }, [isOpen, searchQuery, selectedVersion]);
+    }, [isOpen, searchQuery, selectedVersion, storageKey]);
 
     const handleClose = () => {
         // Don't clear search query when closing
@@ -87,7 +89,7 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
         // Save selected version to localStorage
         try {
             localStorage.setItem(
-                STORAGE_KEY,
+                storageKey,
                 JSON.stringify({
                     searchQuery,
                     selectedVersion: versionId,

xp-archive/client/versionSelector/VersionSelectorCache.tsx

@@ -1,23 +1,41 @@
 import React from 'react';
 import { VersionReference } from 'shared/types';
 
-// Global cache for the version selector component
-let cachedVersionSelector: React.ReactNode | null = null;
-let cachedVersions: VersionReference[] = [];
-let cachedIsOpen = false;
+// Content-specific cache for the version selector component
+const contentCache: Record<
+    string,
+    {
+        component: React.ReactNode | null;
+        versions: VersionReference[];
+        isOpen: boolean;
+    }
+> = {};
 
 export const setCachedVersionSelector = (
+    contentId: string,
     component: React.ReactNode,
     versions: VersionReference[],
     isOpen: boolean
 ) => {
-    cachedVersionSelector = component;
-    cachedVersions = versions;
-    cachedIsOpen = isOpen;
+    contentCache[contentId] = {
+        component,
+        versions,
+        isOpen,
+    };
 };
 
-export const getCachedVersionSelector = () => ({
-    component: cachedVersionSelector,
-    versions: cachedVersions,
-    isOpen: cachedIsOpen,
-});
+export const getCachedVersionSelector = (contentId: string) => {
+    return (
+        contentCache[contentId] || {
+            component: null,
+            versions: [],
+            isOpen: false,
+        }
+    );
+};
+
+export const clearCachedVersionSelector = (contentId: string) => {
+    if (contentId in contentCache) {
+        delete contentCache[contentId];
+    }
+};