diff --git a/.eslintrc b/.eslintrc index 4ff259b..e1df4b2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,24 +1,32 @@ { "parser": "babel-eslint", - "extends": "eslint-config-airbnb", + "extends": "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], + "generator-star-spacing": [0], + "consistent-return": [0], + "react/forbid-prop-types": [0], + "react/jsx-filename-extension": [1, { "extensions": [".js"] }], + "global-require": [1], + "import/prefer-default-export": [0], "react/jsx-no-bind": [0], "react/prop-types": [0], - "arrow-body-style": [0], "react/prefer-stateless-function": [0], - "semi": [0], - "global-require": [0], - "no-shadow": [0], - "no-useless-computed-key": [0], - "no-underscore-dangle": [0] + "no-else-return": [0], + "no-restricted-syntax": [0], + "import/no-extraneous-dependencies": [0], + "no-use-before-define": [0], + "jsx-a11y/no-static-element-interactions": [0], + "no-nested-ternary": [0], + "arrow-body-style": [0], + "import/extensions": [0], + "no-bitwise": [0], + "no-cond-assign": [0], + "import/no-unresolved": [0], + "require-yield": [1] }, - "ecmaFeatures": { - "experimentalObjectRestSpread": true + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true + } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index ad8f1bc..db5f3c4 100644 --- a/package.json +++ b/package.json @@ -30,12 +30,21 @@ "gh-pages": "^0.12.0", "gulp": "^3.9.1", "gulp-cli": "^1.2.2", - "redbox-react": "^1.3.2" + "redbox-react": "^1.3.2", + "@kadira/storybook": "^2.21.0", + "eslint": "^3.12.2", + "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" }, "scripts": { "start": "dora --plugins \"proxy?watchDirs=./mock,webpack,webpack-hmr\"", "build": "atool-build", "test": "atool-test-mocha ./src/**/*-test.js", - "pub": "npm run build && gulp" + "pub": "npm run build && gulp", + "lint": "eslint --ext .js src test", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" } } diff --git a/src/components/Conversations/ChatHeader.js b/src/components/Conversations/ChatHeader.js index 4bc0d2a..36250f2 100644 --- a/src/components/Conversations/ChatHeader.js +++ b/src/components/Conversations/ChatHeader.js @@ -6,7 +6,7 @@ import styles from './ChatHeader.less'; export default connect()(({ userId, userName, sessionType, avatar, dispatch }) => { const nameSub = userName.substr(0, 1).toUpperCase(); - return
+ return (
{avatar ? : {nameSub}} @@ -18,5 +18,5 @@ export default connect()(({ userId, userName, sessionType, avatar, dispatch }) = >
-
+ ); }); diff --git a/src/components/Conversations/ChatInput.js b/src/components/Conversations/ChatInput.js index f6cdc54..8567413 100644 --- a/src/components/Conversations/ChatInput.js +++ b/src/components/Conversations/ChatInput.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { Input } from 'antd'; import styles from './ChatInput.less'; @@ -33,17 +32,17 @@ export default class ChatInput extends React.Component { }); } render() { - return
+ return (
this.inputElement = c} + ref={c => { this.inputElement = c; }} onKeyDown={this.onKeyDown} type="textarea" /> 发送 -
+
); } } diff --git a/src/components/Conversations/ChatPresent.js b/src/components/Conversations/ChatPresent.js index 95736f0..e03b68b 100644 --- a/src/components/Conversations/ChatPresent.js +++ b/src/components/Conversations/ChatPresent.js @@ -7,7 +7,13 @@ import moment from 'moment'; const reqAnimFrame = getRequestAnimationFrame(); class ChatPresent extends React.Component { + componentDidMount() { + this.scrollIntoView(); + } componentDidUpdate() { + this.scrollIntoView(); + } + scrollIntoView = () => { const startTime = Date.now(); const scrollTop = this.container.scrollTop; const targetScrollTop = this.container.scrollHeight; @@ -22,30 +28,42 @@ class ChatPresent extends React.Component { reqAnimFrame(frameFunc); } render() { - return
this.container = c} + const { user } = this.props; + return (
{this.container = c;}} className={styles.chatPresent} > {this.props.conversations.map((conversation, idx) => { - const isMe = this.props.user && conversation.user && conversation.user.uid === this.props.user.uid; + const isMe = user && conversation.user && conversation.user.uid === this.props.user.uid; const from = isMe ? 'me' : conversation.from; - return
+ return (
{conversation.user && !isMe ? : null } + - {conversation.user && !isMe ? {conversation.user.displayName} : null} + + {conversation.user && !isMe ? + + {conversation.user.displayName} + + : null} + {conversation.from !== 'system' && conversation.from !== 'chat' ? - {moment(conversation.time).format('YYYY-MM-DD HH:mm:ss')} + + {moment(conversation.time).format('YYYY-MM-DD HH:mm:ss')} + : null } + +
-
+
); })} -
+
); } } export default connect(props => ({ user: props.auth.user, -}))(ChatPresent) +}))(ChatPresent); diff --git a/src/components/Conversations/ChatUsers.js b/src/components/Conversations/ChatUsers.js index 6d019ff..d47ca0e 100644 --- a/src/components/Conversations/ChatUsers.js +++ b/src/components/Conversations/ChatUsers.js @@ -7,7 +7,7 @@ import styles from './ChatUser.css'; export default connect(props => ({ users: props.users.users, }))(props => { - return
+ return (
-
-}) - +
); +}); diff --git a/src/components/Conversations/Conversation.Chat.js b/src/components/Conversations/Conversation.Chat.js index 9148d73..e9954f6 100644 --- a/src/components/Conversations/Conversation.Chat.js +++ b/src/components/Conversations/Conversation.Chat.js @@ -10,7 +10,7 @@ export default connect(props => ({ user: props.auth.user, }))(props => { const { cid, robotParams, active, user } = props; - return
+ return (
{user ? @@ -19,5 +19,5 @@ export default connect(props => ({ payload: { message, cid, robotParams, user }, })} /> : } -
+
); }); diff --git a/src/components/Conversations/Conversation.Robot.js b/src/components/Conversations/Conversation.Robot.js index e962bbc..f54e2de 100644 --- a/src/components/Conversations/Conversation.Robot.js +++ b/src/components/Conversations/Conversation.Robot.js @@ -6,7 +6,7 @@ import styles from './Conversation.css'; export default function RobotConversation(props) { const { cid, robotParams, active } = props; - return
+ return (
props.dispatch({ @@ -14,5 +14,5 @@ export default function RobotConversation(props) { payload: { message, cid, robotParams }, })} /> -
+
); } diff --git a/src/components/Conversations/SpinnerAvatar.js b/src/components/Conversations/SpinnerAvatar.js index cdde899..eb36a5a 100644 --- a/src/components/Conversations/SpinnerAvatar.js +++ b/src/components/Conversations/SpinnerAvatar.js @@ -13,7 +13,7 @@ export default function SpinnerAvatar(props) { active: true, }); return (
- + diff --git a/src/components/Conversations/VisitorList.js b/src/components/Conversations/VisitorList.js index 6ec64c9..82b355e 100644 --- a/src/components/Conversations/VisitorList.js +++ b/src/components/Conversations/VisitorList.js @@ -21,7 +21,7 @@ function highlight(text, highlightValue) { } export default connect(select)(({ filterValue, dispatch, conversations, active }) => { - return
+ return (
{conversations .filter(({ userName }) => !filterValue || userName.indexOf(filterValue) !== -1) .map((conversation, idx) => { @@ -31,7 +31,7 @@ export default connect(select)(({ filterValue, dispatch, conversations, active } [styles.conversation]: true, [styles.active]: active === idx, }); - return
dispatch({ type: 'conversations/setActive', idx })} className={conversationCls} key={idx} @@ -49,8 +49,8 @@ export default connect(select)(({ filterValue, dispatch, conversations, active } > -
+
); }) } -
+
); }); diff --git a/src/components/CustomerService/CustomerServiceStatus.js b/src/components/CustomerService/CustomerServiceStatus.js index 4051738..b9d52c8 100644 --- a/src/components/CustomerService/CustomerServiceStatus.js +++ b/src/components/CustomerService/CustomerServiceStatus.js @@ -1,6 +1,5 @@ import React from 'react'; import { connect } from 'dva'; -import classNames from 'classnames'; import { ONLINE } from '../../services/customerService'; import { Menu, Dropdown, Icon } from 'antd'; import styles from './CustomerServiceStatus.less'; @@ -9,30 +8,32 @@ const select = props => ({ user: props.auth.user, serviceName: props.customerService.serviceName, status: props.customerService.status, -}) +}); export default connect(select)(({ user, status, serviceName, dispatch }) => { - const menu = + const menu = ( dispatch({ type: 'customerService/online' })}> 上线 dispatch({ type: 'customerService/offline' })}> 离线 - ; + ); const avatarColor = status === ONLINE ? '#57C6F7' : '#999'; const statusColor = status === ONLINE ? '#87D068' : '#ccc'; - return
+ return (
- {user && user.photoURL ? : } + {user && user.photoURL ? + : + + }
- {user ? user.displayName : null} + {user ? user.displayName : serviceName}
-
-}) - +
); +}); diff --git a/src/components/Example.js b/src/components/Example.js deleted file mode 100644 index a9bc7a0..0000000 --- a/src/components/Example.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -const Example = (props) => { - return ( -
- Example -
- ); -}; - -Example.propTypes = { -}; - -export default Example; diff --git a/src/components/Header.js b/src/components/Header.js index 8560070..17bac66 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -7,7 +7,7 @@ import CusomterServiceStatus from './CustomerService/CustomerServiceStatus'; const Search = Input.Search; export default connect()(props => { - return
+ return (
props.dispatch({ @@ -16,5 +16,5 @@ export default connect()(props => { })} /> -
+
); }); diff --git a/src/components/Login.js b/src/components/Login.js index 84d9eba..af30dfd 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -6,7 +6,7 @@ import styles from './MainPanel.less'; export default connect(props => ({ auth: props.auth }) )(props => { - return
+ return (

LOGIN TO CHAT

-
+
); }); diff --git a/src/components/MainPanel.js b/src/components/MainPanel.js index c65c2ed..df5c482 100644 --- a/src/components/MainPanel.js +++ b/src/components/MainPanel.js @@ -9,15 +9,17 @@ export default connect(props => ({ active: props.conversations.active, robotParams: props.robotParams, }))(props => { - return
+ return (
{props.list.map((conversation, idx) => { - const PanelComponent = conversation.sessionType === 'robot' ? RobotConversation : ChatConversation; - return ; + />); })} -
; +
); }); diff --git a/src/components/Slider.js b/src/components/Slider.js index 0aa1ae6..876af8a 100644 --- a/src/components/Slider.js +++ b/src/components/Slider.js @@ -3,10 +3,9 @@ import VisitorList from './Conversations/VisitorList'; import styles from './Slider.css'; export default function Slider() { - return
- + return (
-
+
); } diff --git a/src/index.js b/src/index.js index 047b049..7447cee 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,11 @@ import './index.html'; -import 'antd/dist/antd.css' +import 'antd/dist/antd.css'; import './index.css'; import dva from 'dva'; // 1. Initialize const app = dva(); -// 2. Plugins -//app.use({}); - // 3. Model app.model(require('./models/auth')); app.model(require('./models/conversations')); diff --git a/src/models/auth.js b/src/models/auth.js index d79118b..5fb5faa 100644 --- a/src/models/auth.js +++ b/src/models/auth.js @@ -13,15 +13,6 @@ export default { state: { user: firebase.auth().currentUser }, - subscriptions: { - unload({ dispatch }) { - // window.onbeforeunload = function () { - // dispatch({ type: 'logout' }); - // return false; - // } - }, - }, - effects: { *login({ payload }, { call, put }) { let provider; @@ -39,13 +30,12 @@ export default { authResult = yield call(() => firebase.auth().signInWithPopup(provider)); } if (authResult) { - const cid = Date.now(); const user = { ...anonymouseUser, ...authResult.user }; yield call(login, user); yield put({ type: 'authed', payload: { ...authResult, user } }); } }, - *logout({ payload }, { select, call, put }) { + *logout({ payload }, { select, call }) { const state = yield select(); const uid = state.auth.user.uid; if (uid) { @@ -59,5 +49,4 @@ export default { return { ...state, ...payload }; }, }, - -} +}; diff --git a/src/models/chat.js b/src/models/chat.js index 7aeabee..898239b 100644 --- a/src/models/chat.js +++ b/src/models/chat.js @@ -1,4 +1,3 @@ -import firebase from '../utils/firebase'; import pathToRegexp from 'path-to-regexp'; import { fetch, send } from '../services/chat'; import { eventChannel } from 'redux-saga'; @@ -19,7 +18,7 @@ export default { }, effects: { - *enter({ payload }, { call, put }) { + *enter({ payload }, { put }) { const cid = Date.now(); yield put({ type: 'conversations/save', payload: { user: { @@ -37,17 +36,20 @@ export default { const cid = payload.cid; const conversationsRef = yield call(fetch); function firebaseChannel() { - return eventChannel(emitter => conversationsRef.on('child_added', emitter)) + return eventChannel(emitter => conversationsRef.on('child_added', emitter)); } const cann = yield call(firebaseChannel); while (true) { const value = yield take(cann); - yield put({ type: 'conversations/message', payload: {...value.val(), cid, type: 'chat' } }); + yield put({ + type: 'conversations/message', + payload: { ...value.val(), cid, type: 'chat' }, + }); } }, - *sendMessage({ payload }, { call, put }) { - const sendResult = yield call(send, payload); + *sendMessage({ payload }, { call }) { + yield call(send, payload); }, }, @@ -56,5 +58,4 @@ export default { return { ...state, ...action.payload }; }, }, - -} +}; diff --git a/src/models/conversations.js b/src/models/conversations.js index 0a3d25b..d02adcc 100644 --- a/src/models/conversations.js +++ b/src/models/conversations.js @@ -8,15 +8,9 @@ export default { state: { list: [], active: 0, filterValue: null }, - subscriptions: { - // setup({ dispatch, history }) { - // dispatch({ type: 'fetch' }); - // }, - }, - effects: { - *fetch({ payload }, { call, put }) { - const result = yield call(fetch); + *fetch({ payload }, { call }) { + yield call(fetch); }, *loop({ payload }, { call, put }) { let i = 0; @@ -26,13 +20,13 @@ export default { for (let j = 0; j < content.length; j++) { if (content[j].sessionType === 'robot') { const robotConfig = yield call(initRobot, content[j].robotParams); - const robotParams = {...content[j].robotParams, ...robotConfig.data.robotParams }; + const robotParams = { ...content[j].robotParams, ...robotConfig.data.robotParams }; yield put({ type: 'save', payload: { ...content[j], robotParams, conversations: [ { from: 'system', time: Date.now(), content: '已接入机器人。' }, - { from: 'robot', time: Date.now(), type: 'text', content: '您好，有什么可以帮您的么？'}, - ]}, + { from: 'robot', time: Date.now(), type: 'text', content: '您好，有什么可以帮您的么？' }, + ] }, }); } else { yield put({ type: 'save', payload: content[j] }); @@ -71,7 +65,7 @@ export default { break; default: break; } - return {...state, list }; + return { ...state, list }; }, userMessage(state, { payload }) { const list = state.list.map(item => { @@ -83,11 +77,11 @@ export default { type: 'text', content: payload.message, }); - return {...item, conversations }; + return { ...item, conversations }; } return item; }); - return {...state, list}; + return { ...state, list }; }, message(state, { payload }) { const list = state.list.map(item => { @@ -100,25 +94,24 @@ export default { content: payload.content, user: payload.user, }); - return {...item, conversations }; + return { ...item, conversations }; } return item; }); - return {...state, list}; + return { ...state, list }; }, setActive(state, { idx }) { - return {...state, active: idx }; + return { ...state, active: idx }; }, removeItem(state, { payload }) { const list = state.list.filter(item => item.userId !== payload); - return {...state, list }; + return { ...state, list }; }, - offline(state, { payload }) { - return {...state, list: [] }; + offline(state) { + return { ...state, list: [] }; }, search(state, { payload }) { return { ...state, filterValue: payload }; - } + }, }, - -} +}; diff --git a/src/models/customService.js b/src/models/customService.js index aef42cd..68516e7 100644 --- a/src/models/customService.js +++ b/src/models/customService.js @@ -37,8 +37,7 @@ export default { reducers: { customerServiceOnline(states, { payload }) { - return {...states, ...payload }; - } + return { ...states, ...payload }; + }, }, - -} +}; diff --git a/src/models/example.js b/src/models/example.js deleted file mode 100644 index c54bf1c..0000000 --- a/src/models/example.js +++ /dev/null @@ -1,24 +0,0 @@ - -export default { - - namespace: 'example', - - state: {}, - - subscriptions: { - setup({ dispatch, history }) { - }, - }, - - effects: { - *fetchRemote({ payload }, { call, put }) { - }, - }, - - reducers: { - fetch(state, action) { - return { ...state, ...action.payload }; - }, - }, - -} diff --git a/src/models/robot.js b/src/models/robot.js index 5740a42..1d2f92a 100644 --- a/src/models/robot.js +++ b/src/models/robot.js @@ -6,11 +6,6 @@ export default { state: {}, - subscriptions: { - setup({ dispatch, history }) { - }, - }, - effects: { *sendMessage({ payload }, { call, put }) { yield put({ type: 'conversations/userMessage', payload }); @@ -19,15 +14,13 @@ export default { cid: payload.cid, content: data.content, type: 'robot', - }}); + } }); }, }, reducers: { - sendMessage(state, action) { - - return { ...state}; + sendMessage(state) { + return { ...state }; }, }, - -} +}; diff --git a/src/models/users.js b/src/models/users.js index 7d3afc4..13e85ec 100644 --- a/src/models/users.js +++ b/src/models/users.js @@ -1,5 +1,4 @@ -import firebase from '../utils/firebase'; -import { fetch, send } from '../services/users'; +import { fetch } from '../services/users'; import { eventChannel } from 'redux-saga'; export default { @@ -9,16 +8,15 @@ export default { effects: { *loop({ payload }, { call, put, take }) { - const cid = payload.cid; const conversationsRef = yield call(fetch); function firebaseChannel() { - return eventChannel(emitter => conversationsRef.on('value', emitter)) + return eventChannel(emitter => conversationsRef.on('value', emitter)); } const cann = yield call(firebaseChannel); while (true) { const value = yield take(cann); - yield put({ type: 'fetch', payload: {...value.val() } }); + yield put({ type: 'fetch', payload: { ...value.val() } }); } }, }, @@ -34,5 +32,4 @@ export default { return { ...state, users }; }, }, - -} +}; diff --git a/src/router.js b/src/router.js index dd17d51..079305f 100644 --- a/src/router.js +++ b/src/router.js @@ -1,10 +1,10 @@ -import React, { PropTypes } from 'react'; -import { Router, Route, IndexRoute, Link } from 'dva/router'; +import React from 'react'; +import { Router, Route } from 'dva/router'; import IndexPage from './routes/IndexPage'; import Chat from './routes/Chat'; import ChatRoom from './routes/ChatRoom'; -export default function({ history }) { +export default (({ history }) => { return ( @@ -12,4 +12,4 @@ export default function({ history }) { ); -}; +}); diff --git a/src/routes/Chat.js b/src/routes/Chat.js index 5d565cc..da68e8c 100644 --- a/src/routes/Chat.js +++ b/src/routes/Chat.js @@ -4,8 +4,8 @@ import Header from '../components/Header'; import MainPanel from '../components/MainPanel'; import styles from './Chat.css'; -export default function Chat(props) { - return
+export default function Chat() { + return (
@@ -13,5 +13,5 @@ export default function Chat(props) {
-
+
); } diff --git a/src/routes/ChatRoom.js b/src/routes/ChatRoom.js index 40705e1..7122b5f 100644 --- a/src/routes/ChatRoom.js +++ b/src/routes/ChatRoom.js @@ -2,12 +2,13 @@ import React from 'react'; import Slider from '../components/Slider'; import ChatUsers from '../components/Conversations/ChatUsers'; import Header from '../components/Header'; -import Login from '../components/Login'; import MainPanel from '../components/MainPanel'; import styles from './Chat.css'; import { connect } from 'dva'; -export default connect(props => ({ auth: props.auth }))(props =>
+export default connect( + props => ({ auth: props.auth }) +)(() => (
@@ -16,5 +17,6 @@ export default connect(props => ({ auth: props.auth }))(props =>
-
); +
) +); diff --git a/src/routes/IndexPage.js b/src/routes/IndexPage.js index 02e5a12..79d0cd0 100644 --- a/src/routes/IndexPage.js +++ b/src/routes/IndexPage.js @@ -1,17 +1,10 @@ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { connect } from 'dva'; import { Link } from 'dva/router'; -import { Menu, Dropdown, Icon, Button } from 'antd'; +import { Icon, Button } from 'antd'; import styles from './IndexPage.css'; -import firebase from 'firebase'; -function IndexPage(props) { - const menu = ( - props.dispatch({ type: 'auth/login', payload: e.key }) }> - Sign with Google - Sign with Github - - ); +function IndexPage() { return (
diff --git a/src/services/chat.js b/src/services/chat.js index 5c23ce3..14138b9 100644 --- a/src/services/chat.js +++ b/src/services/chat.js @@ -16,13 +16,13 @@ export async function send({ message, user }) { }, }; - const chatData = {} + const chatData = {}; chatData[`/chat/${newChatKey}`] = chat; return firebase.database().ref().update(chatData); } export async function login(user) { - const newUserKey = firebase.database().ref().child('user').push().key; + firebase.database().ref().child('user').push(); const userData = {}; userData[`/user/${user.uid}`] = { displayName: user.displayName, diff --git a/src/services/robot.js b/src/services/robot.js index 15ab781..b0dc737 100644 --- a/src/services/robot.js +++ b/src/services/robot.js @@ -8,6 +8,6 @@ export async function initRobot(params) { export async function sendMessage(params) { return request('/api/robot/getanswer', { method: 'post', - body: JSON.stringify({...params.robotParams, question: params.message }), + body: JSON.stringify({ ...params.robotParams, question: params.message }), }); } diff --git a/src/utils/ListSort.js b/src/utils/ListSort.js index 35d5234..7bc81a3 100644 --- a/src/utils/ListSort.js +++ b/src/utils/ListSort.js @@ -336,7 +336,13 @@ export default class ListSort extends React.Component { render() { const childrenToRender = toArrayChildren(this.state.children).map(this.getChildren); const props = { ...this.props }; - ['component', 'components', 'animType', 'dragClassName', 'appearAnim'].forEach(key => delete props[key]); + [ + 'component', + 'components', + 'animType', + 'dragClassName', + 'appearAnim', + ].forEach(key => delete props[key]); if (this.props.appearAnim) { return React.createElement(QueueAnim, { ...props, diff --git a/src/utils/animate.js b/src/utils/animate.js index 76170f8..4df472d 100644 --- a/src/utils/animate.js +++ b/src/utils/animate.js @@ -1,10 +1,11 @@ + export const easeInOutCubic = (t, b, c, d) => { const cc = c - b; - t /= d / 2; - if (t < 1) { - return cc / 2 * t * t * t + b; + let _t = t / (d / 2); + if (_t < 1) { + return cc / 2 * _t * _t * _t + b; } - return cc / 2 * ((t -= 2) * t * t + 2) + b; + return cc / 2 * ((_t -= 2) * _t * _t + 2) + b; }; export function getRequestAnimationFrame() {