conversation list: cleanup, use React Hooks
Change-Id: I87511e5acf67e4a9a0edcf75bae1ef1ae3252046
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index cc72c70..7e13974 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,34 +1,34 @@
import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
import React from 'react'
import Conversation from '../../../model/Conversation'
-import { withRouter } from 'react-router-dom';
+import { useHistory, useParams } from "react-router-dom"
+import PersonIcon from '@material-ui/icons/PersonRounded'
-class ConversationListItem extends React.Component {
- render() {
- const conversation = this.props.conversation;
- const pathId = this.props.match.params.conversationId || this.props.match.params.contactId
- const isSelected = conversation.getDisplayUri() === pathId
- console.log("ConversationListItem render " + conversation)
- console.log(this.props)
+export default function ConversationListItem(props) {
+ const { conversationId, contactId } = useParams()
+ const conversation = props.conversation
+ const pathId = conversationId || contactId
+ const isSelected = conversation.getDisplayUri() === pathId
+ const displayName = conversation.getDisplayName()
+ const history = useHistory()
- const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`;
- if (conversation instanceof Conversation) {
- return (
- <ListItem
- button
- alignItems="flex-start"
- selected={isSelected}
- style={{overflow:'hidden'}}
- onClick={() => this.props.history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
- <ListItemAvatar><Avatar>{conversation.getDisplayName()[0].toUpperCase()}</Avatar></ListItemAvatar>
- <ListItemText
- style={{overflow:'hidden', textOverflow:'ellipsis'}}
- primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
- </ListItem>
- )
- } else
- return null
- }
+ const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
+ if (conversation instanceof Conversation) {
+ return (
+ <ListItem
+ button
+ alignItems="flex-start"
+ selected={isSelected}
+ style={{overflow:'hidden'}}
+ onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
+ <ListItemAvatar>
+ <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+ </ListItemAvatar>
+ <ListItemText
+ style={{overflow:'hidden', textOverflow:'ellipsis'}}
+ primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
+ </ListItem>
+ )
+ } else
+ return null
}
-
-export default withRouter(ConversationListItem)
\ No newline at end of file