From c9a594100bfd14c332651c78243f79f789de9640 Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Sun, 13 Apr 2025 18:12:29 +0800
Subject: [PATCH] refactor & perf of files `datesets/Doc.tsx` and
 `template.xx.mdx` (#17951)

---
 web/app/(commonLayout)/datasets/Doc.tsx       | 24 ++++++++++---------
 .../datasets/template/template.en.mdx         |  5 ++++
 .../datasets/template/template.ja.mdx         |  5 ++++
 .../datasets/template/template.zh.mdx         |  5 ++++
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Doc.tsx b/web/app/(commonLayout)/datasets/Doc.tsx
index 57d4b8dfef..e79adbccd5 100644
--- a/web/app/(commonLayout)/datasets/Doc.tsx
+++ b/web/app/(commonLayout)/datasets/Doc.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiListUnordered } from '@remixicon/react'
@@ -67,6 +67,17 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
     }
   }
 
+  const Template = useMemo(() => {
+    switch (locale) {
+      case LanguagesSupported[1]:
+        return <TemplateZh apiBaseUrl={apiBaseUrl} />
+      case LanguagesSupported[7]:
+        return <TemplateJa apiBaseUrl={apiBaseUrl} />
+      default:
+        return <TemplateEn apiBaseUrl={apiBaseUrl} />
+    }
+  }, [apiBaseUrl, locale])
+
   return (
     <div className="flex">
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
@@ -107,16 +118,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           )}
       </div>
       <article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
-        {(() => {
-          switch (locale) {
-            case LanguagesSupported[1]:
-              return <TemplateZh apiBaseUrl={apiBaseUrl} />
-            case LanguagesSupported[7]:
-              return <TemplateJa apiBaseUrl={apiBaseUrl} />
-            default:
-              return <TemplateEn apiBaseUrl={apiBaseUrl} />
-          }
-        })()}
+        {Template}
       </article>
     </div>
   )
diff --git a/web/app/(commonLayout)/datasets/template/template.en.mdx b/web/app/(commonLayout)/datasets/template/template.en.mdx
index ca86c7e6d6..4faf26058e 100644
--- a/web/app/(commonLayout)/datasets/template/template.en.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.en.mdx
@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'
 
diff --git a/web/app/(commonLayout)/datasets/template/template.ja.mdx b/web/app/(commonLayout)/datasets/template/template.ja.mdx
index 45f3adfc4d..a5e560df8c 100644
--- a/web/app/(commonLayout)/datasets/template/template.ja.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.ja.mdx
@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'
 
diff --git a/web/app/(commonLayout)/datasets/template/template.zh.mdx b/web/app/(commonLayout)/datasets/template/template.zh.mdx
index 20511b8cf7..8ff82ca1fb 100644
--- a/web/app/(commonLayout)/datasets/template/template.zh.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.zh.mdx
@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'