Japanese Locales

kokororin · Jun 19, 2018 · 235d1b2 · 235d1b2
1 parent 5873964
commit 235d1b2
Show file tree

Hide file tree

Showing 24 changed files with 369 additions and 232 deletions.
diff --git a/package.json b/package.json
@@ -35,11 +35,12 @@
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.2",
-    "babel-plugin-minify-dead-code-elimination": "^0.2.0",
-    "babel-plugin-minify-guarded-expressions": "^0.2.0",
+    "babel-plugin-minify-dead-code-elimination": "^0.4.3",
+    "babel-plugin-minify-guarded-expressions": "^0.4.3",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
     "babel-polyfill": "^6.26.0",
@@ -53,7 +54,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.5",
     "eslint": "^4.5.0",
-    "eslint-config-kotori": "^0.1.6",
+    "eslint-config-kotori": "^0.2.3",
     "eslint-loader": "^1.9.0",
     "fetch-mock": "^5.12.2",
     "file-loader": "^0.11.2",
@@ -103,14 +104,14 @@
     "moment": "^2.16.0",
     "namespaced-types": "^0.1.2",
     "prop-types": "^15.5.10",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
     "react-css-modules": "^4.7.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.4.1",
     "react-ga": "^2.1.2",
     "react-image": "^1.0.1",
     "react-intl": "^2.4.0",
-    "react-masonry-component": "^6.2.0",
+    "react-masonry-component": "^6.2.1",
     "react-mdl": "^1.10.3",
     "react-modal": "^3.3.1",
     "react-redux": "^5.0.6",

diff --git a/src/components/Comment.js b/src/components/Comment.js
@@ -60,4 +60,5 @@ Comment.propTypes = {
   item: PropTypes.object
 };
 
+// eslint-disable-next-line babel/new-cap
 export default CSSModules(Comment, styles, { allowMultiple: true });
diff --git a/src/components/InfiniteScroll.js b/src/components/InfiniteScroll.js
@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default class InfiniteScroll extends React.Component {
+  static scrollingClassName = 'mdl-layout__content';
+
   static propTypes = {
     distance: PropTypes.number.isRequired,
     onLoadMore: PropTypes.func.isRequired,
     hasMore: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired
   };
 
-  static scrollingClassName = 'mdl-layout__content';
-
   constructor(props) {
     super(props);
   }

diff --git a/src/components/Item.js b/src/components/Item.js
@@ -4,8 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 import Icon from 'react-mdl/lib/Icon';
-import { FormatMessage } from '@/locale';
 
 @CSSModules(styles, { allowMultiple: true })
 export default class Item extends React.Component {
@@ -40,7 +40,11 @@ export default class Item extends React.Component {
 
   renderRankText() {
     if (this.props.item.previous_rank === 0) {
-      return <span styleName="rank-text-outer no-previous-rank"><FormatMessage id="初登场" /></span>;
+      return (
+        <span styleName="rank-text-outer no-previous-rank">
+          <FormattedMessage id="Debut" />
+        </span>
+      );
     }
     let icon;
     if (this.props.item.previous_rank < this.props.item.rank) {
@@ -50,7 +54,11 @@ export default class Item extends React.Component {
     }
     return (
       <span styleName="rank-text-outer">
-        {icon} <FormatMessage id="前日x位" values={{rank: this.props.item.previous_rank}} />
+        {icon}
+        <FormattedMessage
+          id="Yesterday x rank"
+          values={{ rank: this.props.item.previous_rank }}
+        />
       </span>
     );
   }

diff --git a/src/components/Loading.js b/src/components/Loading.js
@@ -6,7 +6,6 @@ import CSSModules from 'react-css-modules';
 import Spinner from 'react-mdl/lib/Spinner';
 
 const Loading = ({ isHidden }) => {
-  // it means ローディング
   return isHidden ? null : (
     <div styleName="message">
       <Spinner />
@@ -18,4 +17,5 @@ Loading.propTypes = {
   isHidden: PropTypes.bool
 };
 
+// eslint-disable-next-line babel/new-cap
 export default CSSModules(Loading, styles, { allowMultiple: true });
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -9,10 +9,10 @@ import classNames from 'classnames';
 import Button from 'react-mdl/lib/Button';
 import Textfield from 'react-mdl/lib/Textfield';
 import Icon from 'react-mdl/lib/Icon';
-import { moment, Storage } from '@/utils';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { moment, Storage, withRef } from '@/utils';
 
-@CSSModules(styles, { allowMultiple: true })
-export default class Login extends React.Component {
+class Login extends React.Component {
   static propTypes = {
     onLogoutClick: PropTypes.func,
     onLogoutClick: PropTypes.func,
@@ -87,12 +87,14 @@ export default class Login extends React.Component {
         <div>
           <div styleName="avatar">
             <span styleName="name">
-              ニックネーム 「{this.props.authData.user.name}」
+              <FormattedMessage id="Nickname" /> 「{
+                this.props.authData.user.name
+              }」
             </span>
           </div>
           <div styleName="footer">
             <Button onClick={this.props.onLogoutClick} raised accent ripple>
-              ログアウト
+              <FormattedMessage id="Logout" />
             </Button>
           </div>
         </div>
@@ -103,7 +105,9 @@ export default class Login extends React.Component {
         <Textfield
           onChange={event => this.setUsername(event.target.value)}
           value={this.getUsername()}
-          label="メールアドレス / pixiv ID"
+          label={this.props.intl.formatMessage({
+            id: 'Email Address / pixiv ID'
+          })}
           spellCheck={false}
           floatingLabel
           style={{ width: '100%' }}
@@ -112,7 +116,9 @@ export default class Login extends React.Component {
           type="password"
           onChange={event => this.setPassword(event.target.value)}
           value={this.getPassword()}
-          label="パスワード"
+          label={this.props.intl.formatMessage({
+            id: 'Password'
+          })}
           floatingLabel
           style={{ width: '100%' }}
         />
@@ -126,7 +132,9 @@ export default class Login extends React.Component {
             raised
             accent
             ripple>
-            {this.props.isSubmitting ? 'ちょっとまって' : 'ログイン'}
+            <FormattedMessage
+              id={this.props.isSubmitting ? 'Wait a Moment' : 'Login'}
+            />
           </Button>
         </div>
       </div>
@@ -151,3 +159,9 @@ export default class Login extends React.Component {
     );
   }
 }
+
+export default withRef(
+  // eslint-disable-next-line babel/new-cap
+  CSSModules(Login, styles, { allowMultiple: true }),
+  injectIntl
+);
diff --git a/src/components/Message.js b/src/components/Message.js
@@ -3,27 +3,33 @@ import styles from '@/styles/Message.scss';
 import React from 'react';
 import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
+import { FormattedMessage } from 'react-intl';
 
 @CSSModules(styles, { allowMultiple: true })
 export default class Message extends React.Component {
-  static defaultProps = {
-    isHidden: false,
-    text: 'エラーが発生しました。URLを確認するか、しばらく時間を置いて再度アクセスしてください。'
-  };
-
   static propTypes = {
     isHidden: PropTypes.bool,
     text: PropTypes.string
   };
 
+  static defaultProps = {
+    isHidden: false
+  };
+
   constructor(props) {
     super(props);
   }
 
   render() {
     return this.props.isHidden ? null : (
       <div styleName="message">
-        <p>{this.props.text}</p>
+        <p>
+          {this.props.text ? (
+            this.props.text
+          ) : (
+            <FormattedMessage id="An error occurred. Check the URL or wait for a while and access again." />
+          )}
+        </p>
       </div>
     );
   }

diff --git a/src/components/Refresh.js b/src/components/Refresh.js
@@ -19,4 +19,5 @@ Refresh.propTypes = {
   onClick: PropTypes.func
 };
 
+// eslint-disable-next-line babel/new-cap
 export default CSSModules(Refresh, styles, { allowMultiple: true });
diff --git a/src/containers/GalleryContainer.js b/src/containers/GalleryContainer.js
@@ -11,13 +11,15 @@ import Content from 'react-mdl/lib/Layout/Content';
 import Icon from 'react-mdl/lib/Icon';
 import shortid from 'shortid';
 import DocumentTitle from 'react-document-title';
+import { injectIntl } from 'react-intl';
 
 import config from '@/config';
 
 import { GalleryActions } from '@/actions';
 import { InfiniteScroll, List, Loading, Refresh, Message } from '@/components';
 import { scrollTo, Storage } from '@/utils';
 
+@injectIntl
 export class GalleryContainerWithoutStore extends React.Component {
   constructor(props) {
     super(props);
@@ -178,7 +180,7 @@ export class GalleryContainerWithoutStore extends React.Component {
               </a>
             </Navigation>
           </Header>
-          <Drawer title="タグ">
+          <Drawer title={this.props.intl.formatMessage({ id: 'Tags' })}>
             <Navigation>{this.renderKeywords()}</Navigation>
           </Drawer>
           <InfiniteScroll
@@ -194,7 +196,7 @@ export class GalleryContainerWithoutStore extends React.Component {
                 <Loading isHidden={!this.props.gallery.isFetching} />
                 <Message
                   ref={ref => (this.errorRef = ref)}
-                  text="読み込みに失敗しました"
+                  text={this.props.intl.formatMessage({ id: 'Failed to Load' })}
                   isHidden={!this.props.gallery.isError}
                 />
                 <Refresh

diff --git a/src/containers/IllustContainer.js b/src/containers/IllustContainer.js
@@ -14,6 +14,7 @@ import { List } from 'react-mdl/lib/List';
 import shortid from 'shortid';
 import Img from 'react-image';
 import DocumentTitle from 'react-document-title';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import config from '@/config';
 
@@ -29,6 +30,7 @@ import {
 import { LoginContainer } from '@/containers';
 import { cachedFetch, moment, Storage } from '@/utils';
 
+@injectIntl
 @CSSModules(styles, { allowMultiple: true })
 export class IllustContainerWithoutStore extends React.Component {
   constructor(props) {
@@ -94,7 +96,7 @@ export class IllustContainerWithoutStore extends React.Component {
   onFavouriteClick(event) {
     const authData = Storage.get('auth');
     if (authData === null || authData.expires_at < moment().unix()) {
-      return this.loginRef.open();
+      return this.loginRef.getRef().open();
     }
     const target = event.nativeEvent.target,
       body = document.body;
@@ -121,8 +123,9 @@ export class IllustContainerWithoutStore extends React.Component {
       .catch(() => {
         target.classList.remove('fn-wait');
         body.classList.remove('fn-wait');
-        // text from SIF
-        this.alertRef.setContent('通信エラーが発生しました');
+        this.alertRef.setContent(
+          this.props.intl.formatMessage({ id: 'Communication Error Occurred' })
+        );
       });
   }
 
@@ -196,7 +199,12 @@ export class IllustContainerWithoutStore extends React.Component {
       return <Loading isHidden={false} />;
     }
     if (this.props.illust.isError) {
-      return <Message isHidden={false} text="エラーが発生しました" />;
+      return (
+        <Message
+          isHidden={false}
+          text={this.props.intl.formatMessage({ id: 'An Error Occurred' })}
+        />
+      );
     }
     try {
       return (
@@ -230,13 +238,13 @@ export class IllustContainerWithoutStore extends React.Component {
           </div>
           <div styleName="actions">
             <Button raised ripple onClick={this.onFavouriteClick}>
-              ブックマークに追加
+              <FormattedMessage id="Add to Bookmarks" />
             </Button>
             <Button raised ripple onClick={this.onDownloadClick}>
-              ダウンロード
+              <FormattedMessage id="Download" />
             </Button>
             <Button raised ripple onClick={this.onTwitterClick}>
-              ツイート
+              <FormattedMessage id="Tweet" />
             </Button>
           </div>
           <div styleName="detail">
@@ -252,8 +260,9 @@ export class IllustContainerWithoutStore extends React.Component {
                 {`${moment(this.item.created_time).format('LLL')}(JST)`}
               </time>
               <div styleName="metas">
-                <span styleName="divide">{`${this.item.width}x${this.item
-                  .height}`}</span>
+                <span styleName="divide">{`${this.item.width}x${
+                  this.item.height
+                }`}</span>
                 {Array.isArray(this.item.tools) && (
                   <span
                     styleName={classNames({
@@ -268,22 +277,27 @@ export class IllustContainerWithoutStore extends React.Component {
             </div>
             <p>
               <a target="_blank" href={`/${this.item.id}`}>
-                pixivにリダイレクトする
+                <FormattedMessage id="Redirect to pixiv" />
               </a>
             </p>
           </div>
           <InfiniteScroll
             distance={200}
             onLoadMore={() =>
-              this.props.dispatch(IllustActions.fetchComments(this.illustId))}
+              this.props.dispatch(IllustActions.fetchComments(this.illustId))
+            }
             isLoading={this.props.illust.isFetchingComments}
             hasMore={!this.props.illust.isCommentsEnd}>
             <div styleName="comments">
-              {this.props.illust.comments.length === 0 ? (
-                <h4>コメントはありません</h4>
-              ) : (
-                <h4>コメント</h4>
-              )}
+              <h4>
+                <FormattedMessage
+                  id={
+                    this.props.illust.comments.length === 0
+                      ? 'No Comments'
+                      : 'Comments'
+                  }
+                />
+              </h4>
               <List style={{ width: 'auto' }}>
                 {this.props.illust.comments.map(elem => {
                   return <Comment key={shortid.generate()} item={elem} />;
@@ -297,7 +311,12 @@ export class IllustContainerWithoutStore extends React.Component {
         </div>
       );
     } catch (e) {
-      return <Message isHidden={false} text="エラーが発生しました" />;
+      return (
+        <Message
+          isHidden={false}
+          text={this.props.intl.formatMessage({ id: 'An Error Occurred' })}
+        />
+      );
     }
   }