text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import Table from 'rc-table';
  import styled from 'styled-components';
  import * as style from 'components/Variables';
  
  const MessagesWrapper = styled.div`
    background-color: ${style.color.white};
    border: 1px solid ${style.color.gray.light};
    margin: 1em auto;
    padding: 1em;
    text-align: left;
    width: 85%;
  `;
  
  /* eslint-disable react/prefer-stateless-function */
  export default class MessagesList extends Component {
    render() {
      const columns = [
        {
          title: 'message',
          dataIndex: 'message',
          key: 'message',
          width: 1500,
        },
        {
          title: 'username',
          dataIndex: 'username',
          key: 'username',
          width: 100,
        },
      ];
  
      const data = [...this.props.messages];
      return (
        <MessagesWrapper>
          <Table columns={columns} data={data} />
        </MessagesWrapper>
      );
    }
  }
  
  MessagesList.propTypes = {
    messages: PropTypes.array,
  };
  