dashboard/src/charts/WhatsApp_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 WhatsApp_session extends Component {

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

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

    handleUserClick(user) {
        const {whatsAppStore} = this.context;
        whatsAppStore.fetchContactList(user);
    }
    handleContactClick(contact) {
        const {whatsAppStore} = this.context;
        whatsAppStore.fetchChatMsgList(contact, 0, 20);
    }
    handlePageChanged(page, pageSize) {
        const {whatsAppStore} = this.context;
        whatsAppStore.fetchChatMsgList(whatsAppStore.selectedContact, page, pageSize);
    }
    render() {
        const {whatsAppStore} = this.context;
        const userList = whatsAppStore.userList;
        const contactList = whatsAppStore.contactList;
        const chatMsgList = whatsAppStore.chatMsgList;
        const chatMsgPage = whatsAppStore.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) => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<Avatar src={chatMsg.from_avatar} />}
                                    title={chatMsg.from_name}
                                    description={chatMsg.msgtime}
                                />
                                {chatMsg.content.text}
                            </List.Item>
                        )}
                    />
                    <Pagination 
                        current={chatMsgPage.currpage} 
                        pageSize={20} 
                        total={chatMsgPage.totalpage*20}
                        onChange={(page, pageSize) => { this.handlePageChanged(page, pageSize)}} />
                    
                    </Space>
                </Col>

            </Row>
        </>
    );
    }

}
export default observer(WhatsApp_session);