From 258ed6912b9d557294518ccee66929b02a8c4b76 Mon Sep 17 00:00:00 2001 From: konstantin krivlenia <krivlenia@gmail.com> Date: Wed, 19 Feb 2020 13:01:37 +0300 Subject: [PATCH] #10 use messages value for translate reference --- .../app/components/auth-panel/auth-panel.tsx | 87 +++++-------------- 1 file changed, 24 insertions(+), 63 deletions(-) diff --git a/frontend/app/components/auth-panel/auth-panel.tsx b/frontend/app/components/auth-panel/auth-panel.tsx index e146e3d638..402807a360 100644 --- a/frontend/app/components/auth-panel/auth-panel.tsx +++ b/frontend/app/components/auth-panel/auth-panel.tsx @@ -47,22 +47,16 @@ interface State { sortSelectFocused: boolean; } -defineMessages({ - 'authPanel.other-provider': { +const authPanelMessages = defineMessages({ + otherProvider: { id: 'authPanel.other-provider', defaultMessage: 'Other', }, -}); - -defineMessages({ - 'authPanel.anonymous-provider': { + anonymousProvider: { id: 'authPanel.anonymous-provider', defaultMessage: 'Anonymous', }, -}); - -defineMessages({ - 'authPanel.or-provider': { + orProvider: { id: 'authPanel.or-provider', defaultMessage: 'or', }, @@ -208,10 +202,7 @@ export class AuthPanel extends Component<Props, State> { renderProvider = (provider: AuthProvider['name'], dropdown = false) => { if (provider === 'anonymous') { - const anonymous = this.props.intl.formatMessage({ - id: 'authPanel.anonymous-provider', - defaultMessage: 'authPanel.anonymous-provider', - }); + const anonymous = this.props.intl.formatMessage(authPanelMessages.anonymousProvider); return ( <Dropdown title={anonymous} @@ -262,10 +253,7 @@ export class AuthPanel extends Component<Props, State> { }; renderOther = (providers: AuthProvider['name'][]) => { - const other = this.props.intl.formatMessage({ - id: 'authPanel.other-provider', - defaultMessage: 'authPanel.other-provider', - }); + const other = this.props.intl.formatMessage(authPanelMessages.otherProvider); return ( <Dropdown title={other} theme={this.props.theme} onTitleClick={this.onEmailTitleClick}> {providers.map(provider => ( @@ -292,10 +280,7 @@ export class AuthPanel extends Component<Props, State> { })(); const isAboveThreshold = sortedProviders.length > threshold; - const or = this.props.intl.formatMessage({ - id: 'authPanel.or-provider', - defaultMessage: 'authPanel.or-provider', - }); + const or = this.props.intl.formatMessage(authPanelMessages.orProvider); return ( <div className="auth-panel__column"> <FormattedMessage id="authPanel.login" defaultMessage="Login:" />{' '} @@ -459,36 +444,36 @@ export class AuthPanel extends Component<Props, State> { } } -defineMessages({ - 'commentsSort.best': { +const sortMessages = defineMessages({ + best: { id: 'commentsSort.best', defaultMessage: 'Best', }, - 'commentsSort.worst': { + worst: { id: 'commentsSort.worst', defaultMessage: 'Worst', }, - 'commentsSort.newest': { + newest: { id: 'commentsSort.newest', defaultMessage: 'Newest', }, - 'commentsSort.oldest': { + oldest: { id: 'commentsSort.oldest', defaultMessage: 'Oldest', }, - 'commentsSort.recently-updated': { + recentlyUpdated: { id: 'commentsSort.recently-updated', defaultMessage: 'Recently updated', }, - 'commentsSort.least-recently-updated': { + leastRecentlyUpdated: { id: 'commentsSort.least-recently-updated', defaultMessage: 'Least recently updated', }, - 'commentsSort.most-controversial': { + mostControversial: { id: 'commentsSort.most-controversial', defaultMessage: 'Most controversial', }, - 'commentsSort.least-controversial': { + leastControversial: { id: 'commentsSort.least-controversial', defaultMessage: 'Least controversial', }, @@ -502,59 +487,35 @@ function getSortArray(currentSort: Sorting, intl: IntlShape) { }[] = [ { value: '-score', - label: intl.formatMessage({ - id: 'commentsSort.best', - defaultMessage: 'commentsSort.best', - }), + label: intl.formatMessage(sortMessages.best), }, { value: '+score', - label: intl.formatMessage({ - id: 'commentsSort.worst', - defaultMessage: 'commentsSort.worst', - }), + label: intl.formatMessage(sortMessages.worst), }, { value: '-time', - label: intl.formatMessage({ - id: 'commentsSort.newest', - defaultMessage: 'commentsSort.newest', - }), + label: intl.formatMessage(sortMessages.newest), }, { value: '+time', - label: intl.formatMessage({ - id: 'commentsSort.oldest', - defaultMessage: 'commentsSort.oldest', - }), + label: intl.formatMessage(sortMessages.oldest), }, { value: '-active', - label: intl.formatMessage({ - id: 'commentsSort.recently-updated', - defaultMessage: 'commentsSort.recently-updated', - }), + label: intl.formatMessage(sortMessages.recentlyUpdated), }, { value: '+active', - label: intl.formatMessage({ - id: 'commentsSort.least-recently-updated', - defaultMessage: 'commentsSort.least-recently-updated', - }), + label: intl.formatMessage(sortMessages.leastRecentlyUpdated), }, { value: '-controversy', - label: intl.formatMessage({ - id: 'commentsSort.most-controversial', - defaultMessage: 'commentsSort.most-controversial', - }), + label: intl.formatMessage(sortMessages.mostControversial), }, { value: '+controversy', - label: intl.formatMessage({ - id: 'commentsSort.least-controversial', - defaultMessage: 'commentsSort.least-controversial', - }), + label: intl.formatMessage(sortMessages.leastControversial), }, ];