Remove initialize() from VersionContext and just init in the Context tag directly

Author: sfc-gh-tteixeira

context/VersionContext.js

@@ -15,32 +15,14 @@ const PLATFORM_VERSIONS = publicRuntimeConfig.PLATFORM_VERSIONS;
 const PLATFORM_LATEST_VERSIONS = publicRuntimeConfig.PLATFORM_LATEST_VERSIONS;
 const PLATFORMS = publicRuntimeConfig.PLATFORMS;
 
-export function VersionContextProvider({ children }) {
-  const [initialized, setInitialized] = useState(false);
-
-  const [version, setVersionState] = useState(DEFAULT_VERSION);
-  const [platform, setPlatformState] = useState(DEFAULT_PLATFORM);
-  // const [isOpen, setIsOpen] = useState(false);
-  const router = useRouter();
-
-  const initialize = useCallback(
-    ({ newVersion, newPlatform, functionName = null, currMenuItem = null }) => {
-      if (initialized) return [version, platform];
-
-      setVersionAndPlatform({
-        newVersion,
-        newPlatform,
-        functionName,
-        currMenuItem,
-        updateURL: true,
-      });
-
-      setInitialized(true);
-
-      return [newVersion, newPlatform];
-    },
-    [initialized, version, platform],
+export function VersionContextProvider(props) {
+  const [platform, setPlatformState] = useState(() =>
+    getCleanedPlatform(props.platformFromStaticLoad),
+  );
+  const [version, setVersionState] = useState(() =>
+    getCleanedVersion(props.versionFromStaticLoad, platform),
   );
+  const router = useRouter();
 
   const setVersionAndPlatform = useCallback(
     ({
@@ -63,12 +45,10 @@ export function VersionContextProvider({ children }) {
         return;
       }
 
-      const cleanedVersion = isLatestVersion(newVersion, newPlatform)
-        ? DEFAULT_VERSION
-        : newVersion;
-      setVersionState(cleanedVersion);
+      const cleanedVersion = getCleanedVersion(newVersion, newPlatform);
+      const cleanedPlatform = getCleanedPlatform(newPlatform);
 
-      const cleanedPlatform = newPlatform ?? DEFAULT_PLATFORM;
+      setVersionState(cleanedVersion);
       setPlatformState(cleanedPlatform);
 
       if (updateURL) {
@@ -96,15 +76,14 @@ export function VersionContextProvider({ children }) {
       value={{
         version,
         platform,
-        initialize,
         setVersionAndPlatform,
         goToLatest,
         goToOpenSource,
         // isOpen,
         // setIsOpen
       }}
     >
-      {children}
+      {props.children}
     </Context.Provider>
   );
 }
@@ -219,8 +198,8 @@ export function getVersionAndPlatformFromPathPart(pathPart) {
 export function versionAndPlatformAreCompatible(version, platform) {
   if (version == DEFAULT_VERSION) return true;
 
-  if (platform == DEFAULT_PLATFORM && VERSIONS_LIST.indexOf(version) >= 0) {
-    return true;
+  if (platform == DEFAULT_PLATFORM) {
+    return VERSIONS_LIST.indexOf(version) >= 0;
   }
 
   return PLATFORM_VERSIONS[platform].indexOf(version) >= 0;
@@ -252,3 +231,11 @@ export function getBestNumericVersion(version, platform) {
     }
   }
 }
+
+function getCleanedVersion(version, platform) {
+  return isLatestVersion(version, platform) ? DEFAULT_VERSION : version;
+}
+
+function getCleanedPlatform(platform) {
+  return platform ?? DEFAULT_PLATFORM;
+}

pages/[...slug].js

@@ -1,6 +1,6 @@
 import fs from "fs";
-import { join, basename } from "path";
-import React, { useState, useCallback } from "react";
+import { basename } from "path";
+import React, { useState, useCallback, useEffect } from "react";
 import Link from "next/link";
 import Head from "next/head";
 import { serialize } from "next-mdx-remote/serialize";
@@ -71,7 +71,6 @@ import YouTube from "../components/blocks/youTube";
 import Cloud from "../components/blocks/cloud";
 
 import styles from "../components/layouts/container.module.css";
-import { DotFilledIcon } from "@radix-ui/react-icons";
 
 const VERSIONS_LIST = serverRuntimeConfig.VERSIONS_LIST;
 const LATEST_OSS_VERSION = serverRuntimeConfig.LATEST_OSS_VERSION;
@@ -129,34 +128,24 @@ export default function Article({
       : "https://github.com/streamlit/docs/tree/main" +
         filename.substring(filename.indexOf("/content/"));
 
-  const { initialize, goToLatest, goToOpenSource } = useVersion();
-
-  const [version, platform] = initialize({
-    router,
-    newVersion: versionFromStaticLoad,
-    newPlatform: platformFromStaticLoad,
-    functionName: null,
-    currMenuItem,
-  });
-
-  // If version wasn't specified by hand in the URL, remove version from URL of unversioned pages.
-  if (currMenuItem && currMenuItem.isVersioned) {
-    if (
-      versionFromStaticLoad == DEFAULT_VERSION &&
-      platformFromStaticLoad == DEFAULT_PLATFORM
-    ) {
+  const { version, platform, goToLatest, goToOpenSource } = useVersion();
+
+  useEffect(
+    () => {
+      // If this page isn't versioned, no action needed.
+      if (!currMenuItem || !currMenuItem.isVersioned) return;
+
+      // If the URL already matches VersionContext, no action needed.
       if (
-        versionFromStaticLoad != version ||
-        platformFromStaticLoad != platform
-      ) {
-        const versionAndPlatformStr = getVersionAndPlatformStr(
-          version,
-          platform,
-        );
-        router.push(`/${versionAndPlatformStr}/${slug.join("/")}`);
-      }
-    }
-  }
+        versionFromStaticLoad == version &&
+        platformFromStaticLoad == platform
+      )
+        return;
+
+      const versionAndPlatformStr = getVersionAndPlatformStr(version, platform);
+      router.replace(`/${versionAndPlatformStr}/${slug.join("/")}`);
+    } /* Run on every page load */,
+  );
 
   const components = {
     Note,

pages/_app.js

@@ -26,7 +26,12 @@ function StreamlitDocs({ Component, pageProps }) {
 
   return (
     <AppContextProvider>
-      <VersionContextProvider>
+      <VersionContextProvider
+        versionFromStaticLoad={pageProps.versionFromStaticLoad}
+        platformFromStaticLoad={pageProps.platformFromStaticLoad}
+        functionName={null}
+        currMenuItem={pageProps.currMenuItem}
+      >
         <Component {...pageProps} />
       </VersionContextProvider>
     </AppContextProvider>