use ESM, add server setup, cleanup
Change-Id: Iafac35c2082523ae98c31017d9bad5c4d6e18ef3
diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
index 6f38c3c..38f1291 100644
--- a/client/src/components/AccountList.js
+++ b/client/src/components/AccountList.js
@@ -1,29 +1,19 @@
-import React from 'react';
+import React from 'react'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import Avatar from '@material-ui/core/Avatar';
-import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
-
-class AccountList extends React.Component {
- render() {
- return (
- <List>
- {
- this.props.accounts.map(account => <ListItem button key={account.getId()} onClick={() => this.props.onClick(account)}>
- <ListItemAvatar>
- <Avatar>
- <PersonRoundedIcon />
- </Avatar>
- </ListItemAvatar>
- <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
- </ListItem>
- )
- }
- </List>)
- }
+export default function AccountList(props) {
+ return <List>
+ {
+ props.accounts.map(account => {
+ const displayName = account.getDisplayNameNoFallback()
+ return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
+ <ListItemAvatar>
+ <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+ </ListItemAvatar>
+ <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
+ </ListItem>
+ })
+ }
+ </List>
}
-
-export default AccountList;
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 7e13974..a769168 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -2,7 +2,7 @@
import React from 'react'
import Conversation from '../../../model/Conversation'
import { useHistory, useParams } from "react-router-dom"
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import { PersonRounded } from '@material-ui/icons'
export default function ConversationListItem(props) {
const { conversationId, contactId } = useParams()
@@ -22,7 +22,7 @@
style={{overflow:'hidden'}}
onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
<ListItemAvatar>
- <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+ <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
</ListItemAvatar>
<ListItemText
style={{overflow:'hidden', textOverflow:'ellipsis'}}
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index d245976..c0408a1 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -32,7 +32,7 @@
<Menu
id="simple-menu"
anchorEl={anchorEl}
- keepMounted
+
open={Boolean(anchorEl)}
onClose={handleClose}
>
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index d856c17..4841ea1 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,7 +1,7 @@
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import React from 'react'
import Message from './Message'
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import React from 'react'
+import { Avatar, Box, Divider, Typography } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons'
export default function MessageList(props) {
const displayName = props.conversation.getDisplayName()
@@ -10,7 +10,7 @@
<div className="message-list">
<Box>
<Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
- <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+ <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
</Box>
<Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Typography variant="h5">{displayName}</Typography>
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index c98c9b4..5636be2 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,7 +1,6 @@
import React from 'react'
-import SearchIcon from '@material-ui/icons/Search';
-import InputBase from '@material-ui/core/InputBase';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import { InputBase, InputAdornment } from '@material-ui/core';
+import { SearchRounded } from '@material-ui/icons';
class NewContactForm extends React.Component {
constructor(props) {
@@ -40,11 +39,8 @@
type="search"
placeholder="Ajouter un contact"
onChange={this.handleChange}
- startAdornment={
- <InputAdornment position="start">
- <SearchIcon />
- </InputAdornment>
- } />
+ startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>}
+ />
</form>
)
}
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 6269e3b..48770ba 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,8 +1,7 @@
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import SendIcon from '@material-ui/icons/Send'
-import EmojiIcon from '@material-ui/icons/EmojiEmotionsRounded'
+import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
import EmojiPicker from 'emoji-picker-react'
const useStyles = makeStyles((theme) => ({
@@ -58,7 +57,7 @@
className="send-message-card"
className={classes.root}>
<IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
- <EmojiIcon />
+ <EmojiEmotionsRounded />
</IconButton>
<Popper
id={id}
@@ -66,7 +65,7 @@
anchorEl={anchorEl}
onClose={handleClose}
>
- <EmojiPicker
+ <EmojiPicker.default
onEmojiClick={onEmojiClick}
disableAutoFocus={true}
disableSkinTonePicker={true}
@@ -82,7 +81,7 @@
onChange={handleInputChange}
/>
<IconButton type="submit" className={classes.iconButton} aria-label="search">
- <SendIcon />
+ <Send />
</IconButton>
</Paper>
</div>