Internationalize strings in compose-comment

src/l10n.json

@@ -211,5 +211,21 @@
     "comments.reportModal.prompt": "Are you sure you want to report this comment?",
     "comments.deleteModal.title": "Delete Comment",
     "comments.deleteModal.body": "Delete this comment? If the comment is mean or disrespectful, please click Report instead to let the Scratch Team know about it.",
-    "comments.reply": "reply"
+    "comments.reply": "reply",
+    "comments.isEmpty": "You can't post an empty comment",
+    "comments.isFlood": "Woah, seems like you're commenting really quickly. Please wait longer between posts.",
+    "comments.isBad": "Hmm...the bad word detector thinks there is a problem with your comment. Please change it and remember to be respectful.",
+    "comments.hasChatSite": "Uh oh! The comment contains a link to a website with unmoderated chat. For safety reasons, please do not link to these sites!",
+    "comments.isSpam": "Hmm, seems like you've posted the same comment a bunch of times. Please don't spam.",
+    "comments.isMuted": "Hmm, the filterbot is pretty sure your recent comments weren't ok for Scratch, so your account has been muted for the rest of the day. :/",
+    "comments.isUnconstructive": "Hmm, the filterbot thinks your comment may be mean or disrespectful. Remember, most projects on Scratch are made by people who are just learning how to program.",
+    "comments.isDisallowed": "Hmm, it looks like comments have been turned off for this page. :/",
+    "comments.isIPMuted": "Sorry, the Scratch Team had to prevent your network from sharing comments or projects because it was used to break our community guidelines too many times. You can still share comments and projects from another network.",
+    "comments.isTooLong": "That comment is too long! Please find a way to shorten your text.",
+    "comments.error": "Oops! Something went wrong posting your comment",
+    "comments.posting": "Posting...",
+    "comments.post": "Post",
+    "comments.cancel": "Cancel",
+    "comments.lengthWarning": "{remainingCharacters, plural, one {1 character left} other {{remainingCharacters} characters left}}",
+    "comments.seeMoreReplies": "{repliesCount, plural, one {See 1 more reply} other {See all {repliesCount} replies}}"
 }

src/views/preview/comment/compose-comment.jsx

@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const keyMirror = require('keymirror');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const Avatar = require('../../../components/avatar/avatar.jsx');
@@ -25,29 +26,6 @@ const ComposeStatus = keyMirror({
     REJECTED: null
 });
 
-/* TODO translations */
-const CommentErrorMessages = {
-    isEmpty: "You can't post an empty comment",
-    isFlood: "Woah, seems like you're commenting really quickly. Please wait longer between posts.",
-    isBad: 'Hmm...the bad word detector thinks there is a problem with your comment. ' +
-        'Please change it and remember to be respectful.',
-    hasChatSite: 'Uh oh! This comment contains a link to a website with unmoderated chat.' +
-        'For safety reasons, please do not link to these sites!',
-    isSpam: "Hmm, seems like you've posted the same comment a bunch of times. Please don't spam.",
-    isMuted: "Hmm, the filterbot is pretty sure your recent comments weren't ok for Scratch, " +
-        'so your account has been muted for the rest of the day. :/',
-    isUnconstructive: 'Hmm, the filterbot thinks your comment may be mean or disrespectful. ' +
-        'Remember, most projects on Scratch are made by people who are just learning how to program.',
-    isDisallowed: 'Hmm, it looks like comments have been turned off for this page. :/',
-    // TODO implement the special modal for ip mute bans that includes links to appeals
-    //      this is just a stub of the actual message
-    isIPMuted: 'Sorry, the Scratch Team had to prevent your network from sharing comments or ' +
-        'projects because it was used to break our community guidelines too many times.' +
-        'You can still share comments and projects from another network.',
-    isTooLong: "That's too long! Please find a way to shorten your text.",
-    error: 'Oops! Something went wrong'
-};
-
 class ComposeComment extends React.Component {
     constructor (props) {
         super(props);
@@ -91,10 +69,7 @@ class ComposeComment extends React.Component {
                 // Note: does not reset the message state
                 this.setState({
                     status: ComposeStatus.REJECTED,
-                    // If there is a special error message for the rejected reason,
+                    error: body.rejected
-                    // use it. Otherwise, use the generic 'error' ("Oops!...")
-                    error: CommentErrorMessages[body.rejected] ?
-                        body.rejected : 'error'
                 });
                 return;
             }
@@ -132,7 +107,7 @@ class ComposeComment extends React.Component {
                     {this.state.error ? (
                         <FlexRow className="compose-error-row">
                             <div className="compose-error-tip">
-                                {CommentErrorMessages[this.state.error] || 'Unknown error'}
+                                <FormattedMessage id={`comments.${this.state.error}`} />
                             </div>
                         </FlexRow>
                     ) : null}
@@ -152,24 +127,28 @@ class ComposeComment extends React.Component {
                             onClick={this.handlePost}
                         >
                             {this.state.status === ComposeStatus.SUBMITTING ? (
-                                'Posting...' /* TODO internationalize */
+                                <FormattedMessage id="comments.posting" />
                             ) : (
-                                'Post' /* TODO internationalize */
+                                <FormattedMessage id="comments.post" />
                             )}
                         </Button>
                         <Button
                             className="compose-cancel"
                             onClick={this.handleCancel}
                         >
-                            Cancel {/* TODO internationalize */}
+                            <FormattedMessage id="comments.cancel" />
                         </Button>
                         <span
                             className={classNames('compose-limit',
                                 MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
                                     'compose-valid' : 'compose-invalid')}
                         >
-                            {/* TODO internationalize */}
+                            <FormattedMessage
-                            {MAX_COMMENT_LENGTH - this.state.message.length} characters left
+                                id="comments.lengthWarning"
+                                values={{
+                                    remainingCharacters: MAX_COMMENT_LENGTH - this.state.message.length
+                                }}
+                            />
                         </span>
                     </FlexRow>
                 </FlexRow>

src/views/preview/comment/top-level-comment.jsx

@@ -2,6 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const Comment = require('./comment.jsx');
@@ -110,7 +111,14 @@ class TopLevelComment extends React.Component {
                     <a
                         className="expand-thread"
                         onClick={this.handleExpandThread}
-                    >See all {replies.length} replies</a>
+                    >
+                        <FormattedMessage
+                            id="comments.seeMoreReplies"
+                            values={{
+                                repliesCount: replies.length
+                            }}
+                        />
+                    </a>
                 }
             </FlexRow>
         );

src/views/preview/l10n.json

@@ -7,6 +7,7 @@
     "preview.speechExtensionChip": "Google Speech",
     "preview.translateExtensionChip": "Google Translate",
     "preview.videoMotionChip": "Video Motion",
+    "preview.comments.header": "Comments",
     "preview.comments.turnOff": "Turn off commenting",
     "preview.comments.turnedOff": "Sorry, comment posting has been turned off for this project."
 }

src/views/preview/presentation.jsx

@@ -320,7 +320,7 @@ const PreviewPresentation = ({
                             <FlexRow className="preview-row">
                                 <div className="comments-container">
                                     <FlexRow className="comments-header">
-                                        <h4>Comments</h4>
+                                        <h4><FormattedMessage id="preview.comments.header" /></h4>
                                         {userOwnsProject ? (
                                             <div>
                                                 <label>