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[] = [
   {
@@ -179,13 +182,13 @@ function CodeSnippets({ postman, codeSamples }: Props) {
   // Merge user-defined langs into languageSet
   const mergedLangs = mergeCodeSampleLanguage(
     merge(filteredLanguageSet, langs),
-    codeSamples
+    codeSamples,
   );
 
   // Read defaultLang from localStorage
   const defaultLang: Language[] = mergedLangs.filter(
     (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+      lang.language === localStorage.getItem("docusaurus.tab.code-samples"),
   );
   const [selectedVariant, setSelectedVariant] = useState<string | undefined>();
   const [selectedSample, setSelectedSample] = useState<string | undefined>();
@@ -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) {
@@ -236,11 +232,11 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     } else if (language && !language.options) {
       const langSource = mergedLangs.filter(
-        (lang) => lang.language === language.language
+        (lang) => lang.language === language.language,
       );
 
       // Merges user-defined language with default languageSet
@@ -269,7 +265,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     } else {
       setCodeText("");
@@ -312,7 +308,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     }
   });
@@ -327,7 +323,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
       selectedSample !== language.sample
     ) {
       const sampleIndex = language.samples.findIndex(
-        (smp) => smp === selectedSample
+        (smp) => smp === selectedSample,
       );
       setCodeSampleCodeText(language.samplesSources[sampleIndex]);
     }

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

@@ -9,17 +9,17 @@ import { CodeSample, Language } from "./code-snippets-types";
 
 export function mergeCodeSampleLanguage(
   languages: Language[],
-  codeSamples: CodeSample[]
+  codeSamples: CodeSample[],
 ): Language[] {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
-      ({ lang }) => lang === language.codeSampleLanguage
+      ({ lang }) => lang === language.codeSampleLanguage,
     );
 
     if (languageCodeSamples.length) {
       const samples = languageCodeSamples.map(({ lang }) => lang);
       const samplesLabels = languageCodeSamples.map(
-        ({ label, lang }) => label || lang
+        ({ label, lang }) => label || lang,
       );
       const samplesSources = languageCodeSamples.map(({ source }) => source);
 
@@ -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 "";
+}