fix locale saving in cookie and prevent scroll reset on locale change

linobino1 · Aug 28, 2024 · a6afc3d · a6afc3d
1 parent d4ea3a4
commit a6afc3d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 23 deletions.
diff --git a/app/components/LanguageSwitch/index.tsx b/app/components/LanguageSwitch/index.tsx
@@ -31,6 +31,7 @@ export default function LanguageSwitch({ className }: Props) {
               rel="alternate"
               hrefLang={lang}
               onClick={() => i18n.changeLanguage(lang)}
+              preventScrollReset
               reloadDocument
             >
               {lang.toUpperCase()}

diff --git a/app/cookie.ts b/app/cookie.ts
@@ -3,4 +3,5 @@ import { createCookie } from "@remix-run/node";
 export let i18nCookie = createCookie("i18n", {
   sameSite: "strict",
   path: "/",
+  maxAge: 60 * 60 * 24 * 365,
 });
diff --git a/app/root.tsx b/app/root.tsx
@@ -26,9 +26,11 @@ import type { MovieTheater, WithContext } from "schema-dts";
 import { locationSchema } from "cms/structured-data/location";
 import { addContext } from "cms/structured-data";
 import { cacheControlShortWithSWR } from "./util/cache-control/cacheControlShortWithSWR";
-import { returnLanguageIfSupported } from "./i18n";
+import { returnLanguageIfSupported, supportedLngs } from "./i18n";
 import { getHreflangLinks } from "./util/getHreflangLinks";
 import { localizeTo } from "./components/localized-link/util/localizeTo";
+import { i18nCookie } from "./cookie";
+import { useChangeLanguage } from "remix-i18next";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -57,17 +59,21 @@ export async function loader({
 
   const locale = urlLang as string;
 
-  const site = await payload.findGlobal({
-    slug: "site",
-    depth: 3,
-    locale,
-  });
+  const [site, serializedI18nCookie] = await Promise.all([
+    payload.findGlobal({
+      slug: "site",
+      depth: 3,
+      locale,
+    }),
+    i18nCookie.serialize(locale),
+  ]);
 
   return json(
     {
       user,
       site,
       locale,
+      serializedI18nCookie,
       publicKeys: {
         PAYLOAD_PUBLIC_SERVER_URL: environment().PAYLOAD_PUBLIC_SERVER_URL,
         HCAPTCHA_SITE_KEY: environment().HCAPTCHA_SITE_KEY,
@@ -142,22 +148,20 @@ export const handle = {
   i18n: "common", // i18n namespace
 };
 
-export function useChangeLanguage(locale: string) {
-  const { i18n } = useTranslation();
-  useEffect(() => {
-    i18n.changeLanguage(locale);
-    document.cookie = `i18n=${locale}; path=/; samesite=strict`;
-  }, [locale, i18n]);
-}
-
 export default function App() {
   // Get the locale from the loader
-  const { locale, publicKeys, site } = useLoaderData<typeof loader>();
+  const { locale, serializedI18nCookie, publicKeys, site } =
+    useLoaderData<typeof loader>();
   const { t, i18n } = useTranslation();
 
   // handle locale change
   useChangeLanguage(locale);
 
+  // Set locale cookie
+  useEffect(() => {
+    document.cookie = serializedI18nCookie;
+  }, [serializedI18nCookie]);
+
   const structuredData: WithContext<MovieTheater> = addContext(
     locationSchema(site)
   );
@@ -181,7 +185,17 @@ export default function App() {
           }}
         />
         <Outlet />
-        <ScrollRestoration />
+        <ScrollRestoration
+          getKey={(location) => {
+            // strip locale from pathname
+            const regex = new RegExp(`^/(${supportedLngs.join("|")})`);
+            return (
+              location.pathname.replace(regex, "/").replace("//", "/") +
+              location.search +
+              location.hash
+            );
+          }}
+        />
         <Scripts />
         {false && (
           <div className={classes.cookiesWrapper}>

diff --git a/app/routes/_main.news._index/route.tsx b/app/routes/_main.news._index/route.tsx
@@ -9,7 +9,6 @@ import { useTranslation } from "react-i18next";
 import { Page } from "~/components/Page";
 import { mergeMeta, pageMeta } from "~/util/pageMeta";
 import classes from "./index.module.css";
-import i18next from "~/i18next.server";
 import Pagination from "~/components/Pagination";
 import PostPreview from "~/components/PostPreview";
 import { JsonLd } from "cms/structured-data";
@@ -130,12 +129,15 @@ export default function Index() {
             <>
               {JsonLd(postsListSchema(posts.docs))}
               <ul className={classes.posts}>
-                {posts.docs.map((post) => (
-                  <li key={post.slug}>
-                    <PostPreview post={post} />
-                    <hr />
-                  </li>
-                ))}
+                {posts.docs
+                  .concat(posts.docs)
+                  .concat(posts.docs)
+                  .map((post, index) => (
+                    <li key={index}>
+                      <PostPreview post={post} />
+                      <hr />
+                    </li>
+                  ))}
               </ul>
             </>
           ) : (