dashboard/src/charts/Wechat_session.js

import React, {Component} from 'react';
import {Row, Col, List, Avatar, Space, Pagination} from 'antd';
import {stores_Context} from '../config'
import {observer} from 'mobx-react';
import 'moment/locale/zh-cn';

class Wechat_session extends Component {

    static contextType = stores_Context;
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.info('Wechat_session.componentDidMount');
        const {wechatStore} = this.context;
        wechatStore.fetchWechatUserList();
    }

    handleUserClick(user) {
        const {wechatStore} = this.context;
        wechatStore.fetchContactList(user);
    }
    handleContactClick(contact) {
        const {wechatStore} = this.context;
        wechatStore.fetchChatMsgList(contact, 0, 20);
    }
    handlePageChanged(page, pageSize) {
        const {wechatStore} = this.context;
        wechatStore.fetchChatMsgList(wechatStore.selectedContact, page, pageSize);
    }

    renderMsgItem(chatMsg) {
        if (chatMsg.msgtype === 'image') {
            return (
            <List.Item className='ant-list-item-no-flex'>
                <List.Item.Meta
                    avatar={<Avatar src={chatMsg.from_avatar} />}
                    title={chatMsg.from_name}
                    description={chatMsg.msgtime}
                />     
                <img style={{width: '50%', height: '50%'}} alt={chatMsg.msgid} src={chatMsg.content.imageurl} />                       
            </List.Item> 
        )} else {
            return (
                <List.Item>
                    <List.Item.Meta
                        avatar={<Avatar src={chatMsg.from_avatar} />}
                        title={chatMsg.from_name}
                        description={chatMsg.msgtime}
                    />
                    {chatMsg.content.text}                                
                </List.Item> 
            )
        }
    }

    render() {
        const {wechatStore} = this.context;
        const userList = wechatStore.userList;
        const contactList = wechatStore.contactList;
        const chatMsgList = wechatStore.chatMsgList;
        const chatMsgPage = wechatStore.chatMsgPage;

    return (
        <>
            <Row>
                <Col span={6}>
                    <List
                        style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
                        bordered={true}
                        itemLayout="horizontal"
                        dataSource={userList}
                        renderItem={(user) => (
                            <List.Item onClick={() => {this.handleUserClick(user)}}>
                                <List.Item.Meta
                                    avatar={<Avatar src={user.avatar} />}
                                    title={user.username}
                                />
                            </List.Item>
                        )}
                    />
                </Col>
                <Col span={6}>
                    <List
                        style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
                        bordered={true}
                        itemLayout="horizontal"
                        dataSource={contactList}
                        renderItem={(contact) => (
                            <List.Item onClick={() => {this.handleContactClick(contact)}}>
                                <List.Item.Meta
                                    avatar={<Avatar src={contact.avatar} />}
                                    title={contact.username}
                                />
                            </List.Item>
                        )}
                    />
                </Col>

                <Col span={12}>
                    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                    <List
                        style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
                        bordered={true}
                        itemLayout="horizontal"
                        dataSource={chatMsgList}
                        renderItem={(chatMsg) => this.renderMsgItem(chatMsg)}
                    />
                    <Pagination 
                        current={chatMsgPage.currpage} 
                        pageSize={20} 
                        total={chatMsgPage.totalpage*20}
                        onChange={(page, pageSize) => { this.handlePageChanged(page, pageSize)}} />
                    </Space>
                </Col>

            </Row>
        </>
    );
    }

}

export default observer(Wechat_session);