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