add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 12fa43a..79ab388 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,45 +1,32 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import { useParams } from 'react-router';
+import { Container, CircularProgress } from '@material-ui/core';
import Header from '../components/Header'
import AccountPreferences from '../components/AccountPreferences'
-import Container from '@material-ui/core/Container';
-import CircularProgress from '@material-ui/core/CircularProgress';
import authManager from '../AuthManager'
import Account from '../../../model/Account'
-class AccountSettings extends React.Component {
+const AccountSettings = (props) => {
+ const accountId = props.accountId || useParams().accountId
+ const [state, setState] = useState({ loaded: false })
- constructor(props) {
- super(props)
- this.accountId = props.accountId || props.match.params.accountId
- this.state = { loaded: false, account: props.account }
- this.req = undefined
- }
+ useEffect(() => {
+ const controller = new AbortController()
+ authManager.fetch(`/api/accounts/${accountId}`, {signal: controller.signal})
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ setState({loaded: true, account: Account.from(result)})
+ })
+ return () => controller.abort()
+ }, [])
- componentDidMount() {
- this.controller = new AbortController()
- if (this.req === undefined) {
- this.req = authManager.fetch(`/api/accounts/${this.accountId}`, {signal: this.controller.signal})
- .then(res => res.json())
- .then(result => {
- console.log(result)
- this.setState({loaded: true, account: Account.from(result)})
- })
- }
- }
-
- componentWillUnmount() {
- this.controller.abort()
- this.req = undefined
- }
-
- render() {
- return (
- <Container maxWidth="sm" className="app" >
- <Header />
- {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
- </Container>
- )
- }
+ return (
+ <Container maxWidth="sm">
+ <Header />
+ {state.loaded ? <AccountPreferences account={state.account} /> : <CircularProgress />}
+ </Container>
+ )
}
export default AccountSettings;
\ No newline at end of file