release 2.0 rc with redux and immuatablejs

teddy-ma · Jul 11, 2016 · 68c92f7 · 68c92f7
1 parent 87e7013
commit 68c92f7
Show file tree

Hide file tree

Showing 65 changed files with 691 additions and 797 deletions.
diff --git a/.env.example b/.env.example
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 .env
 bundle.js
 bundle.js.map
+.DS_Store
diff --git a/.travis.yml b/.travis.yml
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-# github-comment
+# Github Comment
 
 基于 GitHub 账号的第三方社会化评论系统
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1 @@
+# Github Comment 客户端
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <title>github comment demo</title>
+  </head>
+  <body>
+    <div id="content" class="container">
+      <div id="github-comments"></div>
+      <script defer="true" src="./bundle.js"
+        id="github-comment" data-username="teddy-ma"
+        data-repo="sliders" data-page-id="1"
+        >
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -1,37 +1,58 @@
 {
   "name": "github-comment-client",
-  "version": "1.0.0",
-  "description": "the client app for github-comment",
-  "main": "main.jsx",
+  "version": "2.0.0",
+  "description": "GitHub Comment client",
+  "main": "index.js",
+  "scripts": {
+    "start": "babel-node index.js",
+    "test": "mocha --compilers js:babel-core/register --require ./test/setup.js 'test/**/*.@(js|jsx)'",
+    "test:watch": "npm run test -- --watch --watch-extensions jsx"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teddy-ma/github-comment.git"
+  },
+  "keywords": [
+    "github",
+    "comment"
+  ],
+  "author": "teddy-ma",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/teddy-ma/github-comment/issues"
+  },
+  "homepage": "https://www.songofcode.com/github-comment/",
   "devDependencies": {
-    "babel-core": "~6.3.26",
-    "babel-loader": "~6.2.1",
-    "babel-preset-es2015": "~6.3.13",
-    "babel-preset-react": "~6.3.13",
-    "bundle-loader": "^0.5.4",
-    "css-loader": "~0.23.1",
-    "file-loader": "~0.8.5",
-    "history": "~1.17.0",
-    "html-webpack-plugin": "~1.7.0",
-    "jsx-loader": "~0.13.2",
-    "node-sass": "^3.4.2",
-    "open-browser-webpack-plugin": "0.0.2",
-    "react": "~0.14.3",
-    "react-dom": "~0.14.3",
-    "react-router": "~1.0.3",
-    "redux-devtools": "^3.0.1",
-    "sass-loader": "^3.1.2",
-    "style-loader": "~0.13.0",
-    "susy": "^2.2.9",
-    "url-loader": "~0.5.7",
-    "webpack": "~1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "chai": "^3.5.0",
+    "chai-immutable": "^1.5.3",
+    "css-loader": "^0.23.1",
+    "jsdom": "^9.3.0",
+    "mocha": "^2.4.5",
+    "react-addons-test-utils": "^15.1.0",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
   },
   "dependencies": {
-    "babel-runtime": "^6.3.19",
-    "jquery": "^2.1.4",
-    "react-redux": "^4.0.6",
-    "redux": "^3.0.5"
+    "classnames": "^2.2.3",
+    "immutable": "^3.7.6",
+    "jquery": "^3.0.0",
+    "react": "^15.1.0",
+    "react-addons-pure-render-mixin": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-redux": "^4.4.1",
+    "redux": "^3.3.1",
+    "socket.io": "^1.4.8"
   }
 }
diff --git a/client/src/action_creators.js b/client/src/action_creators.js
@@ -0,0 +1,24 @@
+// 创建评论
+export function createComment(text) {
+  return {
+    type: 'CREATE_COMMENT',
+    text
+  }
+}
+
+// 请求用户鉴权
+export function authRequest() {
+  return {
+    type: 'AUTH_REQUEST'
+  }
+}
+
+// 加载评论
+export function loadComments(){
+  return {
+    type: "LOAD_COMMENTSE",
+    user_name,
+    repo,
+    page_id
+  }
+}
diff --git a/client/src/components/CommentAlert.jsx b/client/src/components/CommentAlert.jsx
@@ -0,0 +1,17 @@
+// 评论系统顶部的用于显示消息的组件
+import React from 'react';
+import styles from '../css/Main.css';
+
+export default class CommentAlert extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <header className="header">
+        <p>{this.props.message}</p>
+      </header>
+    )
+  }
+};
diff --git a/client/src/components/CommentApp.jsx b/client/src/components/CommentApp.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import * as actionCreators from '../action_creators';
+import CommentList from './CommentList';
+import CommentAlert from './CommentAlert';
+import CommentInput from './CommentInput';
+
+// 应用容器
+export class CommentApp extends React.Component {
+  render() {
+    return (
+      <div>
+        <main className="github-comment-app">
+          <CommentAlert message={this.props.message}/>
+          <CommentList {...this.props}/>
+          <CommentInput {...this.props}/>
+        </main>
+      </div>
+    )
+  }
+};
+
+function mapStateToProps(state) {
+  console.log("mapStateToProps .....");
+  console.log(state);
+  return {
+    comments: state.get('comments'),
+    login: state.get('login'),
+    message: state.get('message'),
+    current_user: state.get('current_user')
+  };
+}
+
+export const CommentAppContainer = connect(mapStateToProps, actionCreators)(CommentApp);
diff --git a/client/src/components/CommentInput.jsx b/client/src/components/CommentInput.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from '../css/Main.css';
+
+export default class CommentInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  _handleOnClick(e) {
+    const itemText = this.state.value;
+    this.props.createComment(itemText);
+    this.setState({value: ''});
+  }
+  _handleOnChange(e) {
+    this.setState({value: e.target.value});
+  }
+  _handleOnFocus(e) {
+    this.props.authRequest();
+  }
+  render() {
+    return (
+      <footer>
+        <input className="new-comment"
+               onChange={ this._handleOnChange.bind(this) }
+               onFocus={ this._handleOnFocus.bind(this) }
+               type="text" />
+        {
+          this.props.login.get('auth') ?
+          <button className={ styles.comment_button } onClick={ this._handleOnClick.bind(this) }>comment</button>
+          :
+          <a className={ styles.login_github_button } href={this.props.login.get('url')} target="_blank">login with github</a>
+        }
+      </footer>
+    )
+  }
+};
diff --git a/client/src/components/CommentItem.jsx b/client/src/components/CommentItem.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from '../css/Main.css';
+
+export default class CommentItem extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <li className={ styles.github_comment_item }>
+        <div>
+          <div className={ styles.github_comment_item_avatar }>
+           <img title={this.props.name} src={this.props.avatar} width="100%" />
+          </div>
+          <div className={ styles.github_comment_item_content}>
+            <p>{this.props.text}</p>
+          </div>
+        </div>
+      </li>
+    )
+  }
+};
diff --git a/client/src/components/CommentList.jsx b/client/src/components/CommentList.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import CommentItem from './CommentItem';
+import styles from '../css/Main.css';
+
+export default class CommentList extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  getItems() {
+    return this.props.comments;
+  }
+  render() {
+    return (
+      <section className="main">
+        <ul className={ styles.github_comment_list }>
+          {this.getItems().map(item =>
+            <CommentItem key={item.get('id')}
+                      text={item.get('body')}
+                      id={item.get('id')}
+                      avatar={item.get('user').get('avatar_url')}
+                      name={item.get('user').get('login')} />
+          )}
+        </ul>
+      </section>
+    )
+  }
+};
diff --git a/client/src/css/Main.css b/client/src/css/Main.css
@@ -0,0 +1,42 @@
+
+.github_comment_app {
+
+}
+
+.github_comment_list {
+  text-align: left;
+  margin-top: 20px;
+  padding-left: 0px;
+}
+
+.github_comment_item {
+  clear: both;
+  /*background-color: #fafbfb;*/
+  border: 0;
+  margin: 1px 0 0;
+  padding: 6px;
+  list-style: none;
+}
+
+.github_comment_item_avatar {
+  float: left;
+  width: 32px;
+  height: 32px;
+  display: block;
+  border: none;
+  vertical-align: top;
+}
+
+.github_comment_item_content {
+  padding-left: 42px;
+}
+
+.login_github_button, .comment_button {
+  border-radius: 5px;
+  padding: 4px 14px;
+  text-decoration: none;
+  cursor: pointer;
+  color: #fff;
+  background-color: #00A6FF;
+  border: 1px solid #fff;
+}
diff --git a/client/src/index.jsx b/client/src/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {List, Map} from 'immutable';
+import {compose, createStore} from 'redux';
+import {Provider} from 'react-redux';
+import reducer from './reducer';
+import {CommentAppContainer} from './components/CommentApp';
+
+// 根据引用的参数, 初始化配置
+var script_tag = document.getElementById("github-comment"); // 用于引用的 js script tag
+// 读取 scrpit tag 中设定的 data 属性
+const user_name = script_tag.dataset.username;
+const repo = script_tag.dataset.repo;
+const page_id = script_tag.dataset.pageId;
+const server_url = script_tag.dataset.serverUrl || 'github-comment.herokuapp.com';
+const wrapper_id = 'github-comments';
+
+// 定义 url 接口地址
+const COMMENTS_URL = `http://${server_url}/comments?page_id=${page_id}&user_name=${user_name}&repo=${repo}`; //http://localhost:5000/fake/comments
+const AUTH_URL = `http://${server_url}/users/auth`; //http://localhost:5000/fake/user
+
+// 创建 store
+const createStoreDevTools = compose(window.devToolsExtension
+  ? window.devToolsExtension()
+  : f => f)(createStore);
+const store = createStoreDevTools(reducer);
+
+// 初始化基础信息
+store.dispatch({ type: 'INIT_APP', user_name, repo, page_id, server_url });
+// 初始化评论列表
+store.dispatch({ type: 'LOAD_COMMENTS', user_name, repo, page_id });
+// 初始化登录状态
+store.dispatch({ type: 'AUTH_REQUEST' });
+
+// 渲染 UI
+ReactDOM.render(
+  <Provider store={store}>
+    <CommentAppContainer/>
+  </Provider>,
+  document.getElementById('github-comments')
+);