umputun#10 localize some comment form message

Mavrin · Feb 18, 2020 · b6f7f93 · b6f7f93
1 parent 8af1e0d
commit b6f7f93
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 15 deletions.
diff --git a/frontend/app/components/comment-form/comment-form.test.tsx b/frontend/app/components/comment-form/comment-form.test.tsx
@@ -8,17 +8,23 @@ import { StaticStore } from '@app/common/static_store';
 import { CommentForm, Props } from './comment-form';
 import { SubscribeByEmail } from './__subscribe-by-email';
 
-const DEFAULT_PROPS: Readonly<Props> = {
+const DEFAULT_PROPS: Readonly<Omit<Props, 'intl'>> = {
   mode: 'main',
   theme: 'light',
   onSubmit: () => Promise.resolve(),
   getPreview: () => Promise.resolve(''),
   user: null,
 };
 
+const intl = {
+  formatMessage() {
+    return '';
+  },
+} as any;
+
 describe('<CommentForm />', () => {
   it('should render without control panel, preview button, and rss links in "simple view" mode', () => {
-    const props = { ...DEFAULT_PROPS, simpleView: true };
+    const props = { ...DEFAULT_PROPS, simpleView: true, intl };
     const wrapper = shallow(<CommentForm {...props} />);
 
     expect(wrapper.exists('.comment-form__control-panel')).toEqual(false);
@@ -29,7 +35,7 @@ describe('<CommentForm />', () => {
   it('should be rendered with email subscription button', () => {
     StaticStore.config.email_notifications = true;
 
-    const props = { ...DEFAULT_PROPS, user };
+    const props = { ...DEFAULT_PROPS, user, intl };
     const wrapper = shallow(<CommentForm {...props} />);
 
     expect(wrapper.exists(SubscribeByEmail)).toEqual(true);
@@ -38,7 +44,7 @@ describe('<CommentForm />', () => {
   it('should be rendered without email subscription button when email_notifications disabled', () => {
     StaticStore.config.email_notifications = false;
 
-    const props = { ...DEFAULT_PROPS, user };
+    const props = { ...DEFAULT_PROPS, user, intl };
     const wrapper = shallow(<CommentForm {...props} />);
 
     expect(wrapper.exists(SubscribeByEmail)).toEqual(false);

diff --git a/frontend/app/components/comment-form/comment-form.tsx b/frontend/app/components/comment-form/comment-form.tsx
@@ -1,6 +1,6 @@
 /** @jsx createElement */
 import { createElement, Component, createRef, Fragment } from 'preact';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 import b, { Mix } from 'bem-react-helper';
 
 import { User, Theme, Image, ApiError } from '@app/common/types';
@@ -35,6 +35,7 @@ export interface Props {
   /** action on cancel. optional as root input has no cancel option */
   onCancel?: () => void;
   uploadImage?: (image: File) => Promise<Image>;
+  intl: IntlShape;
 }
 
 interface State {
@@ -54,6 +55,13 @@ interface State {
 
 const ImageMimeRegex = /image\//i;
 
+defineMessages({
+  'commentForm.input-placeholder': {
+    id: 'commentForm.input-placeholder',
+    defaultMessage: 'Your comment here',
+  },
+});
+
 export class CommentForm extends Component<Props, State> {
   /** reference to textarea element */
   textAreaRef = createRef<TextareaAutosize>();
@@ -344,7 +352,10 @@ export class CommentForm extends Component<Props, State> {
       reply: <FormattedMessage id="commentForm.replay" defaultMessage="Replay" />,
     };
     const label = buttonText || Labels[props.mode || 'main'];
-
+    const placeholderMessage = this.props.intl.formatMessage({
+      id: 'commentForm.input-placeholder',
+      defaultMessage: 'commentForm.input-placeholder',
+    });
     return (
       <form
         className={b('comment-form', {
@@ -376,7 +387,7 @@ export class CommentForm extends Component<Props, State> {
               onPaste={this.onPaste}
               ref={this.textAreaRef}
               className="comment-form__field"
-              placeholder="Your comment here"
+              placeholder={placeholderMessage}
               value={text}
               maxLength={maxLength}
               onInput={this.onInput}
@@ -416,13 +427,19 @@ export class CommentForm extends Component<Props, State> {
           {!props.simpleView && props.mode === 'main' && (
             <div className="comment-form__rss">
               <div className="comment-form__markdown">
-                Styling with{' '}
-                <a className="comment-form__markdown-link" target="_blank" href="markdown-help.html">
-                  Markdown
-                </a>
-                {' is supported'}
+                <FormattedMessage
+                  id="commentForm.notice-about-styling"
+                  defaultMessage="Styling with <a>Markdown</a> is supported"
+                  values={{
+                    a: (title: string) => (
+                      <a class="comment-form__markdown-link" target="_blank" href="markdown-help.html">
+                        {title}
+                      </a>
+                    ),
+                  }}
+                />
               </div>
-              {'Subscribe by '}
+              <FormattedMessage id="commentForm.subscribe-by" defaultMessage="Subscribe by" />{' '}
               <SubscribeByRSS userId={props.user !== null ? props.user.id : null} />
               {StaticStore.config.email_notifications && (
                 <Fragment>

diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx
@@ -791,6 +791,7 @@ export class Comment extends Component<Props, State> {
 
         {isReplying && props.view === 'main' && (
           <CommentForm
+            intl={this.props.intl}
             user={props.user}
             theme={props.theme}
             value=""
@@ -807,6 +808,7 @@ export class Comment extends Component<Props, State> {
 
         {isEditing && props.view === 'main' && (
           <CommentForm
+            intl={this.props.intl}
             user={props.user}
             theme={props.theme}
             value={o.orig}

diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
@@ -244,6 +244,7 @@ export class Root extends Component<Props, State> {
             <div className="root__main">
               {!isGuest && !isCommentsDisabled && (
                 <CommentForm
+                  intl={this.props.intl}
                   theme={props.theme}
                   mix="root__input"
                   mode="main"

diff --git a/frontend/app/locales/en.json b/frontend/app/locales/en.json
@@ -37,5 +37,8 @@
   "comment.pin-comment": "Do you want to pin this comment?",
   "comment.unpin-comment": "Do you want to unpin this comment?",
   "comment.verify-user": "Do you want to verify {userName}?",
-  "comment.unverify-user": "Do you want to unverify {userName}?"
+  "comment.unverify-user": "Do you want to unverify {userName}?",
+  "commentForm.input-placeholder": "Your comment here",
+  "commentForm.notice-about-styling": "Styling with <a>Markdown</a> is supported",
+  "commentForm.subscribe-by": "Subscribe by"
 }
diff --git a/frontend/app/locales/ru.json b/frontend/app/locales/ru.json
@@ -37,5 +37,8 @@
   "comment.pin-comment": "Закрепить комментарий?",
   "comment.unpin-comment": "Открепить комментарий?",
   "comment.verify-user": "Do you want to verify {userName}?",
-  "comment.unverify-user": "Do you want to unverify {userName}?"
+  "comment.unverify-user": "Do you want to unverify {userName}?",
+  "commentForm.input-placeholder": "Написать комментарий",
+  "commentForm.notice-about-styling": "Поддерживается <a>Markdown</a> форматирование",
+  "commentForm.subscribe-by": "Подписаться"
 }