traslate

resource/locales/en-US/translation.json

@@ -393,6 +393,15 @@
     "someone_editing": "Someone editing this page on HackMD",
     "this_page_has_draft": "This page has a draft on HackMD"
   },
+  "search_result": {
+    "result_meta": "Found {{total}} pages with \"{{keyword}}\".",
+    "deletion_mode_btn_lavel": "Deletion mode",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "check_all": "Check all",
+    "deletion_modal_header": "Deleting pages:",
+    "delete_completely": "Delete completely"
+  },
   "security_setting": {
     "Security settings": "Security settings",
     "Guest Users Access": "Guest Users Access",

resource/locales/ja/translation.json

@@ -391,6 +391,15 @@
     "someone_editing": "このページは、HackMD で編集されています。",
     "this_page_has_draft": "このページは、HackMD のドラフトがあります。"
   },
+  "search_result": {
+    "result_meta": "{{total}}件のページが見つかりました。検索ワード: \"{{keyword}}\"",
+    "deletion_mode_btn_lavel": "ページを指定して削除",
+    "cancel": "キャンセル",
+    "delete": "削除",
+    "check_all": "すべてチェック",
+    "deletion_modal_header": "以下のページを削除",
+    "delete_completely": "完全に削除する"
+  },
   "security_setting": {
     "Guest Users Access": "ゲストユーザーのアクセス",
     "Fixed by env var": "環境変数 <code>{{forcewikimode}}={{wikimode}}</code> により固定されています。",

src/client/js/components/SearchPage/DeletePageListModal.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { withTranslation } from 'react-i18next';
+
 import Button from 'react-bootstrap/es/Button';
 import Modal from 'react-bootstrap/es/Modal';
 import Checkbox from 'react-bootstrap/es/Checkbox';
 
-export default class DeletePageListModal extends React.Component {
+class DeletePageListModal extends React.Component {
 
   /*
    * the threshold for omitting body
@@ -16,6 +18,7 @@ export default class DeletePageListModal extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     if (this.props.pages == null || this.props.pages.length === 0) {
       return <div></div>;
     }
@@ -29,20 +32,23 @@ export default class DeletePageListModal extends React.Component {
     return (
       <Modal show={this.props.isShown} onHide={this.props.cancel} className="page-list-delete-modal">
         <Modal.Header closeButton>
-          <Modal.Title>Deleting pages:</Modal.Title>
+          <Modal.Title>{t('search_result.deletion_modal_header')}</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <ul>
-            {listView}
-          </ul>
+          <ul>{listView}</ul>
         </Modal.Body>
         <Modal.Footer>
           <div className="d-flex justify-content-between">
             <span className="text-danger">{this.props.errorMessage}</span>
             <span className="d-flex align-items-center">
-              <Checkbox className="text-danger" onClick={this.props.toggleDeleteCompletely} inline>Delete completely</Checkbox>
+              <Checkbox className="text-danger" onClick={this.props.toggleDeleteCompletely} inline>
+                {t('search_result.delete_completely')}
+              </Checkbox>
               <span className="m-l-10">
-                <Button onClick={this.props.confirmedToDelete}><i className="icon-trash"></i>Delete</Button>
+                <Button onClick={this.props.confirmedToDelete}>
+                  <i className="icon-trash"></i>
+                  {t('search_result.delete')}
+                </Button>
               </span>
             </span>
           </div>
@@ -54,6 +60,8 @@ export default class DeletePageListModal extends React.Component {
 }
 
 DeletePageListModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
   isShown: PropTypes.bool.isRequired,
   pages: PropTypes.array,
   errorMessage: PropTypes.string,
@@ -61,3 +69,5 @@ DeletePageListModal.propTypes = {
   confirmedToDelete: PropTypes.func.isRequired, //      for confirmed event handling
   toggleDeleteCompletely: PropTypes.func.isRequired, // for delete completely check event handling
 };
+
+export default withTranslation()(DeletePageListModal);

src/client/js/components/SearchPage/SearchResult.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as toastr from 'toastr';
 
+import { withTranslation } from 'react-i18next';
+
 import Page from '../PageList/Page';
 import SearchResultList from './SearchResultList';
 import DeletePageListModal from './DeletePageListModal';
@@ -171,6 +173,8 @@ class SearchResult extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
+
     if (this.isError()) {
       return (
         <div className="content-main">
@@ -203,7 +207,7 @@ class SearchResult extends React.Component {
       deletionModeButtons = (
         <div className="btn-group">
           <button type="button" className="btn btn-rounded btn-default btn-xs" onClick={() => { return this.handleDeletionModeChange() }}>
-            <i className="icon-ban" /> Cancel
+            <i className="icon-ban" /> {t('search_result.cancel')}
           </button>
           <button
             type="button"
@@ -211,7 +215,7 @@ class SearchResult extends React.Component {
             onClick={() => { return this.showDeleteConfirmModal() }}
             disabled={this.state.selectedPages.size === 0}
           >
-            <i className="icon-trash" /> Delete
+            <i className="icon-trash" /> {t('search_result.delete')}
           </button>
         </div>
       );
@@ -223,7 +227,7 @@ class SearchResult extends React.Component {
               onClick={() => { return this.handleAllSelect() }}
               checked={this.isAllSelected()}
             />
-            &nbsp;Check All
+            {t('search_result.check_all')}
           </label>
         </div>
       );
@@ -232,7 +236,7 @@ class SearchResult extends React.Component {
       deletionModeButtons = (
         <div className="btn-group">
           <button type="button" className="btn btn-default btn-rounded btn-xs" onClick={() => { return this.handleDeletionModeChange() }}>
-            <i className="ti-check-box" /> DeletionMode
+            <i className="ti-check-box" /> {t('search_result.deletion_mode_btn_lavel')}
           </button>
         </div>
       );
@@ -283,21 +287,17 @@ class SearchResult extends React.Component {
                 {allSelectCheck}
               </div>
               <div className="search-result-meta">
-                <i className="icon-magnifier" /> Found {this.props.searchResultMeta.total} pages with &quot;{this.props.searchingKeyword}&quot;
+                <i className="icon-magnifier" />
+                {t('search_result.result_meta', { total: this.props.searchResultMeta.total, keyword: this.props.searchingKeyword })}
               </div>
               <div className="clearfix"></div>
               <div className="page-list">
-                <ul className="page-list-ul page-list-ul-flat nav">
-                  {listView}
-                </ul>
+                <ul className="page-list-ul page-list-ul-flat nav">{listView}</ul>
               </div>
             </nav>
           </div>
           <div className="col-md-8 search-result-content" id="search-result-content">
-            <SearchResultList
-              pages={this.props.pages}
-              searchingKeyword={this.props.searchingKeyword}
-            />
+            <SearchResultList pages={this.props.pages} searchingKeyword={this.props.searchingKeyword} />
           </div>
         </div>
         <DeletePageListModal
@@ -308,8 +308,7 @@ class SearchResult extends React.Component {
           confirmedToDelete={this.deleteSelectedPages}
           toggleDeleteCompletely={this.toggleDeleteCompletely}
         />
-
-      </div>// content-main
+      </div> // content-main
     );
   }
 
@@ -324,6 +323,7 @@ const SearchResultWrapper = (props) => {
 
 SearchResult.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  t: PropTypes.func.isRequired, // i18next
 
   pages: PropTypes.array.isRequired,
   searchingKeyword: PropTypes.string.isRequired,
@@ -335,4 +335,4 @@ SearchResult.defaultProps = {
   searchError: null,
 };
 
-export default SearchResultWrapper;
+export default withTranslation()(SearchResultWrapper);