Merge pull request #16 from LoveLiveSunshine/1.x-dev

Multi Language Supporting

.all-contributorsrc

@@ -28,6 +28,18 @@
         "code",
         "ideas"
       ]
+    },
+    {
+      "login": "simon300000",
+      "name": "simon3000",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/12656264?v=4",
+      "profile": "https://github.com/simon300000",
+      "contributions": [
+        "code",
+        "ideas",
+        "translation"
+      ]
     }
-  ]
+  ],
+  "repoType": "github"
 }

.eslintrc

@@ -7,10 +7,17 @@
     "mocha": true
   },
   "extends": ["kotori"],
+  "plugins": ["prettier"],
   "globals": {
     "autobind": true
   },
   "rules": {
-    "new-cap": 0
+    "new-cap": 0,
+    "prettier/prettier": [1, {
+      "singleQuote": true,
+      "trailingComma": "none",
+      "bracketSpacing": true,
+      "jsxBracketSameLine": true
+    }]
   }
 }

README.md

@@ -20,6 +20,7 @@ Table of Contents
   * [Dev](#dev)
      * [Commands](#commands)
      * [API](#api)
+  * [Localization](#localization)
   * [Contribute](#contribute)
   * [Contributors](#contributors)
   * [License](#license)
@@ -63,12 +64,12 @@ A: Pixiv change the `REFRESH TOKEN` auth method, so re-login with refresh_token
 # Start for development
 $ git clone https://github.com/LoveLiveSunshine/pixiv.moe
 $ cd pixiv.moe
-$ npm install
+$ yarn
 $ npm start
 ```
 
 ### Commands
-- Install dependencies: `npm install`
+- Install dependencies: `yarn`
 - Run: `npm start`
 - Test: `npm test`
 - Build: `npm run dist`
@@ -539,16 +540,24 @@ curl 'https://api.pixiv.moe/v1/favourite/46453302' \
 ```
 </details>
 
+## Localization
+
+App will auto detect your browser language and use the localization. You can set language manually in drawer.  
+Now the app supports Japanese and English.  
+Help us if you can translate this app. Please follow the guide in `src/locale`.
+
 ## Contribute
-Feel free to contribute (PR-s and issues welcomed).
+Feel free to contribute (PR-s and issues welcomed).  
+Only `1.x-dev` branch is accepted.
 
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars0.githubusercontent.com/u/10093992?v=4" width="100px;"/><br /><sub>そら</sub>](http://kokororin.github.io)<br />[💻](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Code") [📖](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Documentation") [🎨](#design-kokororin "Design") [⚠️](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Tests") | [<img src="https://avatars0.githubusercontent.com/u/12712012?v=4" width="100px;"/><br /><sub>吟夢ちゃん</sub>](https://kirainmoe.com/)<br />[💻](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kirainmoe "Code") [🤔](#ideas-kirainmoe "Ideas, Planning, & Feedback") |
-| :---: | :---: |
+<!-- prettier-ignore -->
+| [<img src="https://avatars0.githubusercontent.com/u/10093992?v=4" width="100px;"/><br /><sub><b>そら</b></sub>](http://kokororin.github.io)<br />[💻](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Code") [📖](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Documentation") [🎨](#design-kokororin "Design") [⚠️](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kokororin "Tests") | [<img src="https://avatars0.githubusercontent.com/u/12712012?v=4" width="100px;"/><br /><sub><b>吟夢ちゃん</b></sub>](https://kirainmoe.com/)<br />[💻](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=kirainmoe "Code") [🤔](#ideas-kirainmoe "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/12656264?v=4" width="100px;"/><br /><sub><b>simon3000</b></sub>](https://github.com/simon300000)<br />[💻](https://github.com/LoveLiveSunshine/pixiv.moe/commits?author=simon300000 "Code") [🤔](#ideas-simon300000 "Ideas, Planning, & Feedback") [🌍](#translation-simon300000 "Translation") |
+| :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

package.json

@@ -1,11 +1,10 @@
 {
   "name": "pixiv.moe",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "Source code of https://pixiv.moe",
   "scripts": {
     "clean": "rimraf dist/*",
-    "copy": "copyfiles -f ./src/index.html ./dist",
-    "predist": "npm run clean && npm run copy",
+    "predist": "npm run clean",
     "dist": "cross-env NODE_ENV=production webpack --config build/webpack.config.js",
     "postdist": "copyfiles -f ./src/icons/*.ico ./src/icons/*.png ./dist/assets && copyfiles -f ./src/manifest.json ./dist",
     "archive": "cd dist && tar -czvf dist.tar.gz * --exclude=*.gz",
@@ -35,11 +34,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,8 +53,9 @@
     "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",
+    "eslint-plugin-prettier": "^2.6.0",
     "fetch-mock": "^5.12.2",
     "file-loader": "^0.11.2",
     "glob": "^7.1.2",
@@ -78,6 +79,7 @@
     "open-browser-webpack-plugin": "^0.0.5",
     "optimize-js-plugin": "^0.0.4",
     "postcss-loader": "^2.0.6",
+    "prettier": "^1.13.5",
     "puppeteer": "^0.11.0",
     "react-hot-loader": "next",
     "react-test-renderer": "^16.3.2",
@@ -103,13 +105,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-masonry-component": "^6.2.0",
+    "react-intl": "^2.4.0",
+    "react-masonry-component": "^6.2.1",
     "react-mdl": "^1.10.3",
     "react-modal": "^3.3.1",
     "react-redux": "^5.0.6",

src/actions/gallery.js

@@ -1,7 +1,7 @@
 import namespacedTypes from 'namespaced-types';
 
 import config from '@/config';
-import { cachedFetch } from '@/utils';
+import cachedFetch from '@/utils/cachedFetch';
 
 export const types = namespacedTypes('gallery', [
   'SET_ITEMS',

src/actions/illust.js

@@ -1,7 +1,8 @@
 import namespacedTypes from 'namespaced-types';
 
 import config from '@/config';
-import { cachedFetch, getImagesFromZip } from '@/utils';
+import cachedFetch from '@/utils/cachedFetch';
+import getImagesFromZip from '@/utils/getImagesFromZip';
 
 export const types = namespacedTypes('illust', [
   'SET_ITEM',

src/actions/locale.js

@@ -0,0 +1,10 @@
+import namespacedTypes from 'namespaced-types';
+
+export const types = namespacedTypes('locale', ['SET_LOCALE']);
+
+export function setLocale(data) {
+  return {
+    type: types.SET_LOCALE,
+    payload: data
+  };
+}

src/components/Comment.js

@@ -6,7 +6,7 @@ import CSSModules from 'react-css-modules';
 import Img from 'react-image';
 import ListItem from 'react-mdl/lib/List/ListItem';
 import ListItemContent from 'react-mdl/lib/List/ListItemContent';
-import { EmojiParser } from '@/utils';
+import EmojiParser from '@/utils/EmojiParser';
 
 const Comment = ({ item }) => {
   for (const badWord of Comment.badWords) {
@@ -60,4 +60,5 @@ Comment.propTypes = {
   item: PropTypes.object
 };
 
+// eslint-disable-next-line babel/new-cap
 export default CSSModules(Comment, styles, { allowMultiple: true });

src/components/ConnectedIntlProvider.js

@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+
+export default connect(state => ({
+  locale: state.locale.lang,
+  messages: state.locale.messages
+}))(IntlProvider);

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);
   }

src/components/Item.js

@@ -4,6 +4,7 @@ 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';
 
 @CSSModules(styles, { allowMultiple: true })
@@ -18,10 +19,6 @@ export default class Item extends React.Component {
     super(props);
   }
 
-  shouldComponentUpdate() {
-    return false;
-  }
-
   onImageMouseMove(event) {
     event = event.nativeEvent;
     const target = event.target;
@@ -39,7 +36,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">初登场</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) {
@@ -49,7 +50,11 @@ export default class Item extends React.Component {
     }
     return (
       <span styleName="rank-text-outer">
-        {icon} {'前日 ' + this.props.item.previous_rank + '位'}
+        {icon}
+        <FormattedMessage
+          id="Yesterday x rank"
+          values={{ rank: this.props.item.previous_rank }}
+        />
       </span>
     );
   }
@@ -69,7 +74,12 @@ export default class Item extends React.Component {
             <span>{this.props.item.work.title}</span>
           </div>
           <div styleName="meta">
-            <span styleName="rank-num">{`${this.props.item.rank}位`}</span>
+            <span styleName="rank-num">
+              <FormattedMessage
+                id="x rank"
+                values={{ rank: this.props.item.rank }}
+              />
+            </span>
             <span>{this.renderRankText()}</span>
           </div>
         </Link>

src/components/List.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Masonry from 'react-masonry-component';
 
-import { Item } from '@/components';
+import Item from '@/components/Item';
 
 export default class List extends React.Component {
   static propTypes = {

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 });

src/components/Login.js

@@ -9,10 +9,12 @@ 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 from '@/utils/moment';
+import Storage from '@/utils/Storage';
+import withRef from '@/utils/withRef';
 
-@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 +89,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 +107,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 +118,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 +134,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 +161,9 @@ export default class Login extends React.Component {
     );
   }
 }
+
+export default withRef(
+  // eslint-disable-next-line babel/new-cap
+  CSSModules(Login, styles, { allowMultiple: true }),
+  injectIntl
+);