set code sample text on initial state load

PaloAltoNetworks · Jan 22, 2024 · 0f05ee1 · 0f05ee1
1 parent 9b6e652
commit 0f05ee1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx b/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) {

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts b/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 "";
+}