0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00

refactor(ui): replace some of the reactStringReplace usage using i18Next Trans (#1626)

refactor(ui): replace some of the reactStringReplace usage using i18nNext Trans

replace some of the reactStringReplace usage using i18nNext Trans
This commit is contained in:
simeng-li 2022-07-20 17:48:13 +08:00 committed by GitHub
parent 041bd13c28
commit 04b08a83ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 28 deletions

View file

@ -32,14 +32,14 @@ const translation = {
reminder: 'Reminder',
not_found: '404 Not Found',
agree_with_terms: 'I have read and agree to the ',
agree_with_terms_modal: 'To proceed, please agree to the {{terms}}.',
agree_with_terms_modal: 'To proceed, please agree to the <link></link>.',
terms_of_use: 'Terms of Use',
create_account: 'Create Account',
forgot_password: 'Forgot Password?',
or: 'or',
enter_passcode: 'The passcode has been sent to your {{address}}',
passcode_sent: 'The passcode has been resent',
resend_after_seconds: 'Resend after {{seconds}} seconds',
resend_after_seconds: 'Resend after <span>{{seconds}}</span> seconds',
resend_passcode: 'Resend Passcode',
continue_with: 'Continue with',
create_account_id_exists:

View file

@ -34,14 +34,14 @@ const translation = {
reminder: '提示',
not_found: '404 页面不存在',
agree_with_terms: '我已阅读并同意 ',
agree_with_terms_modal: '请先同意 {{terms}} 以继续',
agree_with_terms_modal: '请先同意 <link></link> 以继续',
terms_of_use: '使用条款',
create_account: '创建帐号',
forgot_password: '忘记密码?',
or: '或',
enter_passcode: '验证码已经发送至你的{{ address }}',
passcode_sent: '验证码已经发送',
resend_after_seconds: '在 {{ seconds }} 秒后重发',
resend_after_seconds: '在 <span>{{ seconds }}</span> 秒后重发',
resend_passcode: '重发验证码',
continue_with: '通过以下方式继续',
create_account_id_exists: '{{ type }}为 {{ value }} 的帐号已存在,你要登录吗?',

View file

@ -1,7 +1,6 @@
import classNames from 'classnames';
import { useState, useEffect, useContext, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import reactStringReplace from 'react-string-replace';
import { useTranslation, Trans } from 'react-i18next';
import { useTimer } from 'react-timer-hook';
import { getSendPasscodeApi, getVerifyPasscodeApi } from '@/apis/utils';
@ -87,18 +86,6 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
}
}, [verifyPasscodeResult]);
const renderCountDownMessage = useMemo(() => {
const contents = t('description.resend_after_seconds', { seconds });
return (
<div className={styles.message}>
{reactStringReplace(contents, `${seconds}`, (match) => (
<span key="counter">{match}</span>
))}
</div>
);
}, [seconds, t]);
return (
<form className={classNames(styles.form, className)}>
<Passcode
@ -109,7 +96,11 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
onChange={setCode}
/>
{isRunning ? (
renderCountDownMessage
<div className={styles.message}>
<Trans components={{ span: <span key="counter" /> }}>
{t('description.resend_after_seconds', { seconds })}
</Trans>
</div>
) : (
<TextLink
className={styles.link}

View file

@ -1,7 +1,6 @@
import { ReactNode, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useContext } from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { create } from 'react-modal-promise';
import reactStringReplace from 'react-string-replace';
import { WebModal, MobileModal } from '@/components/ConfirmModal';
import TextLink from '@/components/TextLink';
@ -30,7 +29,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
const ConfirmModal = isMobile ? MobileModal : WebModal;
const terms = t('description.terms_of_use');
const content = t('description.agree_with_terms_modal', { terms });
const linkProps = isMobile
? {
@ -43,10 +41,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
target: '_blank',
};
const modalContent: ReactNode = reactStringReplace(content, terms, () => (
<TextLink key={terms} text="description.terms_of_use" {...linkProps} />
));
return (
<ConfirmModal
isOpen={isOpen}
@ -57,7 +51,13 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
}}
onClose={onClose}
>
{modalContent}
<Trans
components={{
link: <TextLink key={terms} text="description.terms_of_use" {...linkProps} />,
}}
>
{t('description.agree_with_terms_modal')}
</Trans>
</ConfirmModal>
);
};

View file

@ -23,6 +23,7 @@ global.crypto = new Crypto();
const translation = (key: string) => key;
jest.mock('react-i18next', () => ({
...jest.requireActual('react-i18next'),
useTranslation: () => ({
t: translation,
i18n: {