Merge pull request #1022 from supertokens/fix/github-issues

Author: bcbogdan

src/components/Tabs/FrontendTabs.tsx

@@ -2,6 +2,7 @@ import Tabs, { Props as TabsProps } from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import { useContext, useMemo } from "react";
 import { DocItemContext } from "@site/src/context";
+import { useUIType } from "@site/src/hooks";
 
 // TODO: Rename values to items
 const PrebuiltUITabValues = [
@@ -25,7 +26,7 @@ type FrontendTabsProps = Omit<TabsProps, "values" | "groupId"> & {
 
 function FrontendTabsRoot(props: FrontendTabsProps) {
   const { children, exclude, uiType: propsUiType, ...rest } = props;
-  const { uiType: contextUiType } = useContext(DocItemContext);
+  const { uiType: contextUiType } = useUIType();
   const uiType = propsUiType || contextUiType;
   const groupId = useMemo(() => {
     return `${FrontendTabsGroupIdPrefix}-${uiType}`;

src/components/UITypeSwitch.tsx

@@ -5,12 +5,12 @@ import { Card, Flex, Heading, RadioCards, Text } from "@radix-ui/themes";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { AnimatePresence, motion } from "motion/react";
 import { TOC_UI_TYPE_SWITCH_ID } from "../lib";
-import { useIsVisible } from "../hooks";
+import { useIsVisible, useUIType } from "../hooks";
 
 import "./RadioCard.scss";
 
 function UITypeSwitch({}) {
-  const { uiType, onChangeUIType } = useContext(DocItemContext);
+  const { uiType, onChangeUIType } = useUIType();
   const { visibilityRef, isVisible } = useIsVisible();
 
   return (
@@ -42,7 +42,7 @@ function UITypeSwitch({}) {
 }
 
 function TOCSwitch({ isParentVisible }: { isParentVisible: boolean }) {
-  const { uiType, onChangeUIType } = useContext(DocItemContext);
+  const { uiType, onChangeUIType } = useUIType();
   const root = document.getElementById(TOC_UI_TYPE_SWITCH_ID);
   const elementRef = useRef<HTMLDivElement>(null);
   if (!root) return null;
@@ -90,15 +90,15 @@ function HeadingFilter({ children, name }: React.PropsWithChildren<{ name: strin
 }
 
 function PrebuiltUIContent({ children }: React.PropsWithChildren<{}>) {
-  const state = useContext(DocItemContext);
+  const { uiType } = useUIType();
 
-  return <HeadingFilter name="prebuilt">{state.uiType === "prebuilt" ? children : null}</HeadingFilter>;
+  return <HeadingFilter name="prebuilt">{uiType === "prebuilt" ? children : null}</HeadingFilter>;
 }
 
 function CustomUIContent({ children }: React.PropsWithChildren<{}>) {
-  const state = useContext(DocItemContext);
+  const { uiType } = useUIType();
 
-  return <HeadingFilter name="custom">{state.uiType === "custom" ? children : null}</HeadingFilter>;
+  return <HeadingFilter name="custom">{uiType === "custom" ? children : null}</HeadingFilter>;
 }
 
 export const UIType = {

src/context/DocItemContext.tsx

@@ -6,7 +6,6 @@ type DocItemContextType = DocsItemStateType & {
   derived: Record<string, unknown>;
   webJsVersions: Record<string, string>;
   prebuiltUIVersion: string;
-  onChangeUIType: (type: DocsItemStateType["uiType"]) => void;
   onChangeTenantType: (type: DocsItemStateType["tenantType"]) => void;
   onChangeAppType: (type: DocsItemStateType["tenantType"]) => void;
   onChangeRecipeProperty: (
@@ -39,16 +38,6 @@ export function DocItemContextProvider({ children }: { children: React.ReactNode
     onLoadPrebuiltUIVersion();
   }, []);
 
-  const onChangeUIType = useCallback(
-    (type: DocsItemStateType["uiType"]) => {
-      setState({
-        ...state,
-        uiType: type,
-      });
-    },
-    [state],
-  );
-
   const onChangeTenantType = useCallback(
     (type: DocsItemStateType["tenantType"]) => {
       setState({
@@ -135,7 +124,6 @@ export function DocItemContextProvider({ children }: { children: React.ReactNode
         },
         derived: derivedState,
         onChangeAppType,
-        onChangeUIType,
         onChangeTenantType,
         onChangeRecipeProperty,
         onChangeAppInfoField,

src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./useSelectionStore";
 export * from "./useDocItemStore";
 export * from "./useDocPageData";
 export * from "./useLoadOpenApiSchema";
+export * from "./useUIType";

src/hooks/useDocItemStore.ts

@@ -9,7 +9,6 @@ export type DocsItemStateType = {
     };
     thirdparty: {};
   };
-  uiType: "prebuilt" | "custom";
   appInfo: {
     appName: string;
     apiDomain: string;
@@ -35,7 +34,6 @@ const DefaultState: DocsItemStateType = {
     },
     thirdparty: {},
   },
-  uiType: "prebuilt",
   tenantType: "single",
   appType: "single",
   appInfo: {

src/hooks/useFilteredTocItems.ts

@@ -1,6 +1,7 @@
 import { useContext, useState, useLayoutEffect } from "react";
 import { DocItemContext } from "@site/src/context";
 import type { Props } from "@theme/TOC";
+import { useUIType } from "./useUIType";
 
 /**
  * The TOC component does not support dynamic headings.
@@ -11,7 +12,8 @@ import type { Props } from "@theme/TOC";
  * to allow dynamic headings based on tab selection.
  */
 export default function useFilteredTocItems(toc: Props["toc"]) {
-  const { uiType, tenantType } = useContext(DocItemContext);
+  const { tenantType } = useContext(DocItemContext);
+  const { uiType } = useUIType();
 
   const [filteredTocItems, setFilteredTocItems] = useState<Props["toc"]>([]);
 

src/hooks/useUIType.ts

@@ -0,0 +1,32 @@
+import { useCallback, useMemo } from "react";
+import { useDocPageData } from "./useDocPageData";
+import { useLocation, useHistory } from "@docusaurus/router";
+import { docPageStore } from "../lib";
+
+export function useUIType() {
+  const { search } = useLocation();
+  const history = useHistory();
+  const storeUIType = useDocPageData("uiType");
+  const urlUIType = useMemo(() => {
+    const searchParams = new URLSearchParams(search);
+    return searchParams.get("uiType") as "prebuilt" | "custom" | null;
+  }, [search]);
+
+  const uiType: "prebuilt" | "custom" = urlUIType || storeUIType || "prebuilt";
+
+  const onChangeUIType = useCallback(
+    (type: "prebuilt" | "custom") => {
+      const searchParams = new URLSearchParams(search);
+      searchParams.set("uiType", type);
+      history.push({
+        pathname: history.location.pathname,
+        search: searchParams.toString(),
+        hash: history.location.hash,
+      });
+      docPageStore.updateValue("uiType", type);
+    },
+    [urlUIType, history],
+  );
+
+  return { uiType, onChangeUIType };
+}

src/lib/docPageStore.ts

@@ -7,6 +7,7 @@ export interface DocPageState {
   selfHostedDeploymentType: "with-docker" | "without-docker";
   tenantType: "single-tenant" | "multi-tenant";
   apiRequestExampleLanguage: "shell" | "nodejs" | "python" | "go";
+  uiType: "prebuilt" | "custom";
   apiDomain: string;
   apiBasePath: string;
   websiteDomain: string;
@@ -45,6 +46,7 @@ class DocPageStore {
       tenantType: "single-tenant",
       nextjsRouterType: "app-router",
       accountType: "managed",
+      uiType: "prebuilt",
       selfHostedDeploymentType: "with-docker",
       apiRequestExampleLanguage: "shell",
       apiDomain: DOC_PAGE_STORE_DEFAULT_VALUES.apiDomain,