migrate to umi

.eslintrc

@@ -1,28 +1,3 @@
 {
-  "parser": "babel-eslint",
-  "extends": "eslint-config-airbnb",
-  "rules": {
-    "spaced-comment": [0],
-    "no-unused-vars": [0],
-    "no-empty": [0],
-    "react/wrap-multilines": [0],
-    "react/no-multi-comp": [0],
-    "no-constant-condition": [0],
-    "react/jsx-no-bind": [0],
-    "react/prop-types": [0],
-    "arrow-body-style": [0],
-    "react/prefer-stateless-function": [0],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/forbid-prop-types": [0],
-    "no-restricted-syntax": ["error", "WithStatement"],
-    "no-bitwise": ["error", { "allow": ["~"] }],
-    "semi": [0],
-    "global-require": [0],
-    "no-shadow": [0],
-    "no-useless-computed-key": [0],
-    "no-underscore-dangle": [0]
-  },
-  "ecmaFeatures": {
-    "experimentalObjectRestSpread": true
-  }
+  "extends": "eslint-config-umi"
 }

.gitignore

@@ -3,3 +3,7 @@ node_modules
 .DS_Store
 tmp
 npm-debug.log
+
+# umi
+.umi
+.umi-production

.umirc.js

@@ -0,0 +1,7 @@
+
+export default {
+  hashHistory: true,
+  plugins: [
+    'umi-plugin-dva',
+  ],
+}

README.md

@@ -1,6 +1,6 @@
 # dva-hackernews
 
-HackerNews clone built with [Dva](https://github.com/dvajs/dva), based on [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0).
+HackerNews clone built with [Umi](https://github.com/umijs/umi) and [Dva](https://github.com/dvajs/dva), based on [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0).
 
 <p align="center">
   <a href="http://dvajs.github.io/dva-hackernews/">
@@ -18,7 +18,7 @@ HackerNews clone built with [Dva](https://github.com/dvajs/dva), based on [vue-h
 - [x] Real-time List Update with Animation
 - [x] Router Transform Animation
 - [ ] SSR
-- [ ] Dynamic Router
+- [x] Dynamic Router
 - [ ] Handle loading status automatically
 - [ ] Render Performance
 
@@ -35,9 +35,3 @@ Start server.
 ```bash
 $ npm start
 ```
-
-Open app in browser.
-
-```bash
-$ open http://localhost:8989/
-```

package.json

@@ -1,42 +1,26 @@
 {
   "private": true,
-  "entry": {
-    "index": "./src/index.js"
-  },
   "dependencies": {
     "classnames": "^2.2.5",
-    "dva": "^1.0.0",
-    "dva-loading": "^0.1.0",
     "firebase": "^2.4.2",
     "path-to-regexp": "^1.5.3",
-    "react": "^15.1.0",
-    "react-addons-css-transition-group": "^15.3.0",
-    "react-dom": "^15.1.0"
+    "react-addons-css-transition-group": "^15.6.2",
+    "umi": "^1.0.0-rc.22",
+    "umi-plugin-dva": "^0.1.5"
   },
   "devDependencies": {
-    "atool-build": "^0.7.6",
-    "atool-test-mocha": "^0.1.5",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-dva-hmr": "^0.1.0",
-    "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-runtime": "^6.9.2",
-    "dora": "0.3.x",
-    "dora-plugin-proxy": "^0.7.0",
-    "dora-plugin-webpack": "0.6.x",
-    "dora-plugin-webpack-hmr": "^0.1.0",
-    "eslint": "^3.12.0",
-    "eslint-config-airbnb": "^13.0.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.8.0",
-    "expect": "^1.20.2",
-    "gh-pages": "^0.11.0",
-    "redbox-react": "^1.2.10"
+    "eslint": "^4.18.1",
+    "eslint-config-umi": "^0.1.3",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.7.0",
+    "gh-pages": "^0.11.0"
   },
   "scripts": {
-    "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
-    "build": "atool-build",
-    "test": "atool-test-mocha ./src/**/*-test.js --timeout 20000",
+    "start": "umi dev",
+    "build": "umi build",
+    "test": "umi test",
     "publish": "npm run build && gh-pages -d ./dist"
   }
 }

src/components/Comment.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import { Link } from 'dva/router';
 import styles from './Comment.less';
 import { timeAgo } from '../utils/filters';

src/components/Item.js

@@ -1,4 +1,3 @@
-import React, { PropTypes } from 'react';
 import { Link } from 'dva/router';
 import styles from './Item.less';
 import { host, timeAgo } from '../utils/filters';
@@ -51,8 +50,4 @@ const Item = ({ item }) => {
   );
 };
 
-Item.propTypes = {
-  item: PropTypes.object.isRequired,
-};
-
 export default Item;

src/components/ItemList.js

@@ -1,4 +1,3 @@
-import React, { PropTypes } from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import { Link } from 'dva/router';
 import styles from './ItemList.less';

src/components/ItemPage.js

@@ -0,0 +1,46 @@
+import { connect } from 'dva';
+import { Link } from 'dva/router';
+import styles from './ItemPage.less';
+import { itemSelector } from '../selectors/item';
+import Spinner from './Spinner';
+import { host, timeAgo } from '../utils/filters';
+import Comment from './Comment';
+
+function ItemPage({ loading, item, itemsById }) {
+  if (!item) return null;
+  return (
+    <div className={styles.normal}>
+      <Spinner loading={loading} />
+      <div className={styles.header}>
+        <a href={item.url}><h1>{item.title}</h1></a>
+        {item.url ? <span className={styles.host}>{host(item.url)}</span> : null}
+        <p className={styles.meta}>
+          <span>{`${item.score} points | by `}</span>
+          <Link to={`/user/${item.by}`}>{item.by}</Link>
+          <span>{` ${timeAgo(item.time)} ago`}</span>
+        </p>
+      </div>
+      <div className={styles.comments}>
+        <p className={styles.commentsHeader}>
+          {item.kids ? `${item.descendants} comments` : 'No comments yet.'}
+        </p>
+        <div className={styles.commentChildren}>
+          {
+            item.kids
+             ? item.kids.map(id => <Comment key={id} id={id} itemsById={itemsById} />)
+             : null
+          }
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function mapStateToProps(state, ownProps) {
+  return {
+    loading: state.loading.global,
+    ...itemSelector(state, ownProps),
+  };
+}
+
+export default connect(mapStateToProps)(ItemPage);

src/components/ListPage.js

@@ -0,0 +1,28 @@
+import { connect } from 'dva';
+import styles from './ListPage.less';
+import { listSelector } from '../selectors/item';
+import ItemList from './ItemList';
+
+function ListPage({ loading, items, page, maxPage, activeType, location }) {
+  return (
+    <div className={styles.normal}>
+      <ItemList
+        loading={loading}
+        items={items}
+        page={page}
+        maxPage={maxPage}
+        activeType={activeType}
+        location={location}
+      />
+    </div>
+  );
+}
+
+function mapStateToProps(state, ownProps) {
+  return {
+    loading: state.loading.global,
+    ...listSelector(state, ownProps),
+  };
+}
+
+export default connect(mapStateToProps)(ListPage);

src/components/Spinner.js

@@ -1,4 +1,3 @@
-import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import styles from './Spinner.less';
 
@@ -16,8 +15,4 @@ function Spinner({ loading }) {
   );
 }
 
-Spinner.propTypes = {
-  loading: PropTypes.bool.isRequired,
-};
-
 export default Spinner;

src/routes/UserPage.js → src/components/UserPage.js

@@ -1,10 +1,7 @@
-import React, { Component, PropTypes } from 'react';
 import { connect } from 'dva';
-import { Link } from 'dva/router';
 import styles from './UserPage.less';
-import Layout from '../components/Layout';
-import userSelector from '../models/user/selectors';
-import Spinner from '../components/Spinner';
+import userSelector from '../selectors/user';
+import Spinner from './Spinner';
 import { timeAgo } from '../utils/filters';
 
 function UserPage({ loading, user }) {
@@ -35,18 +32,13 @@ function UserPage({ loading, user }) {
   }
 
   return (
-    <Layout>
-      <div className={styles.normal}>
-        <Spinner loading={loading} />
-        { user ? renderUser() : null }
-      </div>
-    </Layout>
+    <div className={styles.normal}>
+      <Spinner loading={loading} />
+      { user ? renderUser() : null }
+    </div>
   );
 }
 
-UserPage.propTypes = {
-};
-
 function mapStateToProps(state, ownProps) {
   return {
     loading: state.loading.global,

src/global.less

@@ -0,0 +1,14 @@
+
+body {
+  font-family: "Roboto", Helvetica, sans-serif;
+  font-size: 15px;
+  background-color: #f2f3f5;
+  margin: 0;
+  padding-top: 55px;
+  color: #34495e;
+}
+
+a {
+  color: #34495e;
+  text-decoration: none;
+}

src/layouts/index.js

@@ -0,0 +1,29 @@
+import NavLink from 'umi/navlink';
+import styles from './index.less';
+
+const Layout = (props) => {
+  return (
+    <div className={styles.normal}>
+      <div className={styles.header}>
+        <div className={styles.inner}>
+          <NavLink to="/">
+            <img alt="presentation" className={styles.logo} src="https://zos.alipayobjects.com/rmsportal/AsASAiphPWWUJWG.png" />
+          </NavLink>
+          <NavLink activeClassName={styles.active} to="/top">Top</NavLink>
+          <NavLink activeClassName={styles.active} to="/new">New</NavLink>
+          <NavLink activeClassName={styles.active} to="/show">Show</NavLink>
+          <NavLink activeClassName={styles.active} to="/ask">Ask</NavLink>
+          <NavLink activeClassName={styles.active} to="/job">Jobs</NavLink>
+          <span className={styles.github}>
+            Built with <a rel="noopener noreferrer" href="https://github.com/umijs/umi" target="_blank">Umi</a> and <a rel="noopener noreferrer" href="https://github.com/dvajs/dva" target="_blank">Dva</a>
+          </span>
+        </div>
+      </div>
+      <div className={styles.view}>
+        { props.children }
+      </div>
+    </div>
+  );
+};
+
+export default Layout;