stitch-ui/src/push/components/MessageList.js

import React from "react";
import PropTypes from "prop-types";
import { Banner, Spinner } from "../../core";
import Message from "./Message";
import { SAVE_TYPE_SENT, SAVE_TYPE_DRAFT } from "../constants";

class MessageList extends React.Component {
  constructor(props) {
    super(props);
    this.load = this.load.bind(this);
  }
  componentDidMount() {
    this.load(this.props.messageType);
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.messageType !== nextProps.messageType) {
      this.load(nextProps.messageType);
    }
  }
  load(type = this.props.messageType) {
    return this.props.loadMessages({ type });
  }
  render() {
    const {
      getMessageOptions,
      loadingMessages,
      messages,
      loadingMessagesError
    } = this.props;
    return (
      <div>
        <Spinner open={loadingMessages} xlarge />
        <Banner message={loadingMessagesError} error />
        {!loadingMessages &&
          messages.length === 0 &&
          <div className="push-messages-list-empty">No messages found.</div>}
        {!loadingMessages &&
          messages.length > 0 &&
          <table className="push-messages-list">
            <thead>
              <tr>
                <th>Message Label</th>
                <th>Message Text</th>
                <th>To</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {messages.map(m =>
                <Message key={m._id} message={m}>
                  {getMessageOptions(m)}
                </Message>
              )}
            </tbody>
          </table>}
        <ul />
      </div>
    );
  }
}

MessageList.propTypes = {
  messageType: PropTypes.oneOf([SAVE_TYPE_SENT, SAVE_TYPE_DRAFT]).isRequired,
  getMessageOptions: PropTypes.func.isRequired,
  loadingMessages: PropTypes.bool.isRequired,
  messages: PropTypes.arrayOf(
    PropTypes.shape({
      _id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      message: PropTypes.string.isRequired,
      topic: PropTypes.string.isRequired
    })
  ).isRequired,
  loadingMessagesError: PropTypes.string,
  loadMessages: PropTypes.func.isRequired
};

MessageList.defaultProps = {
  loadingMessagesError: null
};

export default MessageList;