refactor: i18n (#352)

* refactor: i18n
* mod: update package version

Author: hetao92

app/components/CSVPreviewLink/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Popover, Table } from 'antd';
 import { } from 'antd/lib/button';
 import React, { useState } from 'react';
-import intl from 'react-intl-universal';
+import { useI18n } from '@vesoft-inc/i18n';
 import { v4 as uuidv4 } from 'uuid';
 import cls from 'classnames';
 import styles from './index.module.less';
@@ -17,6 +17,7 @@ interface IProps {
 const CSVPreviewLink = (props: IProps) => {
   const { onMapping, file: { content }, children, btnType, selected } = props;
   const [visible, setVisible] = useState(false);
+  const { intl } = useI18n();
   const handleLinkClick = e => {
     e.stopPropagation();
     setVisible(true);

app/components/ErrorBoundary/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import errorImg from '@app/static/images/errorBoundary.png';
-import intl from 'react-intl-universal';
+import { I18nContext, useI18n } from '@vesoft-inc/i18n';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Button, message } from 'antd';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
@@ -10,13 +10,41 @@ interface IProps extends RouteComponentProps {}
 interface IState {
   errInfo: string;
 }
+
+function ErrorPanel(props: { errInfo: string }) {
+  const { errInfo } = props;
+  const { intl } = useI18n();
+  const handleCopy = useCallback(() => {
+    message.success(intl.get('common.copySuccess'));
+  }, []);
+  return <div className={styles.errPage}>
+    <img src={errorImg} className={styles.errImg} />
+    <p className={styles.errText}>{intl.get('warning.crashPage')}</p>
+    <p className={styles.errTip}>{intl.get('warning.crashPageTip')}</p>
+    <div className={styles.btns}>
+      <Button type="primary" onClick={() => window.location.reload()}>{intl.get('warning.refreshPage')}</Button>
+      <Button onClick={() => window.open(intl.get('link.forumHref'), '_blank')}>{intl.get('warning.contactStaff')}</Button>
+    </div>
+    <div className={styles.errContainer}>
+      <div className={styles.header}>
+        <span>{intl.get('warning.errorMessage')}</span>
+        <CopyToClipboard key={1} text={errInfo} onCopy={handleCopy}>
+          <Button>{intl.get('common.copy')}</Button>
+        </CopyToClipboard>
+      </div>
+      <p className={styles.errMsg}>{errInfo.toString()}</p>
+    </div>
+  </div>;
+}
+
 class ErrorBoundary extends React.PureComponent<IProps, IState> {
   constructor(props) {
     super(props);
     this.state = {
       errInfo: null,
     };
   }
+  static contextType = I18nContext;
   componentDidCatch(error) {
     this.setState({
       errInfo: error?.stack?.toString(),
@@ -30,31 +58,10 @@ class ErrorBoundary extends React.PureComponent<IProps, IState> {
     }
   }
 
-  handleCopy = () => {
-    message.success(intl.get('common.copySuccess'));
-  };
-
   render() {
     const { errInfo } = this.state;
     if(!errInfo) return this.props.children;
-    return <div className={styles.errPage}>
-      <img src={errorImg} className={styles.errImg} />
-      <p className={styles.errText}>{intl.get('warning.crashPage')}</p>
-      <p className={styles.errTip}>{intl.get('warning.crashPageTip')}</p>
-      <div className={styles.btns}>
-        <Button type="primary" onClick={() => window.location.reload()}>{intl.get('warning.refreshPage')}</Button>
-        <Button onClick={() => window.open(intl.get('link.forumHref'), '_blank')}>{intl.get('warning.contactStaff')}</Button>
-      </div>
-      <div className={styles.errContainer}>
-        <div className={styles.header}>
-          <span>{intl.get('warning.errorMessage')}</span>
-          <CopyToClipboard key={1} text={errInfo} onCopy={this.handleCopy}>
-            <Button>{intl.get('common.copy')}</Button>
-          </CopyToClipboard>
-        </div>
-        <p className={styles.errMsg}>{errInfo.toString()}</p>
-      </div>
-    </div>;
+    return <ErrorPanel errInfo={errInfo} />;
   }
 }
 

app/components/GQLCodeMirror/index.tsx

@@ -1,6 +1,6 @@
 import { Collapse } from 'antd';
 import React from 'react';
-import intl from 'react-intl-universal';
+import { useI18n } from '@vesoft-inc/i18n';
 
 import CodeMirror from '@app/components/CodeMirror';
 
@@ -17,6 +17,7 @@ const GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => {
     readOnly: true,
     ...props.option,
   };
+  const { intl } = useI18n();
   return (
     <Collapse className={styles.exportGql}>
       <Panel header={intl.get('common.exportNGQL')} key="ngql">

app/config/rules.ts renamed to app/config/rules.tsx

@@ -1,52 +1,67 @@
+import React from 'react';
+import { Translation } from '@vesoft-inc/i18n';
 import { MAX_COMMENT_BYTES, POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
 import { getByteLength } from '@app/utils/function';
-import intl from 'react-intl-universal';
 
 export const hostRulesFn = () => [
   {
     required: true,
-    message: intl.get('formRules.hostRequired'),
+    message: <Translation>
+      {intl => intl.get('formRules.hostRequired')}
+    </Translation>,
   },
 ];
 
 export const usernameRulesFn = () => [
   {
     required: true,
-    message: intl.get('formRules.usernameRequired'),
+    message: <Translation>
+      {intl => intl.get('formRules.usernameRequired')}
+    </Translation>,
   },
 ];
 
 export const passwordRulesFn = () => [
   {
     required: true,
-    message: intl.get('formRules.passwordRequired'),
+    message: <Translation>
+      {intl => intl.get('formRules.passwordRequired')}
+    </Translation>,
   },
 ];
 
 export const nameRulesFn = () => [
   {
     required: true,
-    message: intl.get('formRules.nameRequired'),
-  },
+    message: <Translation>
+      {intl => intl.get('formRules.nameRequired')}
+    </Translation>,
+  }
 ];
 
 export const numberRulesFn = () => [
   {
     pattern: POSITIVE_INTEGER_REGEX,
-    message: intl.get('formRules.numberRequired'),
+    message: <Translation>
+      {intl => intl.get('formRules.numberRequired')}
+    </Translation>,
   },
 ];
 
 export const replicaRulesFn = (activeMachineNum) => [
   {
     pattern: POSITIVE_INTEGER_REGEX,
-    message: intl.get('formRules.numberRequired'),
+    message: <Translation>
+      {intl => intl.get('formRules.numberRequired')}
+    </Translation>,
   },
   {
     validator(_rule, value, callback) {
       if (value && Number(value) > activeMachineNum) {
         callback(
-          intl.get('formRules.replicaLimit', { number: activeMachineNum }),
+          <Translation>
+            {intl => intl.get('formRules.replicaLimit', { number: activeMachineNum })}
+          </Translation>
         );
       }
       callback();
@@ -60,6 +75,8 @@ export const stringByteRulesFn = () => [
     if (byteLength <= MAX_COMMENT_BYTES) {
       return Promise.resolve();
     }
-    return Promise.reject(intl.get('formRules.maxBytes', { max: MAX_COMMENT_BYTES }));
+    return Promise.reject(<Translation>
+      {intl => intl.get('formRules.maxBytes', { max: MAX_COMMENT_BYTES })}
+    </Translation>);
   } }
 ];

app/context/LanguageContext.ts

@@ -1,16 +1,15 @@
 import { hot } from 'react-hot-loader/root';
 import { Spin, message } from 'antd';
-import React, { Suspense, lazy, useState, useEffect } from 'react';
+import React, { Suspense, lazy, useEffect } from 'react';
 import ReactDom from 'react-dom';
 import { Route, BrowserRouter as Router, Switch, useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import dayjs from 'dayjs';
-import intl from 'react-intl-universal';
 import duration from 'dayjs/plugin/duration';
 import Cookie from 'js-cookie';
 import { trackPageView } from '@app/utils/stat';
+import { I18nProvider, getI18n } from '@vesoft-inc/i18n';
 import { INTL_LOCALES } from '@app/config/constants';
-import { LanguageContext } from '@app/context';
 import { useStore } from '@app/stores';
 import AuthorizedRoute from './AuthorizedRoute';
 import rootStore, { StoreProvider } from './stores';
@@ -24,44 +23,21 @@ message.config({
   maxCount: 1,
 });
 const defaultLanguage = Cookie.get('lang') || document.documentElement.getAttribute('lang');
-intl.init({
-  currentLocale: defaultLanguage || 'EN_US',
-  locales: INTL_LOCALES,
-});
-
-
+const { initI18n } = getI18n();
+initI18n(defaultLanguage, INTL_LOCALES);
 const PageRoot = observer(() => {
   const { global: { version } } = useStore();
-  const [currentLocale, setCurrentLocale] = useState(
-    defaultLanguage || 'EN-US',
-  );
-
-  const toggleLanguage = (locale: string) => {
-    Cookie.set('lang', locale);
-    setCurrentLocale(locale);
-    intl
-      .init({
-        currentLocale: locale,
-        locales: INTL_LOCALES,
-      });
-  };
-
   useEffect(() => {
     trackPageView(`Studio/v${version}`);
   }, []);
 
   return (
     <StoreProvider value={rootStore}>
-      <LanguageContext.Provider
-        value={{
-          currentLocale,
-          toggleLanguage,
-        }}
-      >
+      <I18nProvider locales={INTL_LOCALES}>
         <Router>
           <App />
         </Router>
-      </LanguageContext.Provider>
+      </I18nProvider>
     </StoreProvider>
   );
 });

app/context/index.ts

@@ -4,7 +4,7 @@ import { ISchemaEnum } from './schema';
 export interface IProperty {
   name: string;
   type: string;
-  fixedLength: string;
+  fixedLength?: string;
 }
 export interface ISketchNode extends VEditorNode {
   uuid?: string;
@@ -16,6 +16,7 @@ export interface ISketchNode extends VEditorNode {
   comment?: string;
   invalid: boolean;
   strokeDasharray?: string;
+  vid?: string;
 }
 
 export interface ISketchEdge extends VEditorLine {

app/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from 'antd';
 import React, { useState } from 'react';
-import intl from 'react-intl-universal';
+import { useI18n } from '@vesoft-inc/i18n';
 import Icon from '@app/components/Icon';
 import styles from './index.module.less';
 
@@ -11,7 +11,7 @@ interface IProps {
 const CypherParameterBox = (props: IProps) => {
   const { data, onSelect } = props;
   const [paramVisible, setParamVisible] = useState(false);
-
+  const { intl } = useI18n();
   if(!paramVisible) {
     return <div className={styles.btnOpenParam} onClick={() => setParamVisible(true)}>
       <Icon type="icon-studio-btn-down" />

app/interfaces/sketch.ts

@@ -1,9 +1,9 @@
 import { Button, Form, Input, Modal, Radio, Select } from 'antd';
 import React from 'react';
-import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
 
+import { useI18n } from '@vesoft-inc/i18n';
 import styles from './index.module.less';
 const Option = Select.Option;
 
@@ -26,6 +26,7 @@ const ExportModal = (props: IProps) => {
   const { data, visible, onClose, onExplorer } = props;
   const { schema: { currentSpace } } = useStore();
   const { headers, tables } = data;
+  const { intl } = useI18n();
   const handleExport = (values) => {
     const { type, vertexId, srcId, dstId, edgeType, rank } = values;
     const vertexes =

app/pages/Console/CypherParameterBox.tsx

@@ -1,10 +1,10 @@
 import { Button, List, Modal, Tooltip, Popconfirm } from 'antd';
 import React, { useCallback, useState } from 'react';
-import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
 import Icon from '@app/components/Icon';
 import { useStore } from '@app/stores';
 
+import { useI18n } from '@vesoft-inc/i18n';
 import styles from './index.module.less';
 
 
@@ -15,7 +15,7 @@ const FavoriteBtn = (props: IProps) => {
   const { onGqlSelect } = props;
   const { console } = useStore();
   const [visible, setVisible] = useState(false);
-
+  const { intl } = useI18n();
   const handleClear = useCallback(async () => {
     const { favorites, deleteFavorite, getFavoriteList } = console;
     if(!favorites.length) {

app/pages/Console/ExportModal.tsx

@@ -1,7 +1,7 @@
 import { Button, List, Modal, Tooltip } from 'antd';
 import React, { useState } from 'react';
-import intl from 'react-intl-universal';
 import Icon from '@app/components/Icon';
+import { useI18n } from '@vesoft-inc/i18n';
 import styles from './index.module.less';
 
 
@@ -12,6 +12,7 @@ const HistoryBtn = (props: IProps) => {
   const { onGqlSelect } = props;
   const [visible, setVisible] = useState(false);
   const [data, setData] = useState([]);
+  const { intl } = useI18n();
   const handleView = () => {
     const data = getHistory();
     setData(data);