conversation list: cleanup, use React Hooks
Change-Id: I87511e5acf67e4a9a0edcf75bae1ef1ae3252046
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 48bfb28..d856c17 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,32 +1,26 @@
import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import Paper from '@material-ui/core/Paper'
import React from 'react'
import Message from './Message'
+import PersonIcon from '@material-ui/icons/PersonRounded'
-class MessageList extends React.Component {
- render() {
- return (
- <div className="message-list">
- <Box>
- <Box style={{display:'inline-block', margin: 16, verticalAlign:'middle'}}>
- <Avatar>{this.props.conversation.getDisplayName()[0].toUpperCase()}</Avatar>
+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' }}>
+ <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
</Box>
- <Box style={{display:'inline-block', verticalAlign:'middle'}}>
- <Typography variant="h5">{this.props.conversation.getDisplayName()}</Typography>
- <Typography variant="subtitle1">{this.props.conversation.getId()}</Typography>
- </Box>
- </Box>
- <Divider orientation="horizontal" />
- {
- this.props.messages.map((message, index) => {
- /*DUMMY_DATA.map((message, index) => {*/
- return (
- <Message key={index} username={message.senderId} text={message.text} />
- )
- })}
- </div>
- )
- }
-}
-
-export default MessageList
\ No newline at end of file
+ <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+ <Typography variant="h5">{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>
+ )
+}
\ No newline at end of file