From c848581377e989b8e010108dd4439519a4da4a83 Mon Sep 17 00:00:00 2001
From: konstantin krivlenia <krivlenia@gmail.com>
Date: Wed, 19 Feb 2020 18:42:44 +0300
Subject: [PATCH] #10 translate user info

---
 .../app/components/user-info/user-info.tsx    | 23 +++++++++++++++----
 frontend/app/locales/en.json                  |  4 +++-
 frontend/app/locales/ru.json                  |  4 +++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/user-info/user-info.tsx b/frontend/app/components/user-info/user-info.tsx
index 68d298ae47..1c6f6db6cc 100644
--- a/frontend/app/components/user-info/user-info.tsx
+++ b/frontend/app/components/user-info/user-info.tsx
@@ -13,12 +13,20 @@ import { AvatarIcon } from '../avatar-icon';
 import postMessage from '@app/utils/postMessage';
 import { bindActions } from '@app/utils/actionBinder';
 import { useActions } from '@app/hooks/useAction';
+import { useIntl, defineMessages, FormattedMessage, IntlShape } from 'react-intl';
 
 const boundActions = bindActions({ fetchInfo });
 
+const messages = defineMessages({
+  unexpectedError: {
+    id: 'user-info.unexpected-error',
+    defaultMessage: 'Something went wrong',
+  },
+});
+
 type Props = {
   comments: Comment[] | null;
-} & typeof boundActions;
+} & typeof boundActions & { intl: IntlShape };
 
 interface State {
   isLoading: boolean;
@@ -36,7 +44,7 @@ class UserInfo extends Component<Props, State> {
           this.setState({ isLoading: false });
         })
         .catch(() => {
-          this.setState({ isLoading: false, error: 'Something went wrong' });
+          this.setState({ isLoading: false, error: this.props.intl.formatMessage(messages.unexpectedError) });
         });
     }
 
@@ -60,7 +68,13 @@ class UserInfo extends Component<Props, State> {
     return (
       <div className={b('user-info', {})}>
         <AvatarIcon mix="user-info__avatar" picture={user.picture} />
-        <p className="user-info__title">Last comments by {user.name}</p>
+        <p className="user-info__title">
+          <FormattedMessage
+            id="user-info.last-comments"
+            defaultMessage="Last comments by {userName}"
+            values={{ userName: user.name }}
+          />
+        </p>
         <p className="user-info__id">{user.id}</p>
 
         {!!comments && <LastCommentsList isLoading={isLoading} comments={comments} />}
@@ -85,5 +99,6 @@ const commentsSelector = (state: StoreState) => state.userComments![userInfo.id!
 export const ConnectedUserInfo: FunctionComponent = () => {
   const comments = useSelector(commentsSelector);
   const actions = useActions(boundActions);
-  return <UserInfo comments={comments} {...actions} />;
+  const intl = useIntl();
+  return <UserInfo comments={comments} {...actions} intl={intl} />;
 };
diff --git a/frontend/app/locales/en.json b/frontend/app/locales/en.json
index f853048af2..ce740e7856 100644
--- a/frontend/app/locales/en.json
+++ b/frontend/app/locales/en.json
@@ -80,5 +80,7 @@
   "commentForm.subscribe-or": "or",
   "root.show-more": "Show more",
   "root.pinned-comments": "Pinned comments",
-  "root.powered-by": "Powered by <a>Remark42</a>"
+  "root.powered-by": "Powered by <a>Remark42</a>",
+  "user-info.unexpected-error": "Something went wrong",
+  "user-info.last-comments": "Last comments by {userName}"
 }
diff --git a/frontend/app/locales/ru.json b/frontend/app/locales/ru.json
index 4015352ca9..1173ec5897 100644
--- a/frontend/app/locales/ru.json
+++ b/frontend/app/locales/ru.json
@@ -80,5 +80,7 @@
   "commentForm.subscribe-or": "или",
   "root.show-more": "Показать ещё",
   "root.pinned-comments": "Закреплённые комментарии",
-  "root.powered-by": "Powered by <a>Remark42</a>"
+  "root.powered-by": "Powered by <a>Remark42</a>",
+  "user-info.unexpected-error": "Something went wrong",
+  "user-info.last-comments": "Последние комментарии {userName}"
 }