moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'i18n--' into 'develop' 

Avoid inline message definitions

See merge request soapbox-pub/soapbox-fe!1444
This commit is contained in:
marcin mikołajczak 2022-05-24 15:38:10 +00:00
parent 788f6111a4 38b3b7150f
commit a7992addbd
24 changed files with 118 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/badge.tsx
View File

@ -2,7 +2,7 @@ import classNames from 'classnames';
import React from 'react';
interface IBadge {
title: string,
title: React.ReactNode,
slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
}

4
app/soapbox/components/media_gallery.js
View File

@ -614,12 +614,12 @@ class MediaGallery extends React.PureComponent {
<div className='space-y-1'>
<Text weight='semibold'>{warning}</Text>
<Text size='sm'>
{intl.formatMessage({ id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' })}
<FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />
</Text>
</div>
<Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
{intl.formatMessage({ id: 'status.sensitive_warning.action', defaultMessage: 'Show content' })}
<FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
</Button>
</div>
</button>

5
app/soapbox/components/profile-hover-card.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import { usePopper } from 'react-popper';
import { useHistory } from 'react-router-dom';
@ -64,7 +64,6 @@ interface IProfileHoverCard {
export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
const dispatch = useAppDispatch();
const history = useHistory();
const intl = useIntl();
const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
@ -130,7 +129,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
<div className='absolute top-2 left-2'>
<Badge
slug='opaque'
title={intl.formatMessage({ id: 'account.follows_you', defaultMessage: 'Follows you' })}
title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
/>
</div>
)}

16
app/soapbox/components/status.tsx
View File

@ -2,7 +2,7 @@ import classNames from 'classnames';
import React from 'react';
import { HotKeys } from 'react-hotkeys';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, FormattedMessage, IntlShape } from 'react-intl';
import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
@ -31,6 +31,10 @@ import type {
// Defined in components/scrollable_list
export type ScrollPosition = { height: number, top: number };
const messages = defineMessages({
reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
});
export const textForScreenReader = (intl: IntlShape, status: StatusEntity, rebloggedByText?: string): string => {
const { account } = status;
if (!account || typeof account !== 'object') return '';
@ -437,12 +441,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
</div>
);
rebloggedByText = intl.formatMessage({
id: 'status.reblogged_by',
defaultMessage: '{name} reposted',
}, {
name: String(status.getIn(['account', 'acct'])),
});
rebloggedByText = intl.formatMessage(
messages.reblogged_by,
{ name: String(status.getIn(['account', 'acct'])) },
);
// @ts-ignore what the FUCK
account = status.account;

2
app/soapbox/components/ui/card/card.tsx
View File

@ -80,7 +80,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
};
interface ICardTitle {
title: string | React.ReactNode
title: React.ReactNode
}
/** A card's title. */

2
app/soapbox/components/ui/modal/modal.tsx
View File

@ -50,7 +50,7 @@ interface IModal {
/** Don't focus the "confirm" button on mount. */
skipFocus?: boolean,
/** Title text for the modal. */
title: string | React.ReactNode,
title: React.ReactNode,
width?: Widths,
}

12
app/soapbox/features/account/components/header.js
View File

@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
@ -457,7 +457,7 @@ class Header extends ImmutablePureComponent {
}
makeInfo() {
const { account, intl, me } = this.props;
const { account, me } = this.props;
const info = [];
@ -468,7 +468,7 @@ class Header extends ImmutablePureComponent {
<Badge
key='followed_by'
slug='opaque'
title={intl.formatMessage({ id: 'account.follows_you', defaultMessage: 'Follows you' })}
title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
/>,
);
} else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
@ -476,7 +476,7 @@ class Header extends ImmutablePureComponent {
<Badge
key='blocked'
slug='opaque'
title={intl.formatMessage({ id: 'account.blocked', defaultMessage: 'Blocked' })}
title={<FormattedMessage id='account.blocked' defaultMessage='Blocked' />}
/>,
);
}
@ -486,7 +486,7 @@ class Header extends ImmutablePureComponent {
<Badge
key='muted'
slug='opaque'
title={intl.formatMessage({ id: 'account.muted', defaultMessage: 'Muted' })}
title={<FormattedMessage id='account.muted' defaultMessage='Muted' />}
/>,
);
} else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
@ -494,7 +494,7 @@ class Header extends ImmutablePureComponent {
<Badge
key='domain_blocked'
slug='opaque'
title={intl.formatMessage({ id: 'account.domain_blocked', defaultMessage: 'Domain hidden' })}
title={<FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' />}
/>,
);
}

3
app/soapbox/features/admin/components/unapproved_account.tsx
View File

@ -2,13 +2,12 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { approveUsers } from 'soapbox/actions/admin';
import { rejectUserModal } from 'soapbox/actions/moderation';
import snackbar from 'soapbox/actions/snackbar';
import IconButton from 'soapbox/components/icon_button';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
import { rejectUserModal } from '../../../actions/moderation';
const messages = defineMessages({
approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },

2
app/soapbox/features/auth_login/components/login_form.tsx
View File

@ -26,7 +26,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
return (
<div>
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'login_form.header', defaultMessage: 'Sign In' })}</h1>
<h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
</div>
<div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>

3
app/soapbox/features/auth_login/components/otp_auth_form.js
View File

@ -11,6 +11,7 @@ import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/
const messages = defineMessages({
otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
otpCodeLabel: { id: 'login.fields.otp_code_label', defaultMessage: 'Two-factor code:' },
otpLoginFail: { id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' },
});
export default @connect()
@ -70,7 +71,7 @@ class OtpAuthForm extends ImmutablePureComponent {
<FormGroup
labelText={intl.formatMessage(messages.otpCodeLabel)}
hintText={intl.formatMessage(messages.otpCodeHint)}
errors={code_error ? [intl.formatMessage({ id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' })] : []}
errors={code_error ? [intl.formatMessage(messages.otpLoginFail)] : []}
>
<Input
name='code'

2
app/soapbox/features/auth_login/components/password_reset.js
View File

@ -44,7 +44,7 @@ class PasswordReset extends ImmutablePureComponent {
<div>
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
<h1 className='text-center font-bold text-2xl'>
{intl.formatMessage({ id: 'password_reset.header', defaultMessage: 'Reset Password' })}
<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
</h1>
</div>

28
app/soapbox/features/auth_login/components/password_reset_confirm.js → app/soapbox/features/auth_login/components/password_reset_confirm.tsx
View File

@ -1,14 +1,17 @@
import PropTypes from 'prop-types';
import * as React from 'react';
import { FormattedMessage, injectIntl, useIntl } from 'react-intl';
import { connect } from 'react-redux';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom';
import { resetPasswordConfirm } from 'soapbox/actions/security';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
const token = new URLSearchParams(window.location.search).get('reset_password_token');
const messages = defineMessages({
resetPasswordFail: { id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' },
});
const Statuses = {
IDLE: 'IDLE',
LOADING: 'LOADING',
@ -16,12 +19,9 @@ const Statuses = {
FAIL: 'FAIL',
};
const mapDispatchToProps = dispatch => ({
resetPasswordConfirm: (password, token) => dispatch(resetPasswordConfirm(password, token)),
});
const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
const PasswordResetConfirm = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const [password, setPassword] = React.useState('');
const [status, setStatus] = React.useState(Statuses.IDLE);
@ -32,10 +32,10 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
event.preventDefault();
setStatus(Statuses.LOADING);
resetPasswordConfirm(password, token)
dispatch(resetPasswordConfirm(password, token))
.then(() => setStatus(Statuses.SUCCESS))
.catch(() => setStatus(Statuses.FAIL));
}, [resetPasswordConfirm, password]);
}, [password]);
const onChange = React.useCallback((event) => {
setPassword(event.target.value);
@ -43,7 +43,7 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
const renderErrors = () => {
if (status === Statuses.FAIL) {
return [intl.formatMessage({ id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' })];
return [intl.formatMessage(messages.resetPasswordFail)];
}
return [];
@ -84,8 +84,4 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
);
};
PasswordResetConfirm.propTypes = {
resetPasswordConfirm: PropTypes.func,
};
export default injectIntl(connect(null, mapDispatchToProps)(PasswordResetConfirm));
export default PasswordResetConfirm;

9
app/soapbox/features/compose/components/search.tsx
View File

@ -6,16 +6,15 @@ import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppSelector } from 'soapbox/hooks';
import {
changeSearch,
clearSearch,
submitSearch,
showSearch,
} from '../../../actions/search';
} from 'soapbox/actions/search';
import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppSelector } from 'soapbox/hooks';
const messages = defineMessages({
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },

18
app/soapbox/features/edit_email/index.js → app/soapbox/features/edit_email/index.tsx
View File

@ -1,16 +1,17 @@
import * as React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { changeEmail } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from '../../components/ui';
import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({
header: { id: 'edit_email.header', defaultMessage: 'Change Email' },
updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
updateEmailFail: { id: 'security.update_email.fail', defaultMessage: 'Update email failed.' },
emailFieldLabel: { id: 'security.fields.email.label', defaultMessage: 'Email address' },
emailFieldPlaceholder: { id: 'edit_email.placeholder', defaultMessage: 'me@example.com' },
passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
submit: { id: 'security.submit', defaultMessage: 'Save changes' },
cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
@ -20,7 +21,7 @@ const initialState = { email: '', password: '' };
const EditEmail = () => {
const intl = useIntl();
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const [state, setState] = React.useState(initialState);
const [isLoading, setLoading] = React.useState(false);
@ -48,14 +49,14 @@ const EditEmail = () => {
return (
<Column
label={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
label={intl.formatMessage(messages.header)}
transparent
withHeader={false}
>
<Card variant='rounded'>
<CardHeader backHref='/settings'>
<CardTitle
title={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
title={intl.formatMessage(messages.header)}
/>
</CardHeader>
@ -63,9 +64,10 @@ const EditEmail = () => {
<Form onSubmit={handleSubmit}>
<FormGroup labelText={intl.formatMessage(messages.emailFieldLabel)}>
<Input
placeholder={intl.formatMessage({ id: 'edit_email.placeholder', defaultMessage: 'me@example.com' })}
type='text'
placeholder={intl.formatMessage(messages.emailFieldPlaceholder)}
name='email'
autocomplete='off'
autoComplete='off'
onChange={handleInputChange}
value={email}
/>

36
app/soapbox/features/email_confirmation/index.js → app/soapbox/features/email_confirmation/index.tsx
View File

@ -1,14 +1,12 @@
import PropTypes from 'prop-types';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { defineMessages, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom';
import { confirmChangedEmail } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';
import { Spinner } from 'soapbox/components/ui';
import { confirmChangedEmail } from '../../actions/security';
import { buildErrorMessage } from '../../utils/errors';
import { useAppDispatch } from 'soapbox/hooks';
import { buildErrorMessage } from 'soapbox/utils/errors';
const Statuses = {
IDLE: 'IDLE',
@ -16,11 +14,15 @@ const Statuses = {
FAIL: 'FAIL',
};
const messages = defineMessages({
success: { id: 'email_confirmation.success', defaultMessage: 'Your email has been confirmed!' },
});
const token = new URLSearchParams(window.location.search).get('confirmation_token');
const EmailConfirmation = () => {
const intl = useIntl();
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const [status, setStatus] = React.useState(Statuses.IDLE);
@ -32,10 +34,7 @@ const EmailConfirmation = () => {
dispatch(
snackbar.success(
intl.formatMessage({
id: 'email_confirmation.success',
defaultMessage: 'Your email has been confirmed!',
}),
intl.formatMessage(messages.success),
),
);
})
@ -43,14 +42,15 @@ const EmailConfirmation = () => {
setStatus(Statuses.FAIL);
if (error.response.data.error) {
const defaultMessage = buildErrorMessage(error.response.data.error);
const message = buildErrorMessage(error.response.data.error);
dispatch(
snackbar.error(
intl.formatMessage({
id: 'email_confirmation.fail',
defaultMessage,
}),
message,
// intl.formatMessage({
// id: 'email_confirmation.fail',
// defaultMessage,
// }),
),
);
}
@ -67,8 +67,4 @@ const EmailConfirmation = () => {
);
};
EmailConfirmation.propTypes = {
history: PropTypes.object,
};
export default EmailConfirmation;

6
app/soapbox/features/settings/index.tsx
View File

@ -23,6 +23,8 @@ const messages = defineMessages({
sessions: { id: 'settings.sessions', defaultMessage: 'Active sessions' },
deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
other: { id: 'settings.other', defaultMessage: 'Other options' },
mfaEnabled: { id: 'mfa.enabled', defaultMessage: 'Enabled' },
mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
});
/** User settings page. */
@ -77,8 +79,8 @@ const Settings = () => {
<ListItem label={intl.formatMessage(messages.changePassword)} onClick={navigateToChangePassword} />
<ListItem label={intl.formatMessage(messages.configureMfa)} onClick={navigateToMfa}>
{isMfaEnabled ?
intl.formatMessage({ id: 'mfa.enabled', defaultMessage: 'Enabled' }) :
intl.formatMessage({ id: 'mfa.disabled', defaultMessage: 'Disabled' })}
intl.formatMessage(messages.mfaEnabled) :
intl.formatMessage(messages.mfaDisabled)}
</ListItem>
{features.sessionsAPI && (
<ListItem label={intl.formatMessage(messages.sessions)} onClick={navigateToSessions} />

2
app/soapbox/features/ui/components/accordion.tsx
View File

@ -14,7 +14,7 @@ const messages = defineMessages({
interface IAccordion {
headline: React.ReactNode,
children?: string | React.ReactNode,
children?: React.ReactNode,
menu?: Menu,
expanded?: boolean,
onToggle?: (value: boolean) => void,

35
app/soapbox/features/verification/registration.tsx
View File

@ -1,6 +1,6 @@
import { AxiosError } from 'axios';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { Redirect } from 'react-router-dom';
@ -10,10 +10,24 @@ import { startOnboarding } from 'soapbox/actions/onboarding';
import snackbar from 'soapbox/actions/snackbar';
import { createAccount } from 'soapbox/actions/verification';
import { removeStoredVerification } from 'soapbox/actions/verification';
import { Button, Form, FormGroup, Input } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { getRedirectUrl } from 'soapbox/utils/redirect';
import { Button, Form, FormGroup, Input } from '../../components/ui';
const messages = defineMessages({
success: {
id: 'registrations.success',
defaultMessage: 'Welcome to {siteTitle}!',
},
usernameTaken: {
id: 'registrations.unprocessable_entity',
defaultMessage: 'This username has already been taken.',
},
error: {
id: 'registrations.error',
defaultMessage: 'Failed to register your account.',
},
});
const initialState = {
username: '',
@ -45,10 +59,7 @@ const Registration = () => {
dispatch(startOnboarding());
dispatch(
snackbar.success(
intl.formatMessage({
id: 'registrations.success',
defaultMessage: 'Welcome to {siteTitle}!',
}, { siteTitle }),
intl.formatMessage(messages.success, { siteTitle }),
),
);
})
@ -56,19 +67,13 @@ const Registration = () => {
if (error?.response?.status === 422) {
dispatch(
snackbar.error(
intl.formatMessage({
id: 'registrations.unprocessable_entity',
defaultMessage: 'This username has already been taken.',
}),
intl.formatMessage(messages.usernameTaken),
),
);
} else {
dispatch(
snackbar.error(
intl.formatMessage({
id: 'registrations.error',
defaultMessage: 'Failed to register your account.',
}),
intl.formatMessage(messages.error),
),
);
}
@ -90,7 +95,7 @@ const Registration = () => {
<div>
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<h1 className='text-center font-bold text-2xl'>
{intl.formatMessage({ id: 'registration.header', defaultMessage: 'Register your account' })}
<FormattedMessage id='registration.header' defaultMessage='Register your account' />
</h1>
</div>

22
app/soapbox/features/verification/steps/age-verification.js
View File

@ -1,13 +1,19 @@
import PropTypes from 'prop-types';
import * as React from 'react';
import DatePicker from 'react-datepicker';
import { useIntl } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import snackbar from 'soapbox/actions/snackbar';
import { verifyAge } from 'soapbox/actions/verification';
import { Button, Form, FormGroup, Text } from 'soapbox/components/ui';
import { Button, Form, FormGroup, Text } from '../../../components/ui';
const messages = defineMessages({
fail: {
id: 'age_verification.fail',
defaultMessage: 'You must be {ageMinimum, plural, one {# year} other {# years}} old or older.',
},
});
function meetsAgeMinimum(birthday, ageMinimum) {
const month = birthday.getUTCMonth();
@ -46,15 +52,9 @@ const AgeVerification = () => {
dispatch(verifyAge(birthday));
} else {
dispatch(
snackbar.error(
intl.formatMessage({
id: 'age_verification.fail',
defaultMessage: 'You must be {ageMinimum, plural, one {# year} other {# years}} old or older.',
values: {
snackbar.error(intl.formatMessage(messages.fail, {
ageMinimum,
},
}),
),
})),
);
}
}, [date, ageMinimum]);
@ -63,7 +63,7 @@ const AgeVerification = () => {
<div>
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<h1 className='text-center font-bold text-2xl'>
{intl.formatMessage({ id: 'age_verification.header', defaultMessage: 'Enter your birth date' })}
<FormattedMessage id='age_verification.header' defaultMessage='Enter your birth date' />
</h1>
</div>