Add internationalization (#114)

🇬🇧 and 🇮🇹

app/javascript/components/Comments/Comment.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 import Gravatar from 'react-gravatar';
 
 import NewComment from './NewComment';
@@ -50,12 +51,24 @@ const Comment = ({
     <div className="commentHeader">
       <Gravatar email={userEmail} size={28} className="gravatar" />
       <span className="commentAuthor">{userFullName}</span>
-      { isPostUpdate ? <span className="postUpdateBadge">Post update</span> : null }
+      {
+        isPostUpdate ?
+          <span className="postUpdateBadge">
+            {I18n.t('post.comments.post_update_badge')}
+          </span>
+        :
+          null
+      }
     </div>
     <p className="commentBody">{body}</p>
     <div className="commentFooter">
       <a className="commentReplyButton commentLink" onClick={handleToggleCommentReply}>
-        { replyForm.isOpen ? 'Cancel' : 'Reply' }
+        {
+          replyForm.isOpen ?
+            I18n.t('common.buttons.cancel')
+          :
+            I18n.t('post.comments.reply_button')
+        }
       </a>
       {
         isPowerUser ?
@@ -68,14 +81,18 @@ const Comment = ({
               { 'Post update: ' + (isPostUpdate ? 'yes' : 'no') }
             </a>
             <Separator />
-            <a href={`/admin/comments/${id}/edit`} className="commentLink" data-turbolinks="false">Edit</a>
+            <a href={`/admin/comments/${id}/edit`} className="commentLink" data-turbolinks="false">
+              {I18n.t('common.buttons.edit')}
+            </a>
             <Separator />
             <a
               href={`/admin/comments/${id}`}
               className="commentLink"
               data-method="delete"
               data-confirm="Are you sure?"
-              data-turbolinks="false">Delete</a>
+              data-turbolinks="false">
+                {I18n.t('common.buttons.delete')}
+            </a>
 
           </React.Fragment>
         :

app/javascript/components/Comments/CommentsP.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import NewComment from './NewComment';
 import CommentList from './CommentList';
@@ -7,6 +8,7 @@ import { DangerText } from '../shared/CustomTexts';
 
 import IComment from '../../interfaces/IComment';
 import { ReplyFormState } from '../../reducers/replyFormReducer';
+import Separator from '../shared/Separator';
 
 interface Props {
   postId: number;
@@ -106,7 +108,9 @@ class CommentsP extends React.Component<Props> {
         { error ? <DangerText>{error}</DangerText> : null }
 
         <div className="commentsTitle">
-          activity &bull; {comments.length} comment{comments.length === 1 ? '' : 's'}
+          {I18n.t('post.comments.title')}
+          <Separator />
+          {I18n.t('common.comments_number', { count: comments.length })}
         </div>
 
         <CommentList

app/javascript/components/Comments/NewComment.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 import Gravatar from 'react-gravatar';
 
 import NewCommentUpdateSection from './NewCommentUpdateSection';
@@ -50,13 +51,13 @@ const NewComment = ({
               <textarea
                 value={body}
                 onChange={handleChange}
-                placeholder="Leave a comment"
+                placeholder={I18n.t('post.new_comment.body_placeholder')}
                 className="newCommentBody"
               />
               <Button
                 onClick={() => handleSubmit(body, parentId, postUpdateFlagValue)}
                 className="submitCommentButton">
-                { isSubmitting ? <Spinner color="light" /> : 'Submit' }
+                { isSubmitting ? <Spinner color="light" /> : I18n.t('post.new_comment.submit_button') }
               </Button>
             </div>
             {
@@ -70,9 +71,12 @@ const NewComment = ({
             }
           </React.Fragment>
         :
-          <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
+          <a href="/users/sign_in" className="loginInfo">
+            {I18n.t('post.new_comment.not_logged_in')}
+          </a>
       }
     </div>
+
     { error ? <DangerText>{error}</DangerText> : null }
   </React.Fragment>
 );

app/javascript/components/Comments/NewCommentUpdateSection.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
+
 import { MutedText } from '../shared/CustomTexts';
 
 interface Props {
@@ -19,11 +21,11 @@ const NewCommentUpdateSection = ({
         checked={postUpdateFlagValue || false}
       />
        
-      <label htmlFor="isPostUpdateFlag">Mark as post update</label>
+      <label htmlFor="isPostUpdateFlag">{I18n.t('post.new_comment.is_post_update')}</label>
     </div>
     {
       postUpdateFlagValue ?
-        <MutedText>Users that follow this post will be notified</MutedText>
+        <MutedText>{I18n.t('post.new_comment.user_notification')}</MutedText>
       :
         null
     }