dashboard/src/charts/WhatsApp_session.jsx

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);
  }

  renderMsgItem(chatMsg) {
    const msgDate = new Date(chatMsg.msgtime);
    const msgDateText = msgDate.toLocaleDateString() + ' ' + msgDate.toLocaleTimeString();
    return (
      <List.Item className="ant-list-item-no-flex">
        <List.Item.Meta
          avatar={<Avatar src={chatMsg.from_avatar} />}
          title={chatMsg.from_name}
          description={msgDateText}
        />
        {this.renderMsgContent(chatMsg)}
      </List.Item>
    );
  }

  renderMsgContent(chatMsg) {
    if (chatMsg.msgtype === 'file') {
      return <a href={chatMsg.content.fileurl}>{chatMsg.content.filename}</a>;
    } else if (chatMsg.msgtype === 'image') {
      return <img style={{ width: '50%', height: '50%' }} alt={chatMsg.msgid} src={chatMsg.content.imageurl} />;
    } else if (chatMsg.msgtype === 'text') {
      return <>{chatMsg.content.text}</>;
    } else if (chatMsg.msgtype === 'link') {
      return <a href={chatMsg.content.link_url}>{chatMsg.content.title}</a>;
    } else {
      return <>未知消息[{chatMsg.msgtype}]</>;
    }
  }

  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) => 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(WhatsApp_session);