update project

yuzhouisme · Mar 24, 2016 · 85c7916 · 85c7916
1 parent ed51a9c
commit 85c7916
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 12 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+	"presets": ["es2015"]
+}
diff --git a/index.html b/index.html
@@ -3,10 +3,14 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="author" content="yuzhouisme">
+    <meta name="description" content="react-antd-redux-router-starter index page">
+    <meta name="keywords" content="react,antd,redux,react-router">
+    <title>react-antd-redux-router-starter index page</title>
+    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" href="./static/img/ipad-icon.png">
     <link rel="stylesheet" type="text/css" href="./index.css"/>
-    <!--[if lt IE 10]>
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-    <![endif]-->
 </head>
 <body>
 <div id="react-content"></div>

diff --git a/package.json b/package.json
@@ -1,26 +1,53 @@
 {
-  "name": "antd-demo",
+  "name": "react-antd-redux-router-starter-demo",
   "version": "1.0.0",
+  "description": "This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.",
+  "author": "yuzhouisme",
   "entry": {
     "index": "./src/entry/index.jsx"
   },
   "dependencies": {
     "antd": "~0.12.0",
     "atool-build": "0.5.x",
+    "babel-core": "^6.5.2",
     "babel-plugin-antd": "^0.2.0",
+    "babel-polyfill": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
     "es3ify-loader": "^0.1.0",
+    "es6-promise": "^3.1.2",
+    "immutable": "^3.7.6",
+    "isomorphic-fetch": "^2.2.1",
+    "json-loader": "^0.5.4",
+    "lodash.range": "^3.1.1",
+    "npm": "^3.7.2",
+    "r-dom": "^2.1.0",
     "react": "~0.14.6",
-    "react-dom": "~0.14.6"
+    "react-dom": "~0.14.6",
+    "react-motion": "^0.4.2",
+    "react-progress-2": "^4.2.1",
+    "react-redux": "^4.4.0",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^3.0.0",
+    "redux": "^3.3.1",
+    "redux-logger": "^2.5.2",
+    "redux-thunk": "^1.0.3",
+    "request": "^2.65.0",
+    "reqwest": "^2.0.5"
   },
   "devDependencies": {
+    "brfs": "^1.4.3",
     "dora": "0.2.x",
     "dora-plugin-atool-build": "0.4.x",
     "dora-plugin-hmr": "0.3.x",
     "dora-plugin-proxy": "0.5.x",
     "eslint": "1.10.x",
     "eslint-config-airbnb": "4.0.x",
     "eslint-plugin-react": "3.16.x",
-    "pre-commit": "1.x"
+    "pre-commit": "1.x",
+    "redux-devtools": "^3.1.1",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.4",
+    "transform-loader": "^0.2.3"
   },
   "pre-commit": [
     "lint"
@@ -29,5 +56,10 @@
     "dev": "dora -p 8001 --plugins atool-build,proxy,hmr",
     "lint": "eslint --ext .js,.jsx src",
     "build": "atool-build -o ./dist/${npm_package_family}/${npm_package_name}/${npm_package_version}"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
   }
 }
diff --git a/src/actions/example.js b/src/actions/example.js
@@ -0,0 +1,54 @@
+import fetch from 'isomorphic-fetch';
+import { API } from '../constants/globals';
+
+export const REQUEST_EXAMPLE = 'REQUEST_EXAMPLE';
+export const RECEIVE_EXAMPLE = 'RECEIVE_EXAMPLE';
+export const INVALIDATE_EXAMPLE = 'INVALIDATE_EXAMPLE';
+
+export function invalidateExample() {
+  return {
+    type: INVALIDATE_EXAMPLE,
+  };
+}
+
+function requestExample() {
+  return {
+    type: REQUEST_EXAMPLE,
+  };
+}
+
+function receiveExample(json) {
+  return {
+    type: RECEIVE_EXAMPLE,
+    receiveAt: Date.now(),
+  };
+}
+
+function fetchData(data) {
+  return dispatch => {
+    dispatch(requestExample());
+    return fetch(API.EXAMPLE_URL)
+    .then((req) => req.json())
+    .then((json) => {
+      dispatch(receiveExample(json));
+    });
+  };
+}
+
+function shouldFetchData(state) {
+  const { example } = state;
+  if (!example) {
+    return true;
+  } else if (example.isFetching) {
+    return false;
+  }
+  return example.didInvalidate;
+}
+
+export function fetchExampleIfNeeded(data) {
+  return (dispatch, getState) => {
+    if (shouldFetchData(getState())) {
+      return dispatch(fetchData(data));
+    }
+  };
+}
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,8 @@
+import { invalidateExample, fetchExampleIfNeeded } from './example';
+
+const actions = {
+  invalidateExample,
+  fetchExampleIfNeeded
+}
+
+export default actions;
diff --git a/src/component/Admin.jsx b/src/component/Admin.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Administrator from '../container/Administrator';
+
+const Admin = React.createClass({
+  render() {
+    return (
+      <div>
+        { this.props.children || <Administrator /> }
+      </div>
+    );
+  },
+});
+
+export default Admin;
diff --git a/src/component/App.jsx b/src/component/App.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { DatePicker } from 'antd';
+import Main from '../container/Main';
 
 const App = React.createClass({
   render() {
     return (
-      <DatePicker />
+      <div>
+        { this.props.children || <Main /> }
+      </div>
     );
   },
 });

diff --git a/src/component/admin/Administrator.js b/src/component/admin/Administrator.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+var Administrator = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <p>This is administrator page.</p>
+      </div>
+    )
+  }
+});
+
+module.exports = Administrator;
diff --git a/src/component/front/Main.js b/src/component/front/Main.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+var Main = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <p>Hello react && antd, :)</p>
+      </div>
+    )
+  }
+});
+
+module.exports = Main;
diff --git a/src/constants/globals.js b/src/constants/globals.js
@@ -0,0 +1,9 @@
+'use strict';
+
+const ROOT_URL = "http://localhost:8080/";
+
+module.exports = {
+  API: {
+    EXAMPLE_URL: ROOT_URL + 'EXAMPLE_PATH',
+  }
+}
diff --git a/src/container/Administrator.js b/src/container/Administrator.js
@@ -0,0 +1,16 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Administrator from '../component/admin/Administrator';
+import actions from '../actions';
+
+function mapStateToProps(state) {
+  return {
+    example: state.example
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(actions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Administrator);
diff --git a/src/container/Main.js b/src/container/Main.js
@@ -0,0 +1,16 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Main from '../component/front/Main';
+import actions from '../actions';
+
+function mapStateToProps(state) {
+  return {
+    example: state.example
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(actions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main);
diff --git a/src/entry/index.jsx b/src/entry/index.jsx
@@ -1,6 +1,81 @@
 import '../common/lib';
-import App from '../component/App';
-import ReactDOM from 'react-dom';
+import 'babel-polyfill';
+
+// redux-devtools
+import { createDevTools, persistState } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+// react
 import React from 'react';
+import { render } from 'react-dom';
+// router
+import { Router, Route, hashHistory, browserHistory, IndexRoute } from 'react-router';
+// redux
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import thunkMiddleware from 'redux-thunk'
+import createLogger from 'redux-logger'
+const loggerMiddleware = createLogger()
+
+import { Provider } from 'react-redux';
+import { syncHistory } from 'react-router-redux';
+// reducers
+import reducer from '../reducers';
+
+const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
+    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
+  </DockMonitor>
+);
+// top entry
+import App from '../component/App';
+import Admin from '../component/Admin';
+
+// Sync dispatched route actions to the history
+const reduxRouterMiddleware = syncHistory(browserHistory);
+const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore);
+
+
+const enhancer = compose(
+  applyMiddleware(
+    thunkMiddleware,
+    loggerMiddleware
+  ),
+  DevTools.instrument(),
+  persistState(
+    window.location.href.match(
+      /[?&]debug_session=([^&]+)\b/
+    )
+  )
+);
+
+const store = createStore(
+  reducer,
+  enhancer
+)
+// Required for replaying actions from devtools to work
+reduxRouterMiddleware.listenForReplays(store)
+
+const routes = {
+  path: '/',
+  component: App,
+  childRoutes: [
+    {
+      path: 'admin',
+      component: Admin
+    },
+    {
+      path: '*',
+      component: App
+    }
+  ]
+};
 
-ReactDOM.render(<App />, document.getElementById('react-content'));
+render(
+  <Provider store={store}>
+    <div>
+      <Router history={hashHistory} routes={routes} />
+      <DevTools />
+    </div>
+  </Provider>
+  , document.getElementById('react-content')
+);
diff --git a/src/reducers/example.js b/src/reducers/example.js
@@ -0,0 +1,29 @@
+import { REQUEST_EXAMPLE, RECEIVE_EXAMPLE, INVALIDATE_EXAMPLE } from '../actions/example';
+
+export default function example(state = {
+  isFetching: false,
+  didInvalidate: true
+}, action) {
+  switch (action.type) {
+    case INVALIDATE_EXAMPLE:
+      return Object.assign({}, state, {
+        didInvalidate: true
+      })
+      break;
+    case REQUEST_EXAMPLE:
+      return Object.assign({}, state, {
+        isFetching: true,
+        didInvalidate: false,
+      })
+      break;
+    case RECEIVE_EXAMPLE:
+      return Object.assign({}, state, {
+        isFetching: false,
+        didInvalidate: false,
+        lastUpdated: action.receiveAt
+      })
+      break;
+    default:
+      return state
+  }
+}
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import { routeReducer } from 'react-router-redux';
+import example from './example';
+const rootReducer = combineReducers({
+  routing: routeReducer,
+  example
+});
+
+export default rootReducer;
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,4 @@
+require('es6-promise').polyfill()
 module.exports = function(webpackConfig) {
   webpackConfig.module.loaders.forEach(function(loader) {
     if (loader.loader === 'babel') {
@@ -12,6 +13,10 @@ module.exports = function(webpackConfig) {
     test: /\.jsx?$/,
     loader: 'es3ify',
   });
-
+  webpackConfig.module.loaders.unshift({
+    test: /\.js$/,
+    include: /linebreak/,
+    loader: "transform?brfs"
+  });
   return webpackConfig;
 };