From 49900050f7901bcb0dcfa6c515a5463d186850f8 Mon Sep 17 00:00:00 2001
From: lleohao <12764126+lleohao@users.noreply.github.com>
Date: Tue, 10 Sep 2024 08:52:52 +0000
Subject: [PATCH] feat: save language to BE

---
 apps/client/package.json                      |  1 -
 .../locales/{en => en-US}/translation.json    |  0
 .../locales/{zh => zh-CN}/translation.json    |  0
 .../user/components/account-languate.tsx      | 23 +++++++++++++++----
 .../src/features/user/types/user.types.ts     | 12 ++++++----
 .../src/features/user/user-provider.tsx       |  5 ++++
 apps/client/src/i18n.ts                       |  9 +-------
 .../src/core/user/dto/update-user.dto.ts      |  4 ++++
 apps/server/src/core/user/user.service.ts     | 11 +++++++++
 pnpm-lock.yaml                                | 12 +---------
 10 files changed, 48 insertions(+), 29 deletions(-)
 rename apps/client/public/locales/{en => en-US}/translation.json (100%)
 rename apps/client/public/locales/{zh => zh-CN}/translation.json (100%)

diff --git a/apps/client/package.json b/apps/client/package.json
index 563b64b7..ac4de98d 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -28,7 +28,6 @@
     "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
     "i18next": "^23.14.0",
-    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.1",
     "jotai": "^2.9.3",
     "jotai-optics": "^0.4.0",
diff --git a/apps/client/public/locales/en/translation.json b/apps/client/public/locales/en-US/translation.json
similarity index 100%
rename from apps/client/public/locales/en/translation.json
rename to apps/client/public/locales/en-US/translation.json
diff --git a/apps/client/public/locales/zh/translation.json b/apps/client/public/locales/zh-CN/translation.json
similarity index 100%
rename from apps/client/public/locales/zh/translation.json
rename to apps/client/public/locales/zh-CN/translation.json
diff --git a/apps/client/src/features/user/components/account-languate.tsx b/apps/client/src/features/user/components/account-languate.tsx
index 0056dbce..e498d0f8 100644
--- a/apps/client/src/features/user/components/account-languate.tsx
+++ b/apps/client/src/features/user/components/account-languate.tsx
@@ -1,5 +1,10 @@
 import { Group, Text, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { updateUser } from "../services/user-service";
+import { IUser } from "../types/user.types";
+import { useAtom } from "jotai";
+import { userAtom } from "../atoms/current-user-atom";
+import { useState } from "react";
 
 export default function AccountLanguage() {
   const { t } = useTranslation();
@@ -19,8 +24,17 @@ export default function AccountLanguage() {
 
 function LanguageSwitcher() {
   const { t, i18n } = useTranslation();
+  const [user, setUser] = useAtom(userAtom);
+  const [language, setLanguage] = useState(
+    user.settings?.preferences?.language || "en-US",
+  );
+
+  const handleChange = async (value: string) => {
+    const updatedUser = await updateUser({ language: value });
+
+    setLanguage(value);
+    setUser(updatedUser);
 
-  const handleChange = (value: string) => {
     i18n.changeLanguage(value);
   };
 
@@ -28,13 +42,14 @@ function LanguageSwitcher() {
     <Select
       label={t("Select language")}
       data={[
-        { value: "zh", label: "中文" },
-        { value: "en", label: "English" },
+        { value: "en-US", label: "English (United States)" },
+        { value: "zh-CN", label: "中文 (简体)" },
       ]}
-      value={i18n.language}
+      value={language}
       onChange={handleChange}
       allowDeselect={false}
       checkIconPosition="right"
     />
   );
 }
+
diff --git a/apps/client/src/features/user/types/user.types.ts b/apps/client/src/features/user/types/user.types.ts
index a729073d..e73ec381 100644
--- a/apps/client/src/features/user/types/user.types.ts
+++ b/apps/client/src/features/user/types/user.types.ts
@@ -1,6 +1,11 @@
 import { IWorkspace } from "@/features/workspace/types/workspace.types";
 
-export interface IUser {
+type IUserPreferences = {
+  fullPageWidth: boolean;
+  language: string;
+};
+
+export interface IUser extends IUserPreferences {
   id: string;
   name: string;
   email: string;
@@ -17,7 +22,6 @@ export interface IUser {
   workspaceId: string;
   deactivatedAt: Date;
   deletedAt: Date;
-  fullPageWidth: boolean; // used for update
 }
 
 export interface ICurrentUser {
@@ -26,7 +30,5 @@ export interface ICurrentUser {
 }
 
 export interface IUserSettings {
-  preferences: {
-    fullPageWidth: boolean;
-  };
+  preferences: IUserPreferences
 }
diff --git a/apps/client/src/features/user/user-provider.tsx b/apps/client/src/features/user/user-provider.tsx
index 25548ed8..58e7ac3f 100644
--- a/apps/client/src/features/user/user-provider.tsx
+++ b/apps/client/src/features/user/user-provider.tsx
@@ -2,14 +2,19 @@ import { useAtom } from "jotai";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import React, { useEffect } from "react";
 import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { useTranslation } from "react-i18next";
 
 export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useAtom(currentUserAtom);
   const { data, isLoading, error } = useCurrentUser();
+  const { i18n } = useTranslation();
 
   useEffect(() => {
     if (data && data.user && data.workspace) {
       setCurrentUser(data);
+      i18n.changeLanguage(
+        data.user?.settings?.preferences?.language || "en-US",
+      );
     }
   }, [data, isLoading]);
 
diff --git a/apps/client/src/i18n.ts b/apps/client/src/i18n.ts
index 26b9d1cf..5bd75f42 100644
--- a/apps/client/src/i18n.ts
+++ b/apps/client/src/i18n.ts
@@ -2,25 +2,18 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
 import Backend from "i18next-http-backend";
-import LanguageDetector from "i18next-browser-languagedetector";
-// don't want to use this?
-// have a look at the Quick start guide
-// for passing in lng and translations on init
 
 i18n
   // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
   // learn more: https://github.com/i18next/i18next-http-backend
   // want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
   .use(Backend)
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    fallbackLng: "en",
+    fallbackLng: "en-US",
     debug: true,
 
     interpolation: {
diff --git a/apps/server/src/core/user/dto/update-user.dto.ts b/apps/server/src/core/user/dto/update-user.dto.ts
index c8ded9f7..e93eb9fa 100644
--- a/apps/server/src/core/user/dto/update-user.dto.ts
+++ b/apps/server/src/core/user/dto/update-user.dto.ts
@@ -12,4 +12,8 @@ export class UpdateUserDto extends PartialType(
   @IsOptional()
   @IsBoolean()
   fullPageWidth: boolean;
+
+  @IsOptional()
+  @IsString()
+  language: string;
 }
diff --git a/apps/server/src/core/user/user.service.ts b/apps/server/src/core/user/user.service.ts
index 9b6527bf..428004b0 100644
--- a/apps/server/src/core/user/user.service.ts
+++ b/apps/server/src/core/user/user.service.ts
@@ -33,6 +33,13 @@ export class UserService {
       );
     }
 
+    if (typeof updateUserDto.language !== 'undefined') {
+      return this.updateUserLanguagePreference(
+        userId,
+        updateUserDto.language,
+      );
+    }
+
     if (updateUserDto.name) {
       user.name = updateUserDto.name;
     }
@@ -59,4 +66,8 @@ export class UserService {
       fullPageWidth,
     );
   }
+
+  async updateUserLanguagePreference(userId: string, language: string) {
+    return this.userRepo.updatePreference(userId, 'language', language);
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 767a6d9f..97200ac9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -231,9 +231,6 @@ importers:
       i18next:
         specifier: ^23.14.0
         version: 23.14.0
-      i18next-browser-languagedetector:
-        specifier: ^8.0.0
-        version: 8.0.0
       i18next-http-backend:
         specifier: ^2.6.1
         version: 2.6.1
@@ -5468,9 +5465,6 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
-  i18next-browser-languagedetector@8.0.0:
-    resolution: {integrity: sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==}
-
   i18next-http-backend@2.6.1:
     resolution: {integrity: sha512-rCilMAnlEQNeKOZY1+x8wLM5IpYOj10guGvEpeC59tNjj6MMreLIjIW8D1RclhD3ifLwn6d/Y9HEM1RUE6DSog==}
 
@@ -13961,10 +13955,6 @@ snapshots:
 
   human-signals@2.1.0: {}
 
-  i18next-browser-languagedetector@8.0.0:
-    dependencies:
-      '@babel/runtime': 7.23.7
-
   i18next-http-backend@2.6.1:
     dependencies:
       cross-fetch: 4.0.0
@@ -16335,7 +16325,7 @@ snapshots:
   terser@5.29.2:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.11.3
+      acorn: 8.12.1
       commander: 2.20.3
       source-map-support: 0.5.21