Save and use user's locale preference

This commit is contained in:
Timothy Armes
2024-09-30 14:53:24 +02:00
parent 03f5ea3454
commit ee031588ff
13 changed files with 467 additions and 367 deletions
@@ -1,12 +1,14 @@
"use client";
import { useSetAtom } from "jotai";
import { useSession } from "next-auth/react";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { FaGithub, FaRegEnvelope } from "react-icons/fa";
import { MdOutlinePrivacyTip } from "react-icons/md";
import { burgerMenuIsOpenAtom } from "@/atoms";
import { setUserLocale } from "@/server/setUserLocale";
import { Link, usePathname, useRouter } from "@/utils/routing";
import ThemeSwitcher from "./ThemeSwitcher";
@@ -17,14 +19,19 @@ export default function Footer() {
const router = useRouter();
const pathname = usePathname();
const params = useParams();
const { status } = useSession();
const changeLanguage = (lang: string) => {
// Store the user's locale preference if they're authenticated
if (status === "authenticated") setUserLocale(lang);
// Redirect to the same page with the new locale
router.push({ pathname, params: params as any }, { locale: lang });
};
return (
<footer
className="fixed bottom-0 z-30 flex h-12 w-[100vw] flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
className="fixed bottom-0 z-[1000] flex h-12 w-[100vw] flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
data-test="footer"
>
<div
+6 -3
View File
@@ -6,6 +6,7 @@ import { Inter, Julius_Sans_One } from "next/font/google";
import { notFound } from "next/navigation";
import Script from "next/script";
import { LocaleChecker } from "@/components/LocaleChecker";
import "@/css/globals.css";
import Providers from "@/providers";
@@ -70,9 +71,11 @@ export default async function RootLayout({
<body>
<Providers>
<NextIntlClientProvider locale={locale} messages={messages}>
<div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
{children}
</div>
<LocaleChecker>
<div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
{children}
</div>
</LocaleChecker>
<Footer />
</NextIntlClientProvider>