fix(costcenter):i18n

labring · Nov 28, 2024 · 98218fe · 98218fe
1 parent 8ce6bc4
commit 98218fe
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 46 deletions.
diff --git a/frontend/providers/costcenter/next-i18next.config.js b/frontend/providers/costcenter/next-i18next.config.js
@@ -5,7 +5,7 @@
 
 module.exports = {
   i18n: {
-    defaultLocale: 'zh',
+    defaultLocale: 'en',
     locales: ['en', 'zh'],
     localeDetection: false
   },

diff --git a/frontend/providers/costcenter/src/pages/_app.tsx b/frontend/providers/costcenter/src/pages/_app.tsx
@@ -1,23 +1,23 @@
 import Layout from '@/layout';
-import { sealosApp } from 'sealos-desktop-sdk/app';
-import { EVENT_NAME } from 'sealos-desktop-sdk';
-import '@/styles/globals.scss';
+import { Response as initDataRes } from '@/pages/api/platform/getAppConfig';
+import request from '@/service/request';
+import useAppTypeStore from '@/stores/appType';
+import useBillingStore from '@/stores/billing';
+import useEnvStore from '@/stores/env';
 import { theme } from '@/styles/chakraTheme';
+import '@/styles/globals.scss';
+import { ApiResp } from '@/types/api';
 import { ChakraProvider } from '@chakra-ui/react';
-import { Hydrate, QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { appWithTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import Router, { useRouter } from 'next/router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-import 'react-day-picker/dist/style.css';
-import { appWithTranslation, i18n } from 'next-i18next';
 import { useEffect } from 'react';
-import request from '@/service/request';
-import { ApiResp } from '@/types/api';
-import { Response as initDataRes } from '@/pages/api/platform/getAppConfig';
-import useEnvStore from '@/stores/env';
-import useAppTypeStore from '@/stores/appType';
-import useBillingStore from '@/stores/billing';
+import 'react-day-picker/dist/style.css';
+import { EVENT_NAME } from 'sealos-desktop-sdk';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
 // Make sure to call `loadStripe` outside a component’s render to avoid
 // recreating the `Stripe` object on every render.
@@ -40,24 +40,34 @@ const App = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
   const { setAppTypeMap, appTypeMap } = useAppTypeStore();
   const { setAppTypeList } = useBillingStore();
+  // init language
+  const changeI18n = (data: { currentLanguage: string }) => {
+    router.replace(router.basePath, router.asPath, { locale: data.currentLanguage });
+  };
   useEffect(() => {
-    const changeI18n = (data: { currentLanguage: string }) => {
-      router.replace(router.basePath, router.asPath, { locale: data.currentLanguage });
+    sealosApp.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
+    return () => {
+      sealosApp.removeAppEventListen(EVENT_NAME.CHANGE_I18N);
     };
-
+  }, []);
+  useEffect(() => {
+    state.setEnv('i18nIsInitialized', false);
     (async () => {
       try {
         const lang = await sealosApp.getLanguage();
         changeI18n({
           currentLanguage: lang.lng
         });
+        state.setEnv('i18nIsInitialized', true);
       } catch (error) {
-        changeI18n({
-          currentLanguage: 'zh'
-        });
+        console.error('get language error');
+        state.setEnv('i18nIsInitialized', false);
       }
     })();
+  }, [router.asPath]);
 
+  // init
+  useEffect(() => {
     (async () => {
       try {
         const { data } = await request<any, ApiResp<initDataRes>>('/api/platform/getAppConfig');
@@ -75,10 +85,6 @@ const App = ({ Component, pageProps }: AppProps) => {
         console.error('get init config error');
       }
     })();
-    sealosApp.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
-    return () => {
-      sealosApp.removeAppEventListen(EVENT_NAME.CHANGE_I18N);
-    };
   }, []);
 
   useEffect(() => {

diff --git a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
@@ -5,6 +5,7 @@ import { Trend } from '@/components/cost_overview/trend';
 import { TrendBar } from '@/components/cost_overview/trendBar';
 import useNotEnough from '@/hooks/useNotEnough';
 import request from '@/service/request';
+import useEnvStore from '@/stores/env';
 import useOverviewStore from '@/stores/overview';
 import { ApiResp } from '@/types';
 import { Box, Flex, useToast } from '@chakra-ui/react';
@@ -13,6 +14,7 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { MutableRefObject, createContext, useEffect, useRef } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 export const RechargeContext = createContext<{ rechargeRef: MutableRefObject<any> | null }>({
   rechargeRef: null
 });
@@ -21,27 +23,37 @@ function CostOverview() {
   const { t } = useTranslation();
   const setRecharge = useOverviewStore((s) => s.setRecharge);
   const router = useRouter();
+  const toast = useToast();
+  const { i18nIsInitialized } = useEnvStore();
   useEffect(() => {
-    const { stripeState } = router.query;
-    if (stripeState === 'success') {
-      totast({
-        status: 'success',
-        duration: 3000,
-        title: t('Stripe Success'),
-        isClosable: true,
-        position: 'top'
-      });
-    } else if (stripeState === 'error') {
-      totast({
-        status: 'error',
-        duration: 3000,
-        title: t('Stripe Cancel'),
-        isClosable: true,
-        position: 'top'
-      });
-    }
-    !!stripeState && router.replace(router.pathname);
-  }, []);
+    (async () => {
+      const lng = ((await sealosApp.getLanguage())?.lng || 'en') as 'en' | 'zh';
+      const { stripeState } = router.query;
+      if (!i18nIsInitialized || !router.isReady || !stripeState) return;
+      if (stripeState === 'success') {
+        toast({
+          status: 'success',
+          duration: 3000,
+          title: t('Stripe Success', {
+            lng
+          }),
+          isClosable: true,
+          position: 'top'
+        });
+      } else if (stripeState === 'error') {
+        toast({
+          status: 'error',
+          duration: 3000,
+          title: t('Stripe Cancel', lng),
+          isClosable: true,
+          position: 'top'
+        });
+      } else {
+        return;
+      }
+      !!stripeState && router.replace(router.pathname);
+    })();
+  }, [t, i18nIsInitialized, router.query, router.isReady]);
   useEffect(() => {
     const { openRecharge } = router.query;
     if (openRecharge === 'true') {
@@ -50,7 +62,7 @@ function CostOverview() {
     }
   }, []);
   const { NotEnoughModal } = useNotEnough();
-  const totast = useToast();
+
   const rechargeRef = useRef<any>();
   const { data: balance_raw } = useQuery({
     queryKey: ['getAccount'],

diff --git a/frontend/providers/costcenter/src/stores/env.ts b/frontend/providers/costcenter/src/stores/env.ts
@@ -9,6 +9,7 @@ type EnvState = {
   wechatEnabled: boolean;
   stripeEnabled: boolean;
   openRecharge: boolean;
+  i18nIsInitialized: boolean;
   currency: 'shellCoin' | 'cny' | 'usd';
   stripePromise: ReturnType<typeof loadStripe>;
   setStripe: (pub: string) => void;
@@ -27,6 +28,7 @@ const useEnvStore = create<EnvState>((set, get) => ({
   stripeEnabled: false,
   gpuEnabled: false,
   openRecharge: false,
+  i18nIsInitialized: false,
   currency: 'shellCoin',
   stripePromise: Promise.resolve(null),
   setStripe: (pub: string) => set({ stripePromise: loadStripe(pub) }),

diff --git a/frontend/providers/costcenter/src/stores/session.ts b/frontend/providers/costcenter/src/stores/session.ts
@@ -7,7 +7,6 @@ import { immer } from 'zustand/middleware/immer';
 
 type SessionState = {
   session: SessionV1;
-  locale: string;
   setSession: (ss: SessionV1) => void;
   setSessionProp: (key: keyof SessionV1, value: any) => void;
   getSession: () => SessionV1;
@@ -21,7 +20,6 @@ const useSessionStore = create<SessionState>()(
     persist(
       immer((set, get) => ({
         session: {} as SessionV1,
-        locale: 'zh',
         setSession: (ss: SessionV1) => set({ session: ss }),
         setSessionProp: (key: keyof SessionV1, value: any) => {
           set((state) => {