Merge pull request #29 from jokester/yagni-i18n-minor-changes

minor changes & i18n

src/apis/language.ts

@@ -3,6 +3,8 @@
  */
 import { request } from '.';
 import { AxiosRequestConfig } from 'axios';
+import { getIntl } from '@/locales';
+import { toLowerCamelCase } from '@/utils';
 
 export interface APILanguage {
   id: string;
@@ -20,14 +22,24 @@ export interface APILanguage {
 interface GetLanguagesData {
   configs?: AxiosRequestConfig;
 }
-/** 获取系统角色 */
-const getLanguages = ({ configs = {} } = {} as GetLanguagesData) => {
-  return request<APILanguage[]>({
+
+/** Get global lang list */
+async function getLanguages({ configs = {} } = {} as GetLanguagesData) {
+  const res = await request<APILanguage[]>({
     method: 'GET',
     url: `/v1/languages`,
     ...configs,
   });
-};
+  res.data = res.data.map((item) => toLowerCamelCase(item));
+  const intl = getIntl();
+  if (intl.locale === 'en') {
+    res.data.forEach((item) => {
+      // workaround server's corrupted data
+      item.i18nName = item.enName;
+    });
+  }
+  return res;
+}
 
 export default {
   getLanguages,

src/components/FileItem.tsx

@@ -13,10 +13,10 @@ import {
   FILE_NOT_EXIST_REASON,
   FILE_SAFE_STATUS,
   IMAGE_COVER,
-} from '../constants';
-import { FC, File } from '../interfaces';
+} from '@/constants';
+import { FC, File } from '@/interfaces';
 import style from '../style';
-import { cardClickEffect, clickEffect } from '../utils/style';
+import { cardClickEffect, clickEffect } from '@/utils/style';
 
 /** 文件条目的属性接口 */
 interface FileItemProps {

src/components/LanguageSelect.tsx

@@ -3,9 +3,8 @@ import { Select } from 'antd';
 import { SelectProps } from 'antd/lib/select';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
-import apis from '../apis';
-import { FC } from '../interfaces';
-import { toLowerCamelCase } from '../utils';
+import { api } from '@/apis';
+import { FC } from '@/interfaces';
 
 interface SelectOption {
   label: string;
@@ -30,9 +29,8 @@ export const LanguageSelect: FC<LanguageSelectProps> = ({
 
   useEffect(() => {
     setLoading(true);
-    apis.getLanguages().then((result) => {
+    api.language.getLanguages().then((result) => {
       const options = result.data.map((item) => {
-        item = toLowerCamelCase(item);
         const option: SelectOption = {
           label: item.i18nName,
           value: item.code,

src/components/MitPreprocess/TranslateCompanion.tsx

@@ -1,18 +1,13 @@
-import { FC } from '../../interfaces';
+import { FC } from '@/interfaces';
 import { RefObject, useRef, useState } from 'react';
 import { FilePond } from 'react-filepond';
 import { css } from '@emotion/core';
 import { Button } from '../Button';
 import { createMoeflowProjectZip, LPFile } from './moeflow-packager';
-import { FailureResults } from '../../apis';
+import { FailureResults } from '@/apis';
 import { measureImgSize } from '@jokester/ts-commonutil/lib/frontend/measure-img';
 import { clamp } from 'lodash-es';
-import {
-  BBox,
-  CoordPair,
-  mitPreprocess,
-  TextQuad,
-} from '../../apis/mit_preprocess';
+import { BBox, mitPreprocess, TextQuad } from '@/apis/mit_preprocess';
 import { ResourcePool } from '@jokester/ts-commonutil/lib/concurrency/resource-pool';
 
 const MAX_FILE_COUNT = 30;

src/components/TeamSettingBase.tsx

@@ -160,6 +160,7 @@ export const TeamSettingBase: FC<TeamSettingBaseProps> = ({ className }) => {
         {permissionsVisible && (
           <ContentItem>
             <div className="permissions">
+              {/* FIXME: this should be presented in a table */}
               {currentTeam.role.permissions.map((x) => {
                 return (
                   <Tooltip

src/components/index.ts

@@ -24,20 +24,8 @@ export { Form } from './Form';
 export { FormItem } from './FormItem';
 export { GroupJoinForm } from './GroupJoinForm';
 export { Header } from './Header';
-export { HotKeyRecorder, useHotKey } from './HotKey';
+export { useHotKey } from './HotKey';
 export { ImageOCRProgress } from './ImageOCRProgress';
-export { ImageSelect } from './ImageSelect';
-export { ImageSourceViewer } from './ImageSourceViewer';
-export { ImageSourceViewerGod } from './ImageSourceViewerGod';
-export { ImageSourceViewerModeControl } from './ImageSourceViewerModeControl';
-export { ImageSourceViewerProofreader } from './ImageSourceViewerProofreader';
-export { ImageSourceViewerTranslator } from './ImageSourceViewerTranslator';
-export { ImageTranslatorSettingHotKey } from './ImageTranslatorSettingHotKey';
-export { ImageTranslatorSettingMouse } from './ImageTranslatorSettingMouse';
-export { ImageViewer } from './ImageViewer';
-export { ImageViewerLabelTextExample } from './ImageViewerLabelTextExample';
-export { ImageViewerSettingPanel } from './ImageViewerSettingPanel';
-export { ImageViewerZoomPanel } from './ImageViewerZoomPanel';
 export { InvitationList } from './InvitationList';
 export { InviteUser } from './InviteUser';
 export { Label } from './Label';
@@ -49,27 +37,16 @@ export { ListSkeletonItem } from './ListSkeletonItem';
 export { LoadingIcon } from './LoadingIcon';
 export { MemberList } from './MemberList';
 export { MovableArea, MovableItem } from './Movable';
-export { MovableAreaColorBackground } from './MovableAreaColorBackground';
-export { MovableAreaImageBackground } from './MovableAreaImageBackground';
-export { MovableItemBars } from './MovableItemBars';
-export { MovableLabel } from './MovableLabel';
 export { NavTab } from './NavTab';
 export { NavTabs } from './NavTabs';
 export { Output } from './Output';
 export { OutputList } from './OutputList';
-export { ProjectCreateForm } from './ProjectCreateForm';
-export { ProjectEditForm } from './ProjectEditForm';
-export { ProjectFinishedTip } from './ProjectFinishedTip';
-export { ProjectImportFromLabelplusStatus } from './ProjectImportFromLabelplusStatus';
 export { ProjectItem } from './ProjectItem';
 export { ProjectList } from './ProjectList';
 export { ProjectSetCreateForm } from './ProjectSetCreateForm';
 export { ProjectSetEditForm } from './ProjectSetEditForm';
 export { ProjectSetList } from './ProjectSetList';
 export { ProjectSetSettingBase } from './ProjectSetSettingBase';
-export { ProjectSettingBase } from './ProjectSettingBase';
-export { ProjectSettingTarget } from './ProjectSettingTarget';
-export { ProjectTargetList } from './ProjectTargetList';
 export { RoleRadioGroup } from './RoleRadioGroup';
 export { RoleSelect } from './RoleSelect';
 export { Spin } from './Spin';
@@ -83,11 +60,8 @@ export { TeamSearchList } from './TeamSearchList';
 export { TeamSettingBase } from './TeamSettingBase';
 export { Tooltip } from './Tooltip';
 export { TranslationProgress } from './TranslationProgress';
-export { TranslationSaveFailed } from './TranslationSaveFailed';
-export { TranslationUser } from './TranslationUser';
 export { TypeRadioGroup } from './TypeRadioGroup';
 export { UserEmailEditForm } from './UserEmailEditForm';
 export { UserInvitationList } from './UserInvitationList';
 export { UserPasswordEditForm } from './UserPasswordEditForm';
 export { VCodeInput } from './VCodeInput';
-export { ProjectImportForm } from './ProjectImportForm';

src/components/ImageSelect.tsx → src/components/project-file/ImageSelect.tsx

@@ -5,12 +5,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useClickAway } from 'react-use';
-import apis from '../apis';
-import { FC, File } from '../interfaces';
-import { AppState } from '../store';
-import style from '../style';
-import { toLowerCamelCase } from '../utils';
-import { clickEffect } from '../utils/style';
+import apis from '@/apis';
+import { FC, File } from '@/interfaces';
+import { AppState } from '@/store';
+import style from '@/style';
+import { toLowerCamelCase } from '@/utils';
+import { clickEffect } from '@/utils/style';
 
 /** 图片文件选择下拉框的属性接口 */
 interface ImageSelectProps {

src/components/ImageSourceViewer.tsx → src/components/project-file/ImageSourceViewer.tsx

@@ -2,15 +2,13 @@ import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import {
-  ImageSourceViewerGod,
-  ImageSourceViewerProofreader,
-  ImageSourceViewerTranslator,
-  TranslationSaveFailed,
-} from '.';
-import { FC, File } from '../interfaces';
-import { Source as ISource } from '../interfaces/source';
-import { AppState } from '../store';
+import { FC, File } from '@/interfaces';
+import { Source as ISource } from '@/interfaces/source';
+import { AppState } from '@/store';
+import { TranslationSaveFailed } from './TranslationSaveFailed';
+import { ImageSourceViewerGod } from './ImageSourceViewerGod';
+import { ImageSourceViewerTranslator } from './ImageSourceViewerTranslator';
+import { ImageSourceViewerProofreader } from './ImageSourceViewerProofreader';
 
 /** 原文列表的属性接口 */
 interface ImageSourceViewerProps {

src/components/ImageSourceViewerGod/Source.tsx → src/components/project-file/ImageSourceViewerGod/Source.tsx

@@ -4,16 +4,16 @@ import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Icon } from '..';
-import { PROJECT_PERMISSION } from '../../constants';
-import { SOURCE_POSITION_TYPE } from '../../constants/source';
-import { FC } from '../../interfaces';
-import { Source as ISource } from '../../interfaces/source';
-import { AppState } from '../../store';
-import { editSourceSaga, focusSource } from '../../store/source/slice';
-import style from '../../style';
-import { checkTranslationState } from '../../utils/source';
-import { can } from '../../utils/user';
+import { Icon } from '@/components';
+import { PROJECT_PERMISSION } from '@/constants';
+import { SOURCE_POSITION_TYPE } from '@/constants/source';
+import { FC } from '@/interfaces';
+import { Source as ISource } from '@/interfaces/source';
+import { AppState } from '@/store';
+import { editSourceSaga, focusSource } from '@/store/source/slice';
+import style from '@/style';
+import { checkTranslationState } from '@/utils/source';
+import { can } from '@/utils/user';
 import { TranslationList } from './TranslationList';
 
 /** 原文的属性接口 */

src/components/ImageSourceViewerGod/Translation.tsx → src/components/project-file/ImageSourceViewerGod/Translation.tsx

@@ -6,19 +6,20 @@ import { lighten } from 'polished';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { DebounceStatus, Icon, Tooltip, TranslationUser } from '..';
-import { PROJECT_PERMISSION } from '../../constants';
-import { FC, Source } from '../../interfaces';
-import { Translation as ITranslation } from '../../interfaces/translation';
-import { AppState } from '../../store';
+import { DebounceStatus, Icon, Tooltip } from '@/components';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC, Source } from '@/interfaces';
+import { Translation as ITranslation } from '@/interfaces/translation';
+import { AppState } from '@/store';
 import {
   editMyTranslationSaga,
   editProofreadSaga,
   selectTranslationSaga,
-} from '../../store/source/slice';
-import style from '../../style';
-import { clearClickEffect, clickEffect } from '../../utils/style';
-import { can } from '../../utils/user';
+} from '@/store/source/slice';
+import style from '@/style';
+import { clearClickEffect, clickEffect } from '@/utils/style';
+import { can } from '@/utils/user';
+import { TranslationUser } from '../TranslationUser';
 
 export interface OnTextAreaChange {
   (event: React.ChangeEvent<HTMLTextAreaElement>): void;

src/components/ImageSourceViewerGod/TranslationList.tsx → src/components/project-file/ImageSourceViewerGod/TranslationList.tsx

@@ -4,16 +4,13 @@ import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { Translation } from './Translation';
-import { PROJECT_PERMISSION } from '../../constants';
-import { FC, Source } from '../../interfaces';
-import { Translation as ITranslation } from '../../interfaces/translation';
-import { AppState } from '../../store';
-import style from '../../style';
-import {
-  filterValidTranslations,
-  isValidTranslation,
-} from '../../utils/source';
-import { can } from '../../utils/user';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC, Source } from '@/interfaces';
+import { Translation as ITranslation } from '@/interfaces/translation';
+import { AppState } from '@/store';
+import style from '@/style';
+import { filterValidTranslations, isValidTranslation } from '@/utils/source';
+import { can } from '@/utils/user';
 
 /** 翻译列表的属性接口 */
 interface TranslationListProps {

src/components/ImageSourceViewerGod/index.tsx → src/components/project-file/ImageSourceViewerGod/index.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
-import { ImageSourceViewerModeControl } from '..';
-import { FC, Source as ISource } from '../../interfaces';
-import style from '../../style';
+import { ImageSourceViewerModeControl } from '../ImageSourceViewerModeControl';
+import { FC, Source as ISource } from '@/interfaces';
+import style from '@/style';
 import { Source } from './Source';
 
 /** 全能模式的属性接口 */

src/components/ImageSourceViewerModeControl.tsx → src/components/project-file/ImageSourceViewerModeControl.tsx

@@ -3,13 +3,13 @@ import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { PROJECT_PERMISSION } from '../constants';
-import { FC } from '../interfaces';
-import { AppState } from '../store';
-import { setImageTranslatorMode } from '../store/imageTranslator/slice';
-import style from '../style';
-import { clearClickEffect, clickEffect } from '../utils/style';
-import { can } from '../utils/user';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC } from '@/interfaces';
+import { AppState } from '@/store';
+import { setImageTranslatorMode } from '@/store/imageTranslator/slice';
+import style from '@/style';
+import { clearClickEffect, clickEffect } from '@/utils/style';
+import { can } from '@/utils/user';
 
 /** 模板的属性接口 */
 interface ImageSourceViewerModeControlProps {

src/components/ImageSourceViewerProofreader/Source.tsx → src/components/project-file/ImageSourceViewerProofreader/Source.tsx

@@ -5,15 +5,15 @@ import { clearFix, darken } from 'polished';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { DebounceStatus, Icon, Tooltip } from '..';
-import { APITranslation } from '../../apis/translation';
-import { Source as ISource } from '../../interfaces';
-import { AppState } from '../../store';
-import { focusSource, selectTranslationSaga } from '../../store/source/slice';
-import { focusTranslation } from '../../store/translation/slice';
-import style from '../../style';
-import { getSortedTranslations } from '../../utils/source';
-import { clickEffect, hover } from '../../utils/style';
+import { DebounceStatus, Icon, Tooltip } from '@/components';
+import { APITranslation } from '@/apis/translation';
+import { Source as ISource } from '@/interfaces';
+import { AppState } from '@/store';
+import { focusSource, selectTranslationSaga } from '@/store/source/slice';
+import { focusTranslation } from '@/store/translation/slice';
+import style from '@/style';
+import { getSortedTranslations } from '@/utils/source';
+import { clickEffect, hover } from '@/utils/style';
 
 /** 原文的属性接口 */
 interface SourceProps {

src/components/ImageSourceViewerProofreader/index.tsx → src/components/project-file/ImageSourceViewerProofreader/index.tsx

@@ -5,29 +5,22 @@ import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  DebounceStatus,
-  ImageSourceViewerModeControl,
-  TranslationUser,
-} from '..';
-import { APITranslation } from '../../apis/translation';
-import {
-  FC,
-  File,
-  InputDebounceStatus,
-  Source as ISource,
-} from '../../interfaces';
-import { AppState } from '../../store';
+import { DebounceStatus } from '@/components';
+import { TranslationUser } from '../TranslationUser';
+import { APITranslation } from '@/apis/translation';
+import { FC, File, InputDebounceStatus, Source as ISource } from '@/interfaces';
+import { AppState } from '@/store';
 import {
   batchSelectTranslationSaga,
   editMyTranslationSaga,
   editProofreadSaga,
-} from '../../store/source/slice';
-import { focusTranslation } from '../../store/translation/slice';
-import style from '../../style';
-import { getBestTranslation } from '../../utils/source';
-import { hover } from '../../utils/style';
+} from '@/store/source/slice';
+import { focusTranslation } from '@/store/translation/slice';
+import style from '@/style';
+import { getBestTranslation } from '@/utils/source';
+import { hover } from '@/utils/style';
 import { Source } from './Source';
+import { ImageSourceViewerModeControl } from '../ImageSourceViewerModeControl';
 
 /** 校对模式的属性接口 */
 interface ImageSourceViewerProofreaderProps {