Refactor cache and search management in Content and VersionSelector components

- Update cache handling to clear and reset based on content ID changes, ensuring accurate version data.
- Simplify the search query reset logic in VersionSelector when versions change, improving user experience.
- Streamline the useEffect hooks for better clarity and performance in both components.

Author: bdahle

xp-archive/client/content/Content.tsx

@@ -71,34 +71,22 @@ export const Content = () => {
         };
     });
 
-    // Update this effect to clear the cache immediately when content ID changes
+    // Update cache when content ID changes or new versions arrive
     useEffect(() => {
-        // Clear the cache for the previous content ID when it changes
         if (prevContentIdRef.current && prevContentIdRef.current !== selectedContentId) {
             clearCachedVersionSelector(prevContentIdRef.current);
         }
 
-        prevContentIdRef.current = selectedContentId;
-
-        // Also reset the local cache state when content ID changes, but preserve isOpen state
         if (data?.versions && selectedContentId) {
             setVersionSelectorCache((prev) => ({
                 component: null,
                 versions: data.versions,
-                isOpen: prev.isOpen, // Preserve the open state
+                isOpen: prev.isOpen, // Always preserve open state
             }));
         }
-    }, [selectedContentId, data?.versions]);
 
-    // Add a separate effect to handle data loading without affecting panel state
-    useEffect(() => {
-        if (data?.versions && selectedContentId) {
-            setVersionSelectorCache((prev) => ({
-                ...prev,
-                versions: data.versions,
-            }));
-        }
-    }, [data?.versions, selectedContentId]);
+        prevContentIdRef.current = selectedContentId;
+    }, [selectedContentId, data?.versions]);
 
     useEffect(() => {
         setSelectedView(getDefaultView(isWebpage, hasAttachment));

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -51,44 +51,8 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
         formatTimestamp(version.timestamp).toLowerCase().includes(searchQuery.toLowerCase())
     );
 
-    // Call onMount with the rendered component
+    // Reset search when versions change completely
     useEffect(() => {
-        if (onMount) {
-            const component = (
-                <SlidePanel isOpen={isOpen} onClose={handleClose}>
-                    <Heading size="medium" spacing>
-                        Versjoner
-                    </Heading>
-                    <Search
-                        label="Søk i versjoner"
-                        variant="simple"
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        className={style.search}
-                    />
-                    <div className={style.versionList}>
-                        {filteredVersions.map((version, index) => (
-                            <VersionButton
-                                key={version.versionId}
-                                isSelected={version.versionId === selectedVersion}
-                                onClick={() => selectVersion(version.versionId)}
-                            >
-                                {formatTimestamp(version.timestamp)}
-                                {index === 0 && (
-                                    <span style={{ fontWeight: 'normal' }}> (Siste versjon)</span>
-                                )}
-                            </VersionButton>
-                        ))}
-                    </div>
-                </SlidePanel>
-            );
-            onMount(component);
-        }
-    }, [versions, isOpen, searchQuery, selectedVersion]);
-
-    // Add a useEffect to update the filtered versions when the input versions change
-    useEffect(() => {
-        // Reset search query when versions change completely (different content)
         if (
             versions.length > 0 &&
             filteredVersions.length > 0 &&
@@ -98,8 +62,7 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
         }
     }, [versions]);
 
-    // Return the same component
-    return (
+    const component = (
         <SlidePanel isOpen={isOpen} onClose={handleClose}>
             <Heading size="medium" spacing>
                 Versjoner
@@ -127,4 +90,13 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
             </div>
         </SlidePanel>
     );
+
+    // Call onMount with the component
+    useEffect(() => {
+        if (onMount) {
+            onMount(component);
+        }
+    }, [versions, isOpen, searchQuery, selectedVersion]);
+
+    return component;
 };