feat: static paths from site instead of uri

lsst-epo · Aug 27, 2024 · da936a3 · da936a3
1 parent fa4266b
commit da936a3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/components/global/Header/LanguageSelect/index.js b/components/global/Header/LanguageSelect/index.js
@@ -1,35 +1,59 @@
 import { useTransition } from "react";
 import PropTypes from "prop-types";
-import { useRouter, usePathname } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import * as Styled from "./styles";
-import { fallbackLng } from "@/lib/i18n/settings";
+import { fallbackLng, languages } from "@/lib/i18n/settings";
+
+/** stand-in for useParams() in app router */
+const getParams = (pathname) => {
+  const uriSegments = pathname.split("/").filter((segment) => segment !== "");
+
+  if (uriSegments.length === 0) {
+    return { locale: fallbackLng, uriSegments: [] };
+  }
+
+  if (languages.includes(uriSegments[0])) {
+    const locale = uriSegments.shift();
+    return { locale, uriSegments };
+  } else {
+    return { locale: fallbackLng, uriSegments: [...uriSegments] };
+  }
+};
+
+const filterSearchParams = (searchParams) => {
+  const filteredParams = [];
+
+  searchParams.forEach((value, key) => {
+    if (key !== "locale" && key !== "uriSegments") {
+      filteredParams.push(`${key}=${value}`);
+    }
+  });
+
+  return `?${filteredParams.join("&")}`;
+};
 
 export default function LanguageSelect({ id }) {
   const router = useRouter();
-  const {
-    t,
-    i18n: { language, changeLanguage },
-  } = useTranslation();
+  const pathname = usePathname();
+  const { locale, uriSegments } = getParams(pathname);
+  const searchParams = useSearchParams();
+  const { t, i18n } = useTranslation();
   const [isPending, startTransition] = useTransition();
 
-  const isDefaultLocale = fallbackLng.includes(language);
-  const path = usePathname().split("/");
-  path.shift();
-
-  if (!isDefaultLocale) {
-    path.shift();
-  }
+  const isDefaultLocale = fallbackLng.includes(locale);
 
   const newLocale = () => {
     return isDefaultLocale ? "es" : "en";
   };
 
-  const newRoute = `/${newLocale()}/${path.join("/")}`;
+  const newRoute = `/${newLocale()}/${uriSegments.join(
+    "/"
+  )}${filterSearchParams(searchParams)}`;
 
   const handleClick = () => {
     startTransition(() => {
-      changeLanguage(newLocale());
+      i18n.changeLanguage(newLocale());
       router.push(newRoute, {
         scroll: false,
       });

diff --git a/lib/api/entries.js b/lib/api/entries.js
@@ -12,6 +12,7 @@ import { glossaryTermFragment } from "@/lib/api/fragments/glossary-term";
 import { studentPageFragment } from "./fragments/student-page";
 import { educatorPageFragment } from "./fragments/educator-page";
 import { investigationLandingPageFragment } from "./fragments/investigation-landing-page";
+import { getLocaleString } from "../utils";
 
 function dataListQueryify(fragment) {
   return gql`
@@ -68,20 +69,23 @@ async function getData(ENV) {
         ) {
           uri
           level
+          siteHandle
         }
         homepage: entries(
           site: "*"
           section: ["homepage"]
           type: ["not", "redirectPage"]
         ) {
           uri
+          siteHandle
         }
         search: entries(
           site: "*"
           section: ["searchResults"]
           type: ["not", "redirectPage"]
         ) {
           uri
+          siteHandle
         }
       }
     `;
@@ -96,6 +100,7 @@ async function getData(ENV) {
           type: ["not", "redirectPage"]
         ) {
           uri
+          siteHandle
         }
       }
     `;
@@ -109,16 +114,12 @@ export async function getAllEntries() {
   const data = await getData(ENV);
   return data.entries
     .filter(({ uri }) => uri != null)
-    .map(({ uri, sectionHandle }) => {
-      const isEs = uri.indexOf("es/") === 0;
+    .map(({ uri, sectionHandle, siteHandle }) => {
       const segments = uri.split("/");
 
-      if (isEs) {
-        segments.shift();
-      }
       return {
         params: {
-          locale: isEs ? "es" : "en",
+          locale: getLocaleString(siteHandle),
           uriSegments: segments,
           uri,
           sectionHandle,

diff --git a/pages/[locale]/[[...uriSegments]].js b/pages/[locale]/[[...uriSegments]].js
@@ -127,10 +127,6 @@ export async function getStaticProps({
     uri = previewData.uriSegments.join("/");
     previewToken = previewData?.previewToken;
   } else if (uriSegments && uriSegments.length) {
-    if (isEspanol) {
-      uriSegments.unshift("es");
-    }
-
     uri = uriSegments.join("/");
   }