add useMemo in an attempt to prevent double refresh

inovex · Apr 24, 2024 · 1be7cb0 · 1be7cb0
1 parent 4dc3259
commit 1be7cb0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx b/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx
@@ -38,11 +38,13 @@ const VersionSelect = () => {
       outline
       className={styles.versionSelect}
     >
-      {versions.map((version, i) => (
-        <InoOption key={i} value={version}>
-          {version}
-        </InoOption>
-      ))}
+      <div className={styles.options}>
+        {versions.map((version, i) => (
+          <InoOption key={i} value={version}>
+            {version}
+          </InoOption>
+        ))}
+      </div>
     </InoSelect>
   );
 };

diff --git a/packages/landingpage/utils/hooks/useStorybookUrl.ts b/packages/landingpage/utils/hooks/useStorybookUrl.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 export const WELCOME_PAGE_PLACEHOLDER = 'docs-welcome--docs';
@@ -7,19 +7,21 @@ export const useStorybookUrl = () => {
   const searchParams = useSearchParams();
   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.');
-    }
-
-    const version = searchParams.get('version') || 'latest'; // Use 'latest' if no version is specified
+  const storybookUrl = useMemo(() => {
+    const version = searchParams.get('version') || 'latest'; // Default to 'latest'
     const element = searchParams.get('element') || WELCOME_PAGE_PLACEHOLDER;
+    const url = process.env.NEXT_PUBLIC_STORYBOOK_URL;
 
-    // Construct the URL by directly inserting the version and element
-    const newUrl = `${process.env.NEXT_PUBLIC_STORYBOOK_URL.replace('latest', version)}?path=/docs/${element}`;
+    if (!url) {
+      throw new Error('NEXT_PUBLIC_STORYBOOK_URL not found in environment variables.');
+    }
 
-    setInitialStorybookUrl(newUrl);
+    return `${url.replace('latest', version)}?path=/docs/${element}`;
   }, [searchParams]);
 
+  useEffect(() => {
+    setInitialStorybookUrl(storybookUrl);
+  }, [storybookUrl]);
+
   return initialStorybookUrl;
 };