conversation list: cleanup, use React Hooks
Change-Id: I87511e5acf67e4a9a0edcf75bae1ef1ae3252046
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index e83b6c1..b28a6d6 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -4,34 +4,28 @@
import ListSubheader from '@material-ui/core/ListSubheader';
import Conversation from '../../../model/Conversation';
import GroupRoundedIcon from '@material-ui/icons/GroupRounded';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
-class ConversationList extends React.Component {
- render() {
- console.log("ConversationList render " + this.props.accountId)
- console.log(this.props.conversations)
- return (
- <div className="rooms-list">
- <List>
- {this.props.search instanceof Conversation &&
- (<div>
- <ListSubheader>Public directory</ListSubheader>
- <ConversationListItem conversation={this.props.search} />
+export default function ConversationList(props) {
+ return (
+ <div className="rooms-list">
+ <List>
+ {props.search instanceof Conversation &&
+ (<div>
+ <ListSubheader>Public directory</ListSubheader>
+ <ConversationListItem conversation={props.search} />
<ListSubheader>Conversations</ListSubheader>
- </div>)}
- {this.props.conversations.map(conversation =>
- <ConversationListItem key={conversation.getId()} conversation={conversation} />
- )}
- {this.props.conversations.length === 0 && (
- <div className="list-placeholder">
- <GroupRoundedIcon color="disabled" fontSize="large" />
- <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
- </div>
- )}
- </List>
- </div>
- )
- }
+ </div>)}
+ {props.conversations.map(conversation =>
+ <ConversationListItem key={conversation.getId()} conversation={conversation} />
+ )}
+ {props.conversations.length === 0 && (
+ <div className="list-placeholder">
+ <GroupRoundedIcon color="disabled" fontSize="large" />
+ <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
+ </div>
+ )}
+ </List>
+ </div>
+ )
}
-
-export default ConversationList
\ No newline at end of file
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
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