Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 1 | import React, { useEffect, useState } from 'react'; |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 2 | import { withRouter } from 'react-router-dom'; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 3 | import { Card, CardHeader, Container, CircularProgress } from '@material-ui/core'; |
| 4 | import Header from '../components/Header' |
| 5 | import AccountList from '../components/AccountList'; |
| 6 | import authManager from '../AuthManager' |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 7 | import Account from '../../../model/Account'; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 8 | import LoadingPage from '../components/loading'; |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 9 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 10 | const AccountSelection = (props) => { |
| 11 | const [state, setState] = useState({ |
| 12 | loaded: false, |
| 13 | error: false, |
| 14 | accounts: [] |
| 15 | }) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 16 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 17 | useEffect(() => { |
| 18 | const controller = new AbortController() |
| 19 | authManager.fetch(`/api/accounts`, {signal: controller.signal}) |
| 20 | .then(res => res.json()) |
| 21 | .then(result => { |
| 22 | console.log(result) |
| 23 | setState({ |
| 24 | loaded: true, |
| 25 | accounts: result.map(account => Account.from(account)), |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 26 | }) |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 27 | }, error => { |
| 28 | console.log(`get error ${error}`) |
| 29 | setState({ |
| 30 | loaded: true, |
| 31 | error: true |
| 32 | }) |
| 33 | }) |
| 34 | return () => controller.abort() |
| 35 | }, []) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 36 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame^] | 37 | if (!state.loaded) |
| 38 | return <LoadingPage /> |
| 39 | return ( |
| 40 | <React.Fragment> |
| 41 | <Header /> |
| 42 | <Container maxWidth="sm" style={{paddingBottom:32}}> |
| 43 | <Card style={{marginTop:32, marginBottom:32}}> |
| 44 | <CardHeader title="Choose an account" /> |
| 45 | <AccountList accounts={state.accounts} onClick={account => props.history.push(`/account/${account.getId()}/settings`)} /> |
| 46 | </Card> |
| 47 | </Container> |
| 48 | </React.Fragment> |
| 49 | ) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 50 | } |
| 51 | |
| 52 | export default withRouter(AccountSelection); |