i18next for PageHistory

resource/locales/en-US/translation.json

@@ -46,8 +46,10 @@
 
   "Unportalize": "Unportalize",
 
-  "View this version": "View this version",
+  "Go to this version": "View this version",
   "View diff": "View diff",
+  "No diff": "No diff",
+  "Shrink versions that have no diffs": "Shrink versions that have no diffs",
 
   "User ID": "User ID",
   "Home": "Home",

resource/locales/ja/translation.json

@@ -44,8 +44,10 @@
 
   "Unportalize": "ポータル解除",
 
-  "View this version": "このバージョンを見る",
-  "View diff": "差分を見る",
+  "Go to this version": "このバージョンを見る",
+  "View diff": "差分を表示",
+  "No diff": "差分なし",
+  "Shrink versions that have no diffs": "差分のないバージョンをコンパクトに表示する",
 
   "User ID": "ユーザーID",
   "Home": "ホーム",

src/client/js/app.js

@@ -558,5 +558,8 @@ socket.on('page:editingWithHackmd', function(data) {
 
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', function() {
-  ReactDOM.render(<PageHistory pageId={pageId} crowi={crowi} />, document.getElementById('revision-history'));
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <PageHistory pageId={pageId} crowi={crowi} />
+    </I18nextProvider>, document.getElementById('revision-history'));
 });

src/client/js/components/PageHistory.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
 
 import PageRevisionList from './PageHistory/PageRevisionList';
 
-export default class PageHistory extends React.Component {
+class PageHistory extends React.Component {
 
   constructor(props) {
     super(props);
@@ -119,6 +120,7 @@ export default class PageHistory extends React.Component {
     return (
       <div>
         <PageRevisionList
+          t={this.props.t}
           revisions={this.state.revisions}
           diffOpened={this.state.diffOpened}
           getPreviousRevision={this.getPreviousRevision}
@@ -130,6 +132,9 @@ export default class PageHistory extends React.Component {
 }
 
 PageHistory.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
   pageId: PropTypes.string,
   crowi: PropTypes.object.isRequired,
 };
+
+export default translate()(PageHistory);

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -39,6 +39,7 @@ export default class PageRevisionList extends React.Component {
     return (
       <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
         <Revision
+          t={this.props.t}
           revision={revision}
           revisionDiffOpened={revisionDiffOpened}
           hasDiff={hasDiff}
@@ -59,6 +60,8 @@ export default class PageRevisionList extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
+
     const revisions = this.props.revisions,
       revisionCount = this.props.revisions.length;
 
@@ -89,7 +92,7 @@ export default class PageRevisionList extends React.Component {
     return <React.Fragment>
       <div className='checkbox checkbox-info pull-right'>
         <input id='cbCompactize' type='checkbox' value={true} checked={this.state.isCompactNodiffRevisions} onChange={this.cbCompactizeChangeHandler}></input>
-        <label htmlFor='cbCompactize'>Compactize histories that have no diffs</label>
+        <label htmlFor='cbCompactize'>{ t('Shrink versions that have no diffs') }</label>
       </div>
       <div className="clearfix"></div>
       <div className={classNames.join(' ')}>
@@ -100,6 +103,7 @@ export default class PageRevisionList extends React.Component {
 }
 
 PageRevisionList.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
   revisions: PropTypes.array,
   diffOpened: PropTypes.object,
   onDiffOpenClicked: PropTypes.func.isRequired,

src/client/js/components/PageHistory/Revision.jsx

@@ -20,6 +20,8 @@ export default class Revision extends React.Component {
   }
 
   renderSimplifiedNodiff(revision) {
+    const { t } = this.props;
+
     const author = revision.author;
 
     let pic = '';
@@ -35,7 +37,7 @@ export default class Revision extends React.Component {
         <div className="m-l-10">
           <div className="revision-history-meta">
             <span className="text-muted small">
-              <UserDate dateTime={revision.createdAt} /> (No diff)
+              <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
             </span>
           </div>
         </div>
@@ -44,6 +46,8 @@ export default class Revision extends React.Component {
   }
 
   renderFull(revision) {
+    const { t } = this.props;
+
     const author = revision.author;
 
     let pic = '';
@@ -66,18 +70,18 @@ export default class Revision extends React.Component {
               <UserDate dateTime={revision.createdAt} />
             </p>
             <p>
-              <span className='d-inline-block' style={{ minWidth: '80px' }}>
+              <span className='d-inline-block' style={{ minWidth: '90px' }}>
                 { !this.props.hasDiff &&
-                  <span className='text-muted'>No diff</span>
+                  <span className='text-muted'>{ t('No diff') }</span>
                 }
                 { this.props.hasDiff &&
                   <a className="diff-view" onClick={this._onDiffOpenClicked}>
-                    <i className={iconClass}></i> View diff
+                    <i className={iconClass}></i> { t('View diff') }
                   </a>
                 }
               </span>
               <a href={'?revision=' + revision._id } className="m-l-10">
-                <i className="icon-login"></i> Go to this version
+                <i className="icon-login"></i> { t('Go to this version') }
               </a>
             </p>
           </div>
@@ -99,6 +103,7 @@ export default class Revision extends React.Component {
 }
 
 Revision.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
   revision: PropTypes.object,
   revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,