From 4576b10da29c2785bd020a39684305af54c0758b Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Tue, 14 May 2024 17:13:41 +0800
Subject: [PATCH] Add lang button

---
 src/components/AppBar/Profile.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/AppBar/Profile.tsx b/src/components/AppBar/Profile.tsx
index 7b48190..9fbe8e5 100644
--- a/src/components/AppBar/Profile.tsx
+++ b/src/components/AppBar/Profile.tsx
@@ -10,7 +10,7 @@ import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import { signOut } from "next-auth/react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 type Props = Pick<AppBarProps, "avatarImageSrc" | "profileName">;
 
@@ -26,8 +26,17 @@ const Profile: React.FC<Props> = ({ avatarImageSrc, profileName }) => {
     setProfileMenuAnchorEl(undefined);
   };
 
-  const { t } = useTranslation("login");
+  const { t, i18n: { language } } = useTranslation("login");
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams()
+
+  const onLangClick = React.useCallback((lang: string) => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set("lang", lang)
+    router.replace(`${pathname}?${params.toString()}`);
+    window.location.reload();
+  }, [router, pathname, searchParams]);
 
   return (
     <>
@@ -54,7 +63,9 @@ const Profile: React.FC<Props> = ({ avatarImageSrc, profileName }) => {
           {profileName}
         </Typography>
         <Divider />
-        <MenuItem onClick={() => {router.replace("/settings/changepassword")}}>{t("Change Password")}</MenuItem>
+        <MenuItem onClick={() => { router.replace("/settings/changepassword") }}>{t("Change Password")}</MenuItem>
+        {language === "zh" && <MenuItem onClick={() => { onLangClick("en") }}>{t("Change To English Version")}</MenuItem>}
+        {language === "en" && <MenuItem onClick={() => { onLangClick("zh") }}>{t("Change To Chinese Version")}</MenuItem>}
         <MenuItem onClick={() => signOut()}>{t("Sign out")}</MenuItem>
       </Menu>
     </>