Refactor Content and VersionSelector components to streamline URL management. Removed the updateContentUrl function and added separate effects for URL updates in Content.tsx to prevent unnecessary history entries. Updated VersionSelector to only manage state without modifying the URL directly.

Author: bdahle

xp-archive/client/content/Content.tsx

@@ -18,11 +18,6 @@ const getDefaultView = (isWebpage: boolean, hasAttachment: boolean): ViewVariant
     return undefined;
 };
 
-const updateContentUrl = (nodeId: string, locale: string, versionId?: string) => {
-    const newUrl = `${xpArchiveConfig.basePath}/${nodeId}/${locale}/${versionId ?? ''}`;
-    window.history.pushState({}, '', newUrl);
-};
-
 export const Content = () => {
     const { selectedContentId, selectedLocale, selectedVersion, setSelectedVersion } =
         useAppState();
@@ -42,16 +37,27 @@ export const Content = () => {
         versionId: selectedVersion ?? '',
     });
 
+    // Effect to set the initial version if none is selected
     useEffect(() => {
-        if (selectedVersion) {
-            updateContentUrl(selectedContentId ?? '', selectedLocale, selectedVersion);
-        } else if (data?.versions?.[0]) {
+        if (!selectedVersion && data?.versions?.[0]) {
             const latestVersionId = data.versions[0].versionId;
             setSelectedVersion(latestVersionId);
-            updateContentUrl(selectedContentId ?? '', selectedLocale, latestVersionId);
         }
     }, [data, selectedContentId, selectedLocale, selectedVersion]);
 
+    // Separate effect for URL updates that doesn't trigger component reloads
+    useEffect(() => {
+        if (selectedContentId && selectedLocale) {
+            const versionPart = selectedVersion ? `/${selectedVersion}` : '';
+            const newUrl = `${xpArchiveConfig.basePath}/${selectedContentId}/${selectedLocale}${versionPart}`;
+
+            // Only update if URL is different to avoid unnecessary history entries
+            if (window.location.pathname !== newUrl) {
+                window.history.replaceState({}, '', newUrl);
+            }
+        }
+    }, [selectedContentId, selectedLocale, selectedVersion]);
+
     const isWebpage = !!data?.html && !data.json.attachment;
     const hasAttachment = !!data?.json.attachment;
     const [selectedView, setSelectedView] = useState<ViewVariant | undefined>(

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -34,16 +34,16 @@ const VersionButton = ({ isSelected, onClick, children }: VersionButtonProps) =>
 
 export const VersionSelector = ({ versions, isOpen, onClose }: Props) => {
     const [searchQuery, setSearchQuery] = useState('');
-    const { setSelectedContentId, selectedVersion, setSelectedVersion } = useAppState();
+    const { setSelectedVersion, selectedVersion } = useAppState();
 
     const handleClose = () => {
         setSearchQuery('');
         onClose();
     };
 
     const selectVersion = (versionId: string) => {
-        const nodeId = versions.find((v) => v.versionId === versionId)?.nodeId;
-        if (nodeId) setSelectedContentId(nodeId);
+        // Just update the state, don't modify the URL here
+        // The URL update will be handled by the effect in Content.tsx
         setSelectedVersion(versionId);
     };