breakout require namespaces logic

Author: pettinarip

src/components/Translation.tsx

@@ -2,8 +2,9 @@ import htmr from "htmr"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+
 import InlineLink from "./Link"
-import { getRequiredNamespacesForPath } from "@/lib/utils/translations"
 
 interface Props {
   id: string
@@ -20,7 +21,7 @@ const transform = {
 // fallback to English if it doesn't find the given key in the current language
 const Translation = ({ id, options }: Props) => {
   const { asPath } = useRouter()
-  const requiredNamespaces = getRequiredNamespacesForPath(asPath)
+  const requiredNamespaces = getRequiredNamespacesForPage(asPath)
 
   const { t } = useTranslation(requiredNamespaces)
   const translatedText = t(id, options)

src/lib/utils/translations.ts

@@ -18,26 +18,26 @@ export const getLocaleForNumberFormat = (locale: Lang): Lang =>
 
 export const isLang = (lang: string) => {
   return i18nConfigs.map((language) => language.code).includes(lang)
-} 
-
-export const getRequiredNamespacesForPath = (path: string, layout?: string | undefined) => {
-  let requiredNamespaces: string[] = ["common"]
+}
 
-  if (layout === "docs") {
-    requiredNamespaces = [...requiredNamespaces, 'page-developers-docs']
-  }
+export const getRequiredNamespacesForPage = (
+  path: string,
+  layout?: string | undefined
+) => {
+  const baseNamespaces = ["common"]
 
-  if (layout === 'use-cases') {
-    requiredNamespaces = [...requiredNamespaces, "template-usecase", "learn-quizzes"]
-  }
+  const requiredNamespacesForPath = getRequiredNamespacesForPath(path)
+  const requiredNamespacesForLayout = getRequiredNamespacesForLayout(layout)
 
-  if (layout === "upgrade") {
-    requiredNamespaces = [...requiredNamespaces, "page-upgrades", "page-upgrades-index"]
-  }
+  return [
+    ...baseNamespaces,
+    ...requiredNamespacesForPath,
+    ...requiredNamespacesForLayout,
+  ]
+}
 
-  if (layout === "tutorial") {
-    requiredNamespaces = [...requiredNamespaces, "page-developers-tutorials"]
-  }
+const getRequiredNamespacesForPath = (path: string) => {
+  let requiredNamespaces: string[] = []
 
   if (path.startsWith("/community")) {
     requiredNamespaces = [...requiredNamespaces, "page-community"]
@@ -84,3 +84,32 @@ export const getRequiredNamespacesForPath = (path: string, layout?: string | und
   return requiredNamespaces
 }
 
+const getRequiredNamespacesForLayout = (layout?: string) => {
+  let requiredNamespaces: string[] = []
+
+  if (layout === "docs") {
+    requiredNamespaces = [...requiredNamespaces, "page-developers-docs"]
+  }
+
+  if (layout === "use-cases") {
+    requiredNamespaces = [
+      ...requiredNamespaces,
+      "template-usecase",
+      "learn-quizzes",
+    ]
+  }
+
+  if (layout === "upgrade") {
+    requiredNamespaces = [
+      ...requiredNamespaces,
+      "page-upgrades",
+      "page-upgrades-index",
+    ]
+  }
+
+  if (layout === "tutorial") {
+    requiredNamespaces = [...requiredNamespaces, "page-developers-tutorials"]
+  }
+
+  return requiredNamespaces
+}

src/pages/[...slug].tsx

@@ -19,6 +19,7 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLastModifiedDate } from "@/lib/utils/gh"
 import { getContent, getContentBySlug } from "@/lib/utils/md"
 import { remapTableOfContents } from "@/lib/utils/toc"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import {
   docsComponents,
@@ -39,7 +40,6 @@ import {
 import rehypeHeadingIds from "@/lib/rehype/rehypeHeadingIds"
 import rehypeImg from "@/lib/rehype/rehypeImg"
 import remarkInferToc from "@/lib/rehype/remarkInferToc"
-import { getRequiredNamespacesForPath } from "@/lib/utils/translations"
 
 const layoutMapping = {
   static: StaticLayout,
@@ -150,7 +150,7 @@ export const getStaticProps: GetStaticProps<Props, Params> = async (
   }
 
   // load i18n required namespaces for the given page
-  const requiredNamespaces = getRequiredNamespacesForPath(originalSlug, layout)
+  const requiredNamespaces = getRequiredNamespacesForPage(originalSlug, layout)
 
   return {
     props: {