umputun#10 translate settings

frontend/app/components/comment/comment.tsx

@@ -563,7 +563,9 @@ class Comment extends Component<Props, State> {
 
     const o = {
       ...props.data,
-      controversyText: intl.formatMessage(messages.controversy, { value: (props.data.controversy || 0).toFixed(2) }),
+      controversyText: intl.formatMessage(messages.controversy, {
+        value: (props.data.controversy || 0).toFixed(2),
+      }),
       text:
         props.view === 'preview'
           ? getTextSnippet(props.data.text)

frontend/app/components/root/root.tsx

@@ -318,6 +318,7 @@ export class Root extends Component<Props, State> {
           {this.props.isSettingsVisible && (
             <div className="root__main">
               <Settings
+                intl={this.props.intl}
                 user={this.props.user}
                 hiddenUsers={this.props.hiddenUsers}
                 blockedUsers={this.props.blockedUsers}

frontend/app/components/settings/settings.tsx

@@ -5,9 +5,11 @@ import b from 'bem-react-helper';
 import { User, BlockedUser, Theme, BlockTTL } from '@app/common/types';
 import { getHandleClickProps } from '@app/common/accessibility';
 import { StoreState } from '@app/store';
+import { defineMessages, IntlShape, FormattedMessage, useIntl } from 'react-intl';
 
 interface Props {
   theme: Theme;
+  intl: IntlShape;
   user: StoreState['user'];
   blockedUsers: BlockedUser[];
   hiddenUsers: StoreState['hiddenUsers'];
@@ -29,6 +31,17 @@ interface State {
   unhiddenUsers: User['id'][];
 }
 
+const messages = defineMessages({
+  blockUser: {
+    id: 'settings.block-user',
+    defaultMessage: 'Do you want to block {userName}?',
+  },
+  unblockUser: {
+    id: 'settings.unblock-user',
+    defaultMessage: 'Do you want to unblock {userName}?',
+  },
+});
+
 export default class Settings extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -42,15 +55,15 @@ export default class Settings extends Component<Props, State> {
   }
 
   block = (user: BlockedUser) => {
-    if (!confirm(`Do you want to block ${user.name}?`)) return;
+    if (!confirm(this.props.intl.formatMessage(messages.blockUser, { userName: user.name }))) return;
     this.setState({
       unblockedUsers: this.state.unblockedUsers.filter(x => x !== user.id),
     });
     this.props.blockUser(user.id, user.name, 'permanently');
   };
 
   unblock = (user: BlockedUser) => {
-    if (!confirm(`Do you want to unblock ${user.name}?`)) return;
+    if (!confirm(this.props.intl.formatMessage(messages.unblockUser, { userName: user.name }))) return;
     this.setState({ unblockedUsers: this.state.unblockedUsers.concat([user.id]) });
     this.props.unblockUser(user.id);
     this.props.onUnblockSomeone();
@@ -133,15 +146,18 @@ export default class Settings extends Component<Props, State> {
                       >
                         {user.name || 'unknown'}
                       </span>
-                      <span className="settings__blocked-users-user-block-ttl"> {formatTime(new Date(user.time))}</span>
+                      <span className="settings__blocked-users-user-block-ttl">
+                        {' '}
+                        <FormatTime time={new Date(user.time)} />
+                      </span>
                       {isUserUnblocked && (
                         <span {...getHandleClickProps(() => this.block(user))} className="settings__action">
-                          block
+                          <FormattedMessage id="settings.block" defaultMessage="block" />
                         </span>
                       )}
                       {!isUserUnblocked && (
                         <span {...getHandleClickProps(() => this.unblock(user))} className="settings__action">
-                          unblock
+                          <FormattedMessage id="settings.unblock" defaultMessage="unblock" />
                         </span>
                       )}
                       <div>
@@ -163,16 +179,20 @@ export default class Settings extends Component<Props, State> {
 
 const currentYear = new Date().getFullYear();
 
-function formatTime(time: Date): string {
+function FormatTime({ time }: { time: Date }) {
+  const intl = useIntl();
   // let's assume that if block ttl is more than 50 years then user blocked permanently
-  if (time.getFullYear() - currentYear >= 50) return 'permanently';
-
-  // 'ru-RU' adds a dot as a separator
-  const date = time.toLocaleDateString(['ru-RU'], { day: '2-digit', month: '2-digit', year: '2-digit' });
-
-  // do it manually because Intl API doesn't add leading zeros to hours; idk why
-  const hours = `0${time.getHours()}`.slice(-2);
-  const mins = `0${time.getMinutes()}`.slice(-2);
-
-  return `until ${date} at ${hours}:${mins}`;
+  if (time.getFullYear() - currentYear >= 50)
+    return <FormattedMessage id="settings.permanently" defaultMessage="permanently" />;
+
+  return (
+    <FormattedMessage
+      id="settings.block-time"
+      defaultMessage="until {day} at {time}"
+      values={{
+        day: intl.formatDate(time),
+        time: intl.formatTime(time),
+      }}
+    />
+  );
 }

frontend/app/locales/en.json

@@ -82,5 +82,11 @@
   "root.pinned-comments": "Pinned comments",
   "root.powered-by": "Powered by <a>Remark42</a>",
   "user-info.unexpected-error": "Something went wrong",
-  "user-info.last-comments": "Last comments by {userName}"
+  "user-info.last-comments": "Last comments by {userName}",
+  "settings.block-user": "Do you want to block {userName}?",
+  "settings.unblock-user": "Do you want to unblock {userName}?",
+  "settings.block": "block",
+  "settings.unblock": "unblock",
+  "settings.permanently": "permanently",
+  "settings.block-time": "until {day} at {time}"
 }

frontend/app/locales/ru.json

@@ -82,5 +82,11 @@
   "root.pinned-comments": "Закреплённые комментарии",
   "root.powered-by": "Powered by <a>Remark42</a>",
   "user-info.unexpected-error": "Something went wrong",
-  "user-info.last-comments": "Последние комментарии {userName}"
+  "user-info.last-comments": "Последние комментарии {userName}",
+  "settings.block-user": "Заблокировать пользователя {userName}?",
+  "settings.unblock-user": "Разблокировать пользователя {userName}?",
+  "settings.block": "блокировать",
+  "settings.unblock": "разблокировать",
+  "settings.permanently": "навсегда",
+  "settings.block-time": "до {day} в {time}"
 }