[#2] - Added flow as type checker, flow eslint and simplify babel pre…

…sets.

.babelrc

@@ -1,8 +1,9 @@
 {
-  "presets": ["react", "es2015", "stage-0", "stage-1"],
+  "presets": ["react", "es2015", "es2016", "stage-0"],
   "plugins": [
     "transform-runtime",
     "transform-decorators-legacy",
-    "transform-async-to-generator"
+    "transform-async-to-generator",
+    "transform-class-properties"
   ]
 }

.eslintignore

@@ -1 +1,2 @@
-public/*
+public/*
+src/decls/*

.eslintrc.json

@@ -1,10 +1,14 @@
 {
   "parser": "babel-eslint",
   "root": true,
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "plugin:flowtype/recommended"
+  ],
   "installedESLint": true,
   "plugins": [
-    "react"
+    "react",
+    "flowtype"
   ],
   "settings": {
     "import/resolver": {
@@ -29,7 +33,34 @@
     "no-underscore-dangle": 0,
     "quote-props": 0,
     "consistent-return": 0,
+    "no-trailing-spaces": 0,
+    // react
+
     "react/jsx-space-before-closing": 0,
     "react/jsx-no-bind": 0
+
+    // flowtype
+
+    //    "flowtype/boolean-style": [2, "boolean"],
+    //    "flowtype/define-flow-type": 1,
+    //    "flowtype/delimiter-dangle": [2, "boolean"],
+    //    "flowtype/generic-spacing": [2, "boolean"],
+    //    "flowtype/no-weak-types": 2,
+    //    "flowtype/require-parameter-type": 2,
+    //    "flowtype/require-return-type": [
+    //      2, "always",
+    //      {
+    //        "annotateUndefined": "never"
+    //      }
+    //    ],
+    //    "flowtype/require-valid-file-annotation": 2,
+    //    "flowtype/semi": [2, "always"],
+    //    "flowtype/space-after-type-colon": [2, "always"],
+    //    "flowtype/space-before-generic-bracket": [2, "boolean"],
+    //    "flowtype/space-before-type-colon": [2, "boolean"],
+    //    "flowtype/type-id-match": [2, "^([A-Z][a-z0-9]+)+Type$"],
+    //    "flowtype/union-intersection-spacing": [2, "always"],
+    //    "flowtype/use-flow-type": 1,
+    //    "flowtype/valid-syntax": 1
   }
 }

.flowconfig

@@ -0,0 +1,7 @@
+[ignore]
+
+.*node_modules.*
+
+[libs]
+
+decls

package.json

@@ -8,6 +8,7 @@
     "dev": "webpack-dev-server --config webpack.config.js",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js --progress --colors --hide-modules",
     "lint": "eslint src/. --ext .jsx --ext .js; exit 0",
+    "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "fix": "eslint --fix src/. --ext .jsx --ext .js; exit 0",
     "test": "karma start --single-run=true",
     "cdn": "cd scripts && ./qrsync-v2 conf.json",
@@ -60,13 +61,14 @@
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-async-to-generator": "^6.8.0",
+    "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.1.18",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2016": "^6.11.3",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-preset-stage-1": "^6.5.0",
     "babel-runtime": "^6.9.2",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.5.0",
@@ -78,6 +80,7 @@
     "eslint": "^2.13.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-import-resolver-webpack": "^0.3.0",
+    "eslint-plugin-flowtype": "^2.19.0",
     "eslint-plugin-import": "^1.9.2",
     "eslint-plugin-jsx-a11y": "^1.5.3",
     "eslint-plugin-react": "^5.2.2",
@@ -87,6 +90,7 @@
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
+    "flow-bin": "^0.32.0",
     "gulp": "^3.9.1",
     "happypack": "^2.1.1",
     "html-loader": "^0.4.3",

src/containers/blog/BlogContainer.jsx

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes, } from 'react'
+import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import ReactDisqus from 'react-disqus-thread'
@@ -8,25 +8,27 @@ import { fetchArticleSummary } from '../../redux/actions'
 import SideBar from '../../components/Blog/SideBar'
 import './BlogContainer.less'
 
+type Props = {
+  categories: Array<Object>,
+  showContent: boolean,
+  dispatch: (actionCreator: Function) => void,
+  params: Object,
+  children: Object
+}
+
 @connect(
   (state) => ({
     categories: state.articleSummary.categories,
     showContent: state.toggle.showContent
   })
 )
 export default class BlogContainer extends Component {
-  static propTypes = {
-    categories: PropTypes.array.isRequired,
-    showContent: PropTypes.bool.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    params: PropTypes.object.isRequired,
-    children: PropTypes.object.isRequired
-  }
-
   componentDidMount() {
     this.props.dispatch(fetchArticleSummary())
   }
 
+  props: Props
+
   handleNewComment(comment) {
     // TODO: change to action
     console.log({

src/decls/flowTypes.js

@@ -0,0 +1,16 @@
+// refer: https://github.com/acdlite/flux-standard-action
+
+declare type Action = {
+  type: string
+  payload: ?any
+  error: ?boolean
+  meta: ?any
+}
+
+declare type Music = {
+  name: string
+  url: string
+  lrc_url: string
+  artists: string
+  provider: string
+}

src/redux/reducers/musicList.js

@@ -1,16 +1,14 @@
 import { FETCH_MUSIC, FETCH_MUSIC_ERROR } from '../actions'
 
-/*eslint-disable */
 const initialState = [{
-  "name": "Feeling U",
-  "url": "http://p2.music.126.net/zKr4hskGeZfxQbjbN15sdw==/7871403743831481.mp3",
-  "lrc_url": "",
-  "artists": "m80",
-  "provider": "http://music.163.com/"
+  name: 'Feeling U',
+  url: 'http://p2.music.126.net/zKr4hskGeZfxQbjbN15sdw==/7871403743831481.mp3',
+  lrc_url: '',
+  artists: 'm80',
+  provider: 'http://music.163.com/'
 }]
-/*eslint-enable */
 
-function musicList(state = initialState, action) {
+function musicList(state: Array<Music> = initialState, action: Action) {
   switch (action.type) {
     case FETCH_MUSIC:
       return [...action.payload.songs]