From 6978c7daa3c93b3b9e1673148608b3ba322a57d2 Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo Date: Thu, 11 Apr 2024 15:50:17 +0200 Subject: [PATCH 1/6] WIP reflect version in URL --- .../[lang]/_components/layout/header/versionSelect.tsx | 8 ++++++++ packages/landingpage/utils/context/VersionContext.tsx | 8 +++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx b/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx index c8f286afee..797fa8f2f1 100644 --- a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx +++ b/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx @@ -8,6 +8,14 @@ const VersionSelect = () => { const handleVersionChange = (e: CustomEvent) => { setSelectedVersion(e.detail); + + 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()}`, + ); }; return ( diff --git a/packages/landingpage/utils/context/VersionContext.tsx b/packages/landingpage/utils/context/VersionContext.tsx index 5823d58c6b..54009af21f 100644 --- a/packages/landingpage/utils/context/VersionContext.tsx +++ b/packages/landingpage/utils/context/VersionContext.tsx @@ -25,7 +25,13 @@ export const VersionProvider = ({ children }: { children: ReactNode }) => { const reversedVersions = data.reverse(); setVersions(reversedVersions); - if (reversedVersions.length > 0) { + 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]); } }); From 5c87ddd6d2ea3fd1efed677352fc6d5925bda0c0 Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo Date: Thu, 18 Apr 2024 12:33:25 +0200 Subject: [PATCH 2/6] utilize searchParams --- .../layout/header/versionSelect.tsx | 51 +++++++++++-------- .../utils/context/VersionContext.tsx | 28 ++-------- .../utils/hooks/useStorybookUrl.ts | 30 ++++------- 3 files changed, 43 insertions(+), 66 deletions(-) diff --git a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx b/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx index 797fa8f2f1..d7afab3e22 100644 --- a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx +++ b/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 ( -
- {versions.map((version, i) => ( - - {version} - - ))} -
+ {versions.map((version, i) => ( + + {version} + + ))} ); }; diff --git a/packages/landingpage/utils/context/VersionContext.tsx b/packages/landingpage/utils/context/VersionContext.tsx index 54009af21f..9014a98ab7 100644 --- a/packages/landingpage/utils/context/VersionContext.tsx +++ b/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( ); export const VersionProvider = ({ children }: { children: ReactNode }) => { - const [selectedVersion, setSelectedVersion] = useState( - undefined, - ); const [versions, setVersions] = useState([]); 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 ( - + {children} ); diff --git a/packages/landingpage/utils/hooks/useStorybookUrl.ts b/packages/landingpage/utils/hooks/useStorybookUrl.ts index ea86382a5e..6773a7de27 100644 --- a/packages/landingpage/utils/hooks/useStorybookUrl.ts +++ b/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( - null, - ); + const [initialStorybookUrl, setInitialStorybookUrl] = useState(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; }; From 4dc3259ff1d7774adbea47c0ba39e00509f73abc Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo Date: Wed, 24 Apr 2024 12:23:13 +0200 Subject: [PATCH 3/6] run format fix --- packages/landingpage/utils/context/VersionContext.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/landingpage/utils/context/VersionContext.tsx b/packages/landingpage/utils/context/VersionContext.tsx index 2f1d828e47..669b03d99f 100644 --- a/packages/landingpage/utils/context/VersionContext.tsx +++ b/packages/landingpage/utils/context/VersionContext.tsx @@ -11,13 +11,9 @@ export const VersionProvider = ({ children }: { children: ReactNode }) => { useEffect(() => { fetch('https://raw.githubusercontent.com/inovex/elements/pages/hosted-versions.json') - .then((response) => response.json()) - .then((data) => setVersions(data.reverse())); // Assuming reversing is necessary + .then(response => response.json()) + .then(data => setVersions(data.reverse())); // Assuming reversing is necessary }, []); - return ( - - {children} - - ); + return {children}; }; From 1be7cb0075ad0cec02e1deb43203edd9e1248bfd Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo Date: Wed, 24 Apr 2024 12:41:09 +0200 Subject: [PATCH 4/6] add useMemo in an attempt to prevent double refresh --- .../layout/header/versionSelect.tsx | 12 +++++----- .../utils/hooks/useStorybookUrl.ts | 22 ++++++++++--------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx b/packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx index d7afab3e22..c9973a29d1 100644 --- 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) => ( - - {version} - - ))} +
+ {versions.map((version, i) => ( + + {version} + + ))} +
); }; diff --git a/packages/landingpage/utils/hooks/useStorybookUrl.ts b/packages/landingpage/utils/hooks/useStorybookUrl.ts index 6773a7de27..2a594418b8 100644 --- 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(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; }; From 993d1f9b79889d7945d5e7d8435f1fccd3e50615 Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo Date: Thu, 25 Apr 2024 10:24:29 +0200 Subject: [PATCH 5/6] refactor: remove unneccessary comment --- packages/landingpage/utils/context/VersionContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/landingpage/utils/context/VersionContext.tsx b/packages/landingpage/utils/context/VersionContext.tsx index 669b03d99f..3a223c4e38 100644 --- a/packages/landingpage/utils/context/VersionContext.tsx +++ b/packages/landingpage/utils/context/VersionContext.tsx @@ -12,7 +12,7 @@ export const VersionProvider = ({ children }: { children: ReactNode }) => { useEffect(() => { fetch('https://raw.githubusercontent.com/inovex/elements/pages/hosted-versions.json') .then(response => response.json()) - .then(data => setVersions(data.reverse())); // Assuming reversing is necessary + .then(data => setVersions(data.reverse())); }, []); return {children}; From 74f3d53057428520cd7cb49dadfb6b1908b9ef47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Niklas=20Vo=C3=9F?= Date: Thu, 25 Apr 2024 10:35:28 +0200 Subject: [PATCH 6/6] fix: double reload on story change --- packages/landingpage/utils/hooks/useStorybookUrl.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/landingpage/utils/hooks/useStorybookUrl.ts b/packages/landingpage/utils/hooks/useStorybookUrl.ts index 2a594418b8..e563e62bee 100644 --- a/packages/landingpage/utils/hooks/useStorybookUrl.ts +++ b/packages/landingpage/utils/hooks/useStorybookUrl.ts @@ -5,8 +5,7 @@ export const WELCOME_PAGE_PLACEHOLDER = 'docs-welcome--docs'; export const useStorybookUrl = () => { const searchParams = useSearchParams(); - const [initialStorybookUrl, setInitialStorybookUrl] = useState(null); - + const version = searchParams.get('version'); const storybookUrl = useMemo(() => { const version = searchParams.get('version') || 'latest'; // Default to 'latest' const element = searchParams.get('element') || WELCOME_PAGE_PLACEHOLDER; @@ -17,11 +16,7 @@ export const useStorybookUrl = () => { } return `${url.replace('latest', version)}?path=/docs/${element}`; - }, [searchParams]); - - useEffect(() => { - setInitialStorybookUrl(storybookUrl); - }, [storybookUrl]); + }, [version]); - return initialStorybookUrl; + return storybookUrl; };