client/src/components/MessageList.js

import Message from './Message'
import React from 'react'
import { Box, Divider, Typography } from '@material-ui/core'
import ConversationAvatar from './ConversationAvatar'

export default function MessageList(props) {
  const displayName = props.conversation.getDisplayName()

  return (
    <div className="message-list">
      <Box>
        <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
          <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
        </Box>
        <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
          <Typography variant="h6">{displayName}</Typography>
          <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
        </Box>
      </Box>
      <Divider orientation="horizontal" />
      {props.messages.map((message, index) =>
        <Message key={index} username={message.senderId} text={message.text} />
      )}
    </div>
  )
}