utilize searchParams

packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx

@@ -1,39 +1,48 @@
-import React from 'react';
-import { useVersion } from '@hooks/useVersion';
+import React, { useCallback } from 'react';
 import { InoOption, InoSelect } from '@inovex.de/elements-react';
+import { useVersion } from '@hooks/useVersion';
 import styles from './versionSelect.module.scss';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
 
 const VersionSelect = () => {
-  const { selectedVersion, setSelectedVersion, versions } = useVersion();
+  const { versions } = useVersion();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
-  const handleVersionChange = (e: CustomEvent) => {
-    setSelectedVersion(e.detail);
+  // Utility function to create a query string
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+      return params.toString();
+    },
+    [searchParams],
+  );
 
-    const currentParams = new URLSearchParams(window.location.search);
-    currentParams.set('version', e.detail); // Set or update the version parameter
-    window.history.pushState(
-      {},
-      '',
-      `${window.location.pathname}?${currentParams.toString()}`,
-    );
-  };
+  const handleVersionChange = useCallback(
+    (e: CustomEvent) => {
+      const newVersion = e.detail;
+      // Navigate using router with the new query string
+      router.push(`${pathname}?${createQueryString('version', newVersion)}`);
+    },
+    [createQueryString, pathname, router],
+  );
 
   return (
     <InoSelect
       name="select-version"
       label="Version"
-      value={selectedVersion}
+      value={searchParams.get('version') || versions[0]}
       onValueChange={handleVersionChange}
       outline
       className={styles.versionSelect}
     >
-      <div className={styles.options}>
-        {versions.map((version, i) => (
-          <InoOption key={i} value={version}>
-            {version}
-          </InoOption>
-        ))}
-      </div>
+      {versions.map((version, i) => (
+        <InoOption key={i} value={version}>
+          {version}
+        </InoOption>
+      ))}
     </InoSelect>
   );
 };

packages/landingpage/utils/context/VersionContext.tsx

@@ -1,8 +1,6 @@
 import { createContext, ReactNode, useState, useEffect } from 'react';
 
 export interface VersionContextType {
-  selectedVersion: string | undefined;
-  setSelectedVersion: (value: string | undefined) => void;
   versions: string[];
 }
 
@@ -11,36 +9,16 @@ export const VersionContext = createContext<VersionContextType | undefined>(
 );
 
 export const VersionProvider = ({ children }: { children: ReactNode }) => {
-  const [selectedVersion, setSelectedVersion] = useState<string | undefined>(
-    undefined,
-  );
   const [versions, setVersions] = useState<string[]>([]);
 
   useEffect(() => {
-    fetch(
-      'https://raw.githubusercontent.com/inovex/elements/pages/hosted-versions.json',
-    )
+    fetch('https://raw.githubusercontent.com/inovex/elements/pages/hosted-versions.json')
       .then((response) => response.json())
-      .then((data) => {
-        const reversedVersions = data.reverse();
-        setVersions(reversedVersions);
-
-        const urlParams = new URLSearchParams(window.location.search);
-        const urlVersion = urlParams.get('version');
-
-        // Set the selected version from URL or default to latest
-        if (urlVersion && reversedVersions.includes(urlVersion)) {
-          setSelectedVersion(urlVersion);
-        } else if (reversedVersions.length > 0) {
-          setSelectedVersion(reversedVersions[0]);
-        }
-      });
+      .then((data) => setVersions(data.reverse())); // Assuming reversing is necessary
   }, []);
 
   return (
-    <VersionContext.Provider
-      value={{ selectedVersion, setSelectedVersion, versions }}
-    >
+    <VersionContext.Provider value={{ versions }}>
       {children}
     </VersionContext.Provider>
   );

packages/landingpage/utils/hooks/useStorybookUrl.ts

@@ -1,35 +1,25 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { useVersion } from '@hooks/useVersion';
 
 export const WELCOME_PAGE_PLACEHOLDER = 'docs-welcome--docs';
+
 export const useStorybookUrl = () => {
-  const { selectedVersion } = useVersion();
   const searchParams = useSearchParams();
-  const [initialStorybookUrl, setInitialStorybookUrl] = useState<string | null>(
-    null,
-  );
+  const [initialStorybookUrl, setInitialStorybookUrl] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_STORYBOOK_URL)
-      throw new Error(
-        'NEXT_PUBLIC_STORYBOOK_URL not found in environment variables.',
-      );
-
-    let baseStorybookUrl = process.env.NEXT_PUBLIC_STORYBOOK_URL;
-
-    if (selectedVersion) {
-      baseStorybookUrl = baseStorybookUrl.replace('latest', selectedVersion);
+    if (!process.env.NEXT_PUBLIC_STORYBOOK_URL) {
+      throw new Error('NEXT_PUBLIC_STORYBOOK_URL not found in environment variables.');
     }
 
-    const newUrl = [
-      baseStorybookUrl,
-      '?path=/docs/',
-      searchParams?.get('element') ?? WELCOME_PAGE_PLACEHOLDER,
-    ].join('');
+    const version = searchParams.get('version') || 'latest'; // Use 'latest' if no version is specified
+    const element = searchParams.get('element') || WELCOME_PAGE_PLACEHOLDER;
+
+    // Construct the URL by directly inserting the version and element
+    const newUrl = `${process.env.NEXT_PUBLIC_STORYBOOK_URL.replace('latest', version)}?path=/docs/${element}`;
 
     setInitialStorybookUrl(newUrl);
-  }, [selectedVersion]);
+  }, [searchParams]);
 
   return initialStorybookUrl;
 };