Merge pull request #142 from ethereum/require-namespaces-refactor

Require namespaces logic refactor

Author: pettinarip

src/components/Translation.tsx

@@ -2,7 +2,7 @@ import htmr from "htmr"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import { getRequiredNamespacesForPath } from "@/lib/utils/translations"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import InlineLink from "./Link"
 
@@ -21,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/404.tsx

@@ -4,8 +4,8 @@ import type { SSRConfig } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { Box, Flex, Heading, Text } from "@chakra-ui/react"
 
-import { getRequiredNamespacesForPath } from "@/lib/utils/translations"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import InlineLink from "../components/Link"
 import Translation from "../components/Translation"
@@ -16,7 +16,7 @@ export const getStaticProps = (async (context) => {
   const { locale } = context
 
   // load i18n required namespaces for the given page
-  const requiredNamespaces = getRequiredNamespacesForPath("/")
+  const requiredNamespaces = getRequiredNamespacesForPage("/")
   const lastDeployDate = getLastDeployDate()
 
   return {

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

@@ -28,7 +28,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 { getRequiredNamespacesForPath } from "@/lib/utils/translations"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import {
   docsComponents,
@@ -152,7 +152,7 @@ export const getStaticProps = (async (context) => {
   }
 
   // load i18n required namespaces for the given page
-  const requiredNamespaces = getRequiredNamespacesForPath(slug, layout)
+  const requiredNamespaces = getRequiredNamespacesForPage(slug, layout)
 
   return {
     props: {