update: change preferredLocale in local storage follow switch locale button

tanthanhdev · tanthanhdev · commit 5b24309ca95f · 2025-06-07T07:57:38.000+07:00
diff --git a/.next/trace b/.next/trace
@@ -0,0 +1 @@
+[{"name":"next-dev","duration":336397,"timestamp":257582122435,"id":1,"tags":{},"startTime":1749254546436,"traceId":"a69c61c90c63e8b2"}]
diff --git a/website/src/app/[locale]/blog/[slug]/page.tsx b/website/src/app/[locale]/blog/[slug]/page.tsx
@@ -5,11 +5,12 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import MarkdownContent from "@/components/blog/markdown-content";
 import { getContentAsBlogPosts, findAvailableTranslations } from "@/lib/content-mapper";
-import { Globe, ChevronDown, ChevronUp, Code, CalendarClock } from "lucide-react";
+import { Code, CalendarClock } from "lucide-react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import 'highlight.js/styles/github-dark.css';
 import CodeSnippet from "@/components/blog/code-snippet";
 import { generateDefaultMetadata } from '@/lib/metadata';
+import LanguageSwitcher from "@/components/blog/language-switcher";
 
 type Params = Promise<{
   locale: Locale;
@@ -131,25 +132,11 @@ export default async function BlogPostPage({ params }: { params: Params }) {
         </Link>
 
         {availableTranslations.length > 1 && (
-          <div className="flex items-center gap-2">
-            <Globe size={16} className="text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">{t.blog.translatedContent}:</span>
-            <div className="flex gap-2">
-              {availableTranslations.map(translation => (
-                <Link
-                  key={translation.locale}
-                  href={`/${translation.locale}/blog/${translation.slug}`}
-                  className={`text-sm px-2 py-1 rounded cursor-pointer ${
-                    translation.locale === locale
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
-                  }`}
-                >
-                  {t.languages[translation.locale as keyof typeof t.languages] || translation.locale.toUpperCase()}
-                </Link>
-              ))}
-            </div>
-          </div>
+          <LanguageSwitcher
+            currentLocale={locale}
+            translations={translations}
+            availableTranslations={availableTranslations}
+          />
         )}
       </div>
 
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { defaultLocale } from '@/lib/i18n/settings';
-import Image from "next/image";
+import { setCookie } from '@/lib/cookies';
 
 export default function Home() {
   const router = useRouter();
@@ -14,6 +14,8 @@ export default function Home() {
 
     if (savedLocale) {
       // If there is, use the saved locale
+      // Also ensure the cookie is set
+      setCookie('preferredLocale', savedLocale, 365);
       router.push(`/${savedLocale}`);
     } else {
       // If not, try to determine the locale from the browser
@@ -23,6 +25,9 @@ export default function Home() {
       // Save to localStorage for future use
       localStorage.setItem('preferredLocale', locale);
 
+      // Also set a cookie for the middleware
+      setCookie('preferredLocale', locale, 365);
+
       // Redirect to the page with the determined locale
       router.push(`/${locale}`);
     }
diff --git a/website/src/components/blog/language-switcher.tsx b/website/src/components/blog/language-switcher.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import { Locale } from '@/lib/i18n/settings';
+import { useEffect } from 'react';
+import { setCookie } from '@/lib/cookies';
+import { Globe } from 'lucide-react';
+
+interface LanguageSwitcherProps {
+  currentLocale: Locale;
+  translations: any;
+  availableTranslations: Array<{
+    locale: string;
+    slug: string;
+  }>;
+}
+
+export default function LanguageSwitcher({
+  currentLocale,
+  translations,
+  availableTranslations,
+}: LanguageSwitcherProps) {
+  const t = translations.common;
+
+  // Update preferredLocale in localStorage when the component mounts
+  useEffect(() => {
+    // Update localStorage and cookie with the current locale
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('preferredLocale', currentLocale);
+      setCookie('preferredLocale', currentLocale, 365); // Valid for 1 year
+    }
+  }, [currentLocale]);
+
+  // Handle language change (for analytics or other side effects)
+  const handleLanguageClick = (newLocale: string) => {
+    // Update localStorage and cookie
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('preferredLocale', newLocale);
+      setCookie('preferredLocale', newLocale, 365); // Valid for 1 year
+    }
+  };
+
+  if (availableTranslations.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <Globe size={16} className="text-muted-foreground" />
+      <span className="text-sm text-muted-foreground">{t.blog.translatedContent}:</span>
+      <div className="flex gap-2">
+        {availableTranslations.map(translation => (
+          <Link
+            key={translation.locale}
+            href={`/${translation.locale}/blog/${translation.slug}`}
+            onClick={() => handleLanguageClick(translation.locale)}
+            className={`text-sm px-2 py-1 rounded cursor-pointer ${
+              translation.locale === currentLocale
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+            }`}
+          >
+            {t.languages[translation.locale as keyof typeof t.languages] || translation.locale.toUpperCase()}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx
@@ -9,6 +9,8 @@ import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/s
 import { Menu } from "lucide-react";
 import { siteConfig } from "@/config/site";
 import { Locale } from "@/lib/i18n/settings";
+import { useRouter } from "next/navigation";
+import { setCookie } from "@/lib/cookies";
 
 interface HeaderProps {
   translations: any;
@@ -18,11 +20,24 @@ interface HeaderProps {
 export default function Header({ translations, locale }: HeaderProps) {
   const t = translations.common;
   const { theme, setTheme } = useTheme();
+  const router = useRouter();
 
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
   };
 
+  const handleLanguageChange = (newLocale: Locale) => {
+    // Save the preferred locale to localStorage
+    if (typeof window !== "undefined") {
+      localStorage.setItem('preferredLocale', newLocale);
+
+      // Set a cookie for the middleware (which can't access localStorage)
+      setCookie('preferredLocale', newLocale, 365); // Valid for 1 year
+    }
+
+    router.push(`/${newLocale}`);
+  };
+
   return (
     <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="w-full flex h-16 md:h-20 items-center px-4 md:px-6 lg:px-8">
@@ -52,24 +67,22 @@ export default function Header({ translations, locale }: HeaderProps) {
                 {theme === "dark" ? <SunIcon size={18} /> : <MoonIcon size={18} />}
               </Button>
               <div className="flex items-center gap-1 ml-2 sm:ml-4 border rounded-full px-1 py-0.5">
-                <Link href="/en" locale="en" className="cursor-pointer">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className={`rounded-full px-2 sm:px-3 text-xs sm:text-sm h-7 sm:h-8 ${locale === "en" ? "bg-primary text-primary-foreground" : ""}`}
-                  >
-                    EN
-                  </Button>
-                </Link>
-                <Link href="/vi" locale="vi" className="cursor-pointer">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className={`rounded-full px-2 sm:px-3 text-xs sm:text-sm h-7 sm:h-8 ${locale === "vi" ? "bg-primary text-primary-foreground" : ""}`}
-                  >
-                    VI
-                  </Button>
-                </Link>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={`rounded-full px-2 sm:px-3 text-xs sm:text-sm h-7 sm:h-8 ${locale === "en" ? "bg-primary text-primary-foreground" : ""}`}
+                  onClick={() => handleLanguageChange("en")}
+                >
+                  EN
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={`rounded-full px-2 sm:px-3 text-xs sm:text-sm h-7 sm:h-8 ${locale === "vi" ? "bg-primary text-primary-foreground" : ""}`}
+                  onClick={() => handleLanguageChange("vi")}
+                >
+                  VI
+                </Button>
               </div>
             </div>
             <Sheet>
@@ -104,18 +117,20 @@ export default function Header({ translations, locale }: HeaderProps) {
                     <div className="space-y-3">
                       <h3 className="text-sm uppercase text-muted-foreground font-medium">{t.languages?.title || 'Languages'}</h3>
                       <div className="flex flex-col space-y-2">
-                        <Link href="/en" locale="en" className="cursor-pointer">
-                          <div className={`flex items-center px-3 py-2 rounded-lg ${locale === "en" ? "bg-primary/10 text-primary" : ""}`}>
-                            <span className="text-base">{t.languages?.english || 'English'}</span>
-                            {locale === "en" && <span className="ml-auto text-sm bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>}
-                          </div>
-                        </Link>
-                        <Link href="/vi" locale="vi" className="cursor-pointer">
-                          <div className={`flex items-center px-3 py-2 rounded-lg ${locale === "vi" ? "bg-primary/10 text-primary" : ""}`}>
-                            <span className="text-base">{t.languages?.vietnamese || 'Tiếng Việt'}</span>
-                            {locale === "vi" && <span className="ml-auto text-sm bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>}
-                          </div>
-                        </Link>
+                        <div
+                          className={`flex items-center px-3 py-2 rounded-lg cursor-pointer ${locale === "en" ? "bg-primary/10 text-primary" : ""}`}
+                          onClick={() => handleLanguageChange("en")}
+                        >
+                          <span className="text-base">{t.languages?.english || 'English'}</span>
+                          {locale === "en" && <span className="ml-auto text-sm bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>}
+                        </div>
+                        <div
+                          className={`flex items-center px-3 py-2 rounded-lg cursor-pointer ${locale === "vi" ? "bg-primary/10 text-primary" : ""}`}
+                          onClick={() => handleLanguageChange("vi")}
+                        >
+                          <span className="text-base">{t.languages?.vietnamese || 'Tiếng Việt'}</span>
+                          {locale === "vi" && <span className="ml-auto text-sm bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>}
+                        </div>
                       </div>
                     </div>
                     <div className="space-y-3">
diff --git a/website/src/lib/cookies.ts b/website/src/lib/cookies.ts
@@ -0,0 +1,41 @@
+/**
+ * Set a cookie with the given name, value, and expiry days
+ */
+export function setCookie(name: string, value: string, days: number) {
+  if (typeof document === 'undefined') return;
+
+  let expires = '';
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = `; expires=${date.toUTCString()}`;
+  }
+
+  document.cookie = `${name}=${value || ''}${expires}; path=/; SameSite=Lax;`;
+}
+
+/**
+ * Get a cookie value by name
+ */
+export function getCookie(name: string): string | null {
+  if (typeof document === 'undefined') return null;
+
+  const nameEQ = `${name}=`;
+  const ca = document.cookie.split(';');
+
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+
+  return null;
+}
+
+/**
+ * Delete a cookie by name
+ */
+export function deleteCookie(name: string) {
+  if (typeof document === 'undefined') return;
+  document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; SameSite=Lax;`;
+}
diff --git a/website/src/middleware.ts b/website/src/middleware.ts
@@ -4,6 +4,9 @@ import { defaultLocale, locales } from '@/lib/i18n/settings';
 // List of countries using Vietnamese as the main language
 const VIETNAMESE_COUNTRIES = ['VN', 'VNM'];
 
+// Cookie name for storing preferred locale
+const PREFERRED_LOCALE_COOKIE = 'preferredLocale';
+
 // Middleware executed before each request
 export function middleware(request: NextRequest) {
   // Get the pathname from the URL
@@ -29,11 +32,17 @@ export function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
+  // Get preferred locale from cookies
+  const preferredLocale = request.cookies.get(PREFERRED_LOCALE_COOKIE)?.value;
+
   // If it's the root path, redirect to the appropriate locale
   if (pathname === '/') {
-    // Get country code from x-vercel-ip-country header (if running on Vercel)
-    // or cf-ipcountry header (if running on Cloudflare)
-    // or x-country header (if you configure a different CDN)
+    // If user has a preferred locale saved, use that
+    if (preferredLocale && locales.includes(preferredLocale as any)) {
+      return NextResponse.redirect(new URL(`/${preferredLocale}`, request.url));
+    }
+
+    // Otherwise, try to determine locale from country code
     const countryCode =
       request.headers.get('x-vercel-ip-country') ||
       request.headers.get('cf-ipcountry') ||
@@ -48,7 +57,12 @@ export function middleware(request: NextRequest) {
     return NextResponse.redirect(new URL(`/${locale}`, request.url));
   }
 
-  // If pathname doesn't have locale, add default locale
+  // For other paths without locale, check preferred locale first
+  if (preferredLocale && locales.includes(preferredLocale as any)) {
+    return NextResponse.redirect(new URL(`/${preferredLocale}${pathname}`, request.url));
+  }
+
+  // If no preferred locale, add default locale
   const newUrl = new URL(`/${defaultLocale}${pathname}`, request.url);
 
   // Redirect to URL with default locale

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+[{"name":"next-dev","duration":336397,"timestamp":257582122435,"id":1,"tags":{},"startTime":1749254546436,"traceId":"a69c61c90c63e8b2"}]`