feat: save language to BE

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",

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"
     />
   );
 }
+

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
 }

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]);
 

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: {

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;
 }

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);
+  }
 }