Add internationalization (#114)

🇬🇧 and 🇮🇹

app/javascript/components/Board/NewPost.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import NewPostForm from './NewPostForm';
 import Spinner from '../shared/Spinner';
@@ -86,7 +87,7 @@ class NewPost extends React.Component<Props, State> {
 
     if (title === '') {
       this.setState({
-        error: 'You forgot to enter a title!',
+        error: I18n.t('board.new_post.no_title'),
         isLoading: false,
       });
       return;
@@ -109,7 +110,7 @@ class NewPost extends React.Component<Props, State> {
 
       if (res.status === HttpStatus.Created) {
         this.setState({
-          success: 'Post published! You will be redirected soon...',
+          success: I18n.t('board.new_post.submit_success'),
 
           title: '',
           description: '',
@@ -124,7 +125,7 @@ class NewPost extends React.Component<Props, State> {
 
     } catch (e) {
       this.setState({
-        error: 'An unknown error occurred, try again.'
+        error: I18n.t('board.new_post.submit_error')
       });
     }
   }
@@ -151,11 +152,16 @@ class NewPost extends React.Component<Props, State> {
               onClick={this.toggleForm}
               className="submitBtn"
               outline={showForm}>
-              { showForm ? 'Cancel' : 'Submit feedback' }
+              {
+                showForm ?
+                  I18n.t('board.new_post.cancel_button')
+                :
+                  I18n.t('board.new_post.submit_button')
+              }
             </Button>
           :
             <a href="/users/sign_in" className="btn btn-dark">
-              Log in / Sign up
+              {I18n.t('board.new_post.login_button')}
             </a>
         }
 

app/javascript/components/Board/NewPostForm.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import Button from '../shared/Button';
 
@@ -20,7 +21,7 @@ const NewPostForm = ({
   <div className="newPostForm">
     <form>
       <div className="form-group">
-        <label htmlFor="postTitle">Title</label>
+        <label htmlFor="postTitle">{I18n.t('board.new_post.title')}</label>
         <input
           type="text"
           value={title}
@@ -33,7 +34,7 @@ const NewPostForm = ({
         />
       </div>
       <div className="form-group">
-        <label htmlFor="postDescription">Description (optional)</label>
+        <label htmlFor="postDescription">{I18n.t('board.new_post.description')}</label>
         <textarea
           value={description}
           onChange={e => handleDescriptionChange(e.target.value)}
@@ -44,7 +45,7 @@ const NewPostForm = ({
         ></textarea>
       </div>
       <Button onClick={e => handleSubmit(e)} className="submitBtn d-block mx-auto">
-        Submit feedback
+        {I18n.t('board.new_post.submit_button')}
       </Button>
     </form>
   </div>

app/javascript/components/Board/PostList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import I18n from 'i18n-js';
 import InfiniteScroll from 'react-infinite-scroller';
 
 import PostListItem from './PostListItem';
@@ -64,7 +64,7 @@ const PostList = ({
             />
           ))
         :
-          areLoading ? <p></p> : <CenteredMutedText>There are no posts.</CenteredMutedText>
+          areLoading ? <p></p> : <CenteredMutedText>{I18n.t('board.posts_list.empty')}</CenteredMutedText>
       }
     </InfiniteScroll>
   </div>

app/javascript/components/Board/PostStatusFilter.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import PostStatusListItem from './PostStatusListItem';
 import Spinner from '../shared/Spinner';
@@ -24,7 +25,7 @@ const PostStatusFilter = ({
   currentFilter,
 }: Props) => (
   <div className="postStatusFilterContainer sidebarCard">
-    <BoxTitleText>Filter by status</BoxTitleText>
+    <BoxTitleText>{I18n.t('board.filter_box.title')}</BoxTitleText>
     {
       postStatuses.map((postStatus, i) => (
         <PostStatusListItem

app/javascript/components/Board/SearchFilter.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import { BoxTitleText } from '../shared/CustomTexts';
 
@@ -9,7 +10,7 @@ interface Props {
 
 const SearchFilter = ({ searchQuery, handleChange }: Props) => (
   <div className="sidebarCard">
-    <BoxTitleText>Search</BoxTitleText>
+    <BoxTitleText>{I18n.t('board.search_box.title')}</BoxTitleText>
 
     <input
       type="search"