feat: Show user groups

client/modules/main/chatPanel/featureLinkmans/FeatureLinkmans.jsx

@@ -1,39 +1,13 @@
 import React, { Component } from 'react';
 
 import LinkmanGroup from './LinkmanGroup';
-import Linkman from './Linkman';
 import './FeatureLinkmans.less';
 
 class FeatureLinkmans extends Component {
     render() {
         return (
             <div className="module-main-feature">
-                <LinkmanGroup defaultFocus="1">
-                    <Linkman
-                        key="1"
-                        name="小姐姐一号"
-                        avatar={require('@/assets/images/头像2.png')}
-                        preview="1111111111#(乖)"
-                        time={new Date()}
-                        unread={9}
-                    />
-                    <Linkman
-                        key="2"
-                        name="小姐姐二号"
-                        avatar={require('@/assets/images/头像2.png')}
-                        preview="发尽快落实到解放路可是对方荆防颗粒世纪东方法术打击发送"
-                        time={new Date(2017, 11, 23)}
-                        unread={99}
-                    />
-                    <Linkman
-                        key="3"
-                        name="fiora"
-                        avatar={require('@/assets/images/头像2.png')}
-                        preview="1111111111#(乖)"
-                        time={new Date(2018, 2, 24)}
-                        unread={0}
-                    />
-                </LinkmanGroup>
+                <LinkmanGroup />
             </div>
         );
     }

client/modules/main/chatPanel/featureLinkmans/LinkmanGroup.jsx

@@ -1,36 +1,60 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import Linkman from './Linkman';
 
 class LinkmanGroup extends Component {
     static propTypes = {
-        children: PropTypes.arrayOf(PropTypes.element),
-        defaultFocus: PropTypes.string,
+        groups: ImmutablePropTypes.list,
     }
     constructor(props) {
         super(props);
         this.state = {
-            focus: props.defaultFocus,
+            focus: '',
         };
     }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.groups.length !== 0) {
+            this.setState({
+                focus: nextProps.groups.getIn(['0', '_id']),
+            });
+        }
+    }
     changeFocus(focus) {
         this.setState({
             focus,
         });
     }
+    renderGroup(group) {
+        const groupId = group.get('_id');
+        return (
+            <Linkman
+                key={groupId}
+                name={group.get('name')}
+                avatar={group.get('avatar')}
+                preview="1111111111#(乖)"
+                time={new Date()}
+                unread={9}
+                focus={this.state.focus === groupId}
+                onClick={this.changeFocus.bind(this, groupId)}
+            />
+        );
+    }
     render() {
-        const { children } = this.props;
-        const { focus } = this.state;
+        const { groups } = this.props;
         return (
             <div>
                 {
-                    children.map(linkman => React.cloneElement(linkman, {
-                        focus: focus === linkman.key,
-                        onClick: this.changeFocus.bind(this, linkman.key),
-                    }))
+                    groups.map(group => (
+                        this.renderGroup(group)
+                    ))
                 }
             </div>
         );
     }
 }
 
-export default LinkmanGroup;
+export default connect(state => ({
+    groups: state.getIn(['user', 'groups']) || [],
+}))(LinkmanGroup);

package.json

@@ -82,6 +82,7 @@
     "prop-types": "^15.6.0",
     "pxrem-loader": "^1.0.0",
     "react-hot-loader": "^4.0.0",
+    "react-immutable-proptypes": "^2.1.0",
     "react-transform-log-render": "^1.0.0",
     "react-transform-style": "^1.0.4",
     "redbox-react": "^1.3.4",

yarn.lock

@@ -5681,6 +5681,10 @@ react-hot-loader@^4.0.0:
     prop-types "^15.6.0"
     shallowequal "^1.0.2"
 
+react-immutable-proptypes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4"
+
 react-immutable-render-mixin@^0.9.7:
   version "0.9.7"
   resolved "http://registry.npm.taobao.org/react-immutable-render-mixin/download/react-immutable-render-mixin-0.9.7.tgz#fe34053760cc72e7becc8af3e6e30542d97d3601"