add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 2a4c99b..40c0750 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,64 +1,52 @@
-import React from 'react';
-import Header from '../components/Header'
-import authManager from '../AuthManager'
-import AccountList from '../components/AccountList';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import Container from '@material-ui/core/Container';
+import { Card, CardHeader, Container, CircularProgress } 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';
-class AccountSelection extends React.Component {
+const AccountSelection = (props) => {
+ const [state, setState] = useState({
+ loaded: false,
+ error: false,
+ accounts: []
+ })
- constructor(props) {
- super(props)
- this.controller = new AbortController()
- this.state = {
- loaded: false,
- error: false,
- accounts: []
- }
- }
-
- componentDidMount() {
- if (!this.state.loaded) {
- authManager.fetch('/api/accounts', {signal: this.controller.signal})
- .then(res => res.json())
- .then(result => {
- console.log(result)
- this.setState({
- loaded: true,
- accounts: result.map(account => Account.from(account)),
- })
- }, error => {
- console.log(`get error ${error}`)
- this.setState({
- loaded: true,
- error: true
- })
+ useEffect(() => {
+ const controller = new AbortController()
+ authManager.fetch(`/api/accounts`, {signal: controller.signal})
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ setState({
+ loaded: true,
+ accounts: result.map(account => Account.from(account)),
})
- }
- }
- componentWillUnmount() {
- this.controller.abort()
- }
+ }, error => {
+ console.log(`get error ${error}`)
+ setState({
+ loaded: true,
+ error: true
+ })
+ })
+ return () => controller.abort()
+ }, [])
- render() {
- if (!this.state.loaded)
- return <Container><CircularProgress /></Container>
- return (
- <div className="app" style={{marginBottom:32}} >
- <Header />
- <Container>
- <Card style={{marginTop:32, marginBottom:32}}>
- <CardHeader title="Choose an account" />
- <AccountList accounts={this.state.accounts} onClick={account => this.props.history.push(`/account/${account.getId()}`)} />
- </Card>
- </Container>
- </div>
- )
- }
+ if (!state.loaded)
+ return <LoadingPage />
+ return (
+ <React.Fragment>
+ <Header />
+ <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`)} />
+ </Card>
+ </Container>
+ </React.Fragment>
+ )
}
export default withRouter(AccountSelection);
\ No newline at end of file