feat(interface-language): done admin language setting

ui/src/pages/Admin/Interface/index.tsx

@@ -12,18 +12,19 @@ import { interfaceStore } from '@/stores';
 import { UploadImg } from '@/components';
 import { TIMEZONES, DEFAULT_TIMEZONE } from '@/common/constants';
 import {
-  getLanguageOptions,
+  getAdminLanguageOptions,
   uploadAvatar,
   updateInterfaceSetting,
   useInterfaceSetting,
   useThemeOptions,
 } from '@/services';
+import { setupAppLanguage } from '@/utils/localize';
 
 const Interface: FC = () => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'admin.interface',
   });
-  const { update: interfaceStoreUpdate } = interfaceStore();
+  const storeInterface = interfaceStore.getState().interface;
   const { data: themes } = useThemeOptions();
   const Toast = useToast();
   const [langs, setLangs] = useState<LangsType[]>();
@@ -31,17 +32,17 @@ const Interface: FC = () => {
 
   const [formData, setFormData] = useState<FormDataType>({
     logo: {
-      value: setting?.logo || '',
+      value: setting?.logo || storeInterface.logo,
       isInvalid: false,
       errorMsg: '',
     },
     theme: {
-      value: setting?.theme || '',
+      value: setting?.theme || storeInterface.theme,
       isInvalid: false,
       errorMsg: '',
     },
     language: {
-      value: setting?.language || '',
+      value: setting?.language || storeInterface.language,
       isInvalid: false,
       errorMsg: '',
     },
@@ -52,19 +53,8 @@ const Interface: FC = () => {
     },
   });
   const getLangs = async () => {
-    const res: LangsType[] = await getLanguageOptions();
+    const res: LangsType[] = await getAdminLanguageOptions();
     setLangs(res);
-    if (!formData.language.value) {
-      // set default theme value
-      setFormData({
-        ...formData,
-        language: {
-          value: res[0].value,
-          isInvalid: false,
-          errorMsg: '',
-        },
-      });
-    }
   };
   // set default theme value
   if (!formData.theme.value && Array.isArray(themes) && themes.length) {
@@ -122,7 +112,8 @@ const Interface: FC = () => {
           msg: t('update', { keyPrefix: 'toast' }),
           variant: 'success',
         });
-        interfaceStoreUpdate(reqParams);
+        interfaceStore.getState().update(reqParams);
+        setupAppLanguage();
       })
       .catch((err) => {
         if (err.isError && err.key) {
@@ -172,8 +163,6 @@ const Interface: FC = () => {
   useEffect(() => {
     getLangs();
   }, []);
-
-  console.log('formData', formData);
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>

ui/src/services/admin/settings.ts

@@ -83,3 +83,8 @@ export const useDashBoard = () => {
     error,
   };
 };
+
+export const getAdminLanguageOptions = () => {
+  const apiUrl = `/answer/admin/api/language/options`;
+  return request.get<Type.LangsType[]>(apiUrl);
+};

ui/src/stores/interface.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 import { AdminSettingsInterface } from '@/common/interface';
+import { DEFAULT_LANG } from '@/common/constants';
 
 interface InterfaceType {
   interface: AdminSettingsInterface;
@@ -11,7 +12,7 @@ const interfaceSetting = create<InterfaceType>((set) => ({
   interface: {
     logo: '',
     theme: '',
-    language: '',
+    language: DEFAULT_LANG,
     time_zone: '',
   },
   update: (params) =>

ui/src/stores/userInfo.ts

@@ -25,17 +25,21 @@ const initUser: UserInfoRes = {
   website: '',
   status: '',
   mail_status: 1,
-  language: '',
+  language: 'Default',
 };
 
 const loggedUserInfoStore = create<UserInfoStore>((set) => ({
   user: initUser,
-  update: (params) =>
+  update: (params) => {
+    if (!params.language) {
+      params.language = 'Default';
+    }
     set(() => {
       Storage.set(LOGGED_TOKEN_STORAGE_KEY, params.access_token);
       Storage.set(LOGGED_USER_STORAGE_KEY, params);
       return { user: params };
-    }),
+    });
+  },
   clear: () =>
     set(() => {
       Storage.remove(LOGGED_TOKEN_STORAGE_KEY);