commit 88a5244dd8c00696e136a52961bdd5303fceb116
author Adrien Béraud <adrien.beraud@savoirfairelinux.com> Mon Apr 26 12:11:41 2021 -0400
committer Adrien Béraud <adrien.beraud@savoirfairelinux.com> Mon Apr 26 15:35:21 2021 -0400
tree d007428c2887877f01189070b6aa43bab68f8cb9
parent 8698603cce29cfd7bef69a2acfebc91e56d15615

add account creation wizard

Change-Id: I27f1fd0c53eb83df0c7bd1de06ba791c3b25962b

client/src/pages/accountSelection.jsx

diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 40c0750..0cd9e29 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { Card, CardHeader, Container, CircularProgress } from '@material-ui/core';
+import { Avatar, Card, CardHeader, Container, List } from '@material-ui/core';
 import Header from '../components/Header'
-import AccountList from '../components/AccountList';
 import authManager from '../AuthManager'
 import Account from '../../../model/Account';
 import LoadingPage from '../components/loading';
+import ListItemLink from '../components/ListItemLink';
+import ConversationAvatar from '../components/ConversationAvatar';
+import { AddRounded } from '@material-ui/icons';
 
 const AccountSelection = (props) => {
   const [state, setState] = useState({
@@ -30,7 +31,7 @@
           loaded: true,
           error: true
         })
-      })
+      }).catch(e => console.log(e))
     return () => controller.abort()
   }, [])
 
@@ -42,11 +43,21 @@
       <Container maxWidth="sm" style={{paddingBottom:32}}>
         <Card style={{marginTop:32, marginBottom:32}}>
           <CardHeader title="Choose an account" />
-          <AccountList accounts={state.accounts} onClick={account => props.history.push(`/account/${account.getId()}/settings`)} />
+          <List>
+            {state.accounts.map(account => <ListItemLink key={account.getId()}
+              icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+              to={`/account/${account.getId()}/settings`}
+              primary={account.getDisplayName()}
+              secondary={account.getDisplayUri()} />)}
+            <ListItemLink
+              icon={<Avatar><AddRounded /></Avatar>}
+              to='/newAccount'
+              primary="Create new account" />
+          </List>
         </Card>
       </Container>
     </React.Fragment>
   )
 }
 
-export default withRouter(AccountSelection);
\ No newline at end of file
+export default AccountSelection
\ No newline at end of file