Fix x-codeSamples load when switching language tabs in V3 (#706)

* fix x-codeSamples load when switch language tabs

* update prop name

* set code sample text on initial state load

Author: lucasassisrosa

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -17,7 +17,10 @@ import { useTypedSelector } from "@theme/ApiItem/hooks";
 import merge from "lodash/merge";
 
 import { CodeSample, Language } from "./code-snippets-types";
-import { mergeCodeSampleLanguage } from "./languages";
+import {
+  getCodeSampleSourceFromLanguage,
+  mergeCodeSampleLanguage,
+} from "./languages";
 
 export const languageSet: Language[] = [
   {
@@ -198,20 +201,13 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     return defaultLang[0] ?? mergedLangs[0];
   });
   const [codeText, setCodeText] = useState<string>("");
-  const [codeSampleCodeText, setCodeSampleCodeText] = useState<string>("");
+  const [codeSampleCodeText, setCodeSampleCodeText] = useState<
+    string | (() => string)
+  >(() => getCodeSampleSourceFromLanguage(language));
 
   useEffect(() => {
-    // initial active language is custom code sample
-    if (
-      language &&
-      language.sample &&
-      language.samples &&
-      language.samplesSources
-    ) {
-      const sampleIndex = language.samples.findIndex(
-        (smp) => smp === language.sample
-      );
-      setCodeSampleCodeText(language.samplesSources[sampleIndex]);
+    if (language && !!language.sample) {
+      setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language));
     }
 
     if (language && !!language.options) {
@@ -344,7 +340,9 @@ function CodeSnippets({ postman, codeSamples }: Props) {
         action={{
           setLanguage: setLanguage,
           setSelectedVariant: setSelectedVariant,
+          setSelectedSample: setSelectedSample,
         }}
+        languageSet={mergedLangs}
         lazy
       >
         {mergedLangs.map((lang) => {
@@ -367,6 +365,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                   includeSample={true}
                   currentLanguage={lang.language}
                   defaultValue={selectedSample}
+                  languageSet={mergedLangs}
                   lazy
                 >
                   {lang.samples.map((sample, index) => {
@@ -406,6 +405,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                 includeVariant={true}
                 currentLanguage={lang.language}
                 defaultValue={selectedVariant}
+                languageSet={mergedLangs}
                 lazy
               >
                 {lang.variants.map((variant, index) => {

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -35,3 +35,19 @@ export function mergeCodeSampleLanguage(
     return language;
   });
 }
+
+export function getCodeSampleSourceFromLanguage(language: Language) {
+  if (
+    language &&
+    language.sample &&
+    language.samples &&
+    language.samplesSources
+  ) {
+    const sampleIndex = language.samples.findIndex(
+      (smp) => smp === language.sample
+    );
+    return language.samplesSources[sampleIndex];
+  }
+
+  return "";
+}

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -15,32 +15,34 @@ import {
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { Language, languageSet } from "@theme/ApiExplorer/CodeSnippets";
+import { Language } from "@theme/ApiExplorer/CodeSnippets";
 import clsx from "clsx";
 
 export interface Props {
   action: {
     [key: string]: React.Dispatch<any>;
   };
   currentLanguage: Language;
+  languageSet: Language[];
   includeVariant: boolean;
 }
 
-export interface TabListProps extends Props, TabProps {
+export interface CodeTabsProps extends Props, TabProps {
   includeSample?: boolean;
 }
 
 function TabList({
   action,
   currentLanguage,
+  languageSet,
   includeVariant,
   includeSample,
   className,
   block,
   selectedValue,
   selectValue,
   tabValues,
-}: TabListProps & ReturnType<typeof useTabs>) {
+}: CodeTabsProps & ReturnType<typeof useTabs>) {
   const tabRefs: (HTMLLIElement | null)[] = [];
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
@@ -68,15 +70,18 @@ function TabList({
         )[0];
         newLanguage.variant = newTabValue;
         action.setSelectedVariant(newTabValue.toLowerCase());
+      } else if (currentLanguage && includeSample) {
+        newLanguage = languageSet.filter(
+          (lang: Language) => lang.language === currentLanguage
+        )[0];
+        newLanguage.sample = newTabValue;
+        action.setSelectedSample(newTabValue);
       } else {
         newLanguage = languageSet.filter(
           (lang: Language) => lang.language === newTabValue
         )[0];
         action.setSelectedVariant(newLanguage.variant.toLowerCase());
-      }
-      if (currentLanguage && includeSample) {
-        newLanguage.sample = newTabValue;
-        action.setSelectedSample(newTabValue.toLowerCase());
+        action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
     }
@@ -151,7 +156,7 @@ function TabContent({
   lazy,
   children,
   selectedValue,
-}: TabProps & ReturnType<typeof useTabs>): React.JSX.Element | null {
+}: CodeTabsProps & ReturnType<typeof useTabs>): React.JSX.Element | null {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(
     Boolean
   ) as ReactElement<TabItemProps>[];
@@ -177,7 +182,7 @@ function TabContent({
   );
 }
 
-function TabsComponent(props: TabProps & Props): React.JSX.Element {
+function TabsComponent(props: CodeTabsProps & Props): React.JSX.Element {
   const tabs = useTabs(props);
   const { className } = props;
 
@@ -191,7 +196,9 @@ function TabsComponent(props: TabProps & Props): React.JSX.Element {
   );
 }
 
-export default function CodeTabs(props: TabProps & Props): React.JSX.Element {
+export default function CodeTabs(
+  props: CodeTabsProps & Props
+): React.JSX.Element {
   const isBrowser = useIsBrowser();
   return (
     <TabsComponent