Ready to present user settings

src/ui/routes/AccountSettingsRoute.tsx

@@ -6,6 +6,8 @@
 
 import React from "react";
 import { useParams } from "react-router-dom";
+import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 
 export function AccountSettingsRoute() {
 	let params: any = useParams();
@@ -17,7 +19,9 @@ interface SettingsRouteProps {
 	id: number;
 }
 
-interface SettingsRouteState {}
+interface SettingsRouteState {
+	account: AdminAccount;
+}
 
 class AccountSettingsRouteInner extends React.Component<
 	SettingsRouteProps,
@@ -26,10 +30,28 @@ class AccountSettingsRouteInner extends React.Component<
 	constructor(props: any) {
 		super(props);
 
-		this.state = {};
+		this.load = this.load.bind(this);
+		this.build = this.build.bind(this);
+	}
+
+	async load() {
+		const account = await AccountHelper.getAdminInfo(this.props.id);
+
+		this.setState({ account: account });
 	}
 
 	render() {
-		return <div>"hello {this.props.id}</div>;
+		return (
+			<AsyncWidget
+				key={this.props.id}
+				errorMessage="Failed to load admin information!"
+				onBuild={this.build}
+				load={this.load}
+			></AsyncWidget>
+		);
+	}
+
+	build() {
+		return <p>{this.state.account.email}</p>;
 	}
 }

src/ui/widgets/AsyncWidget.tsx

@@ -9,73 +9,85 @@ import React, { ReactNode } from "react";
 import { CenterCircularProgress } from "./CenterCircularProgress";
 
 enum Status {
-    LOADING,
-    ERROR,
-    SUCCESS
+	LOADING,
+	ERROR,
+	SUCCESS,
 }
 
 export interface AsyncWidgetProperties {
-    load: () => Promise<void>,
-    errorMessage: string,
-    onBuild: () => ReactNode
+	key?: number;
+	load: () => Promise<void>;
+	errorMessage: string;
+	onBuild: () => ReactNode;
 }
 
 interface AsyncWidgetState {
-    status: Status,
+	status: Status;
+	key?: number;
 }
 
-export class AsyncWidget extends React.Component<AsyncWidgetProperties, AsyncWidgetState> {
+export class AsyncWidget extends React.Component<
+	AsyncWidgetProperties,
+	AsyncWidgetState
+> {
+	constructor(props: any) {
+		super(props);
 
-    constructor(props: any) {
-        super(props);
+		this.state = {
+			status: Status.LOADING,
+			key: this.props.key,
+		};
 
-        this.state = {
-            status: Status.LOADING
-        }
+		this.reload = this.reload.bind(this);
+	}
 
-        this.reload = this.reload.bind(this);
-    }
+	async reload() {
+		try {
+			this.setState({ status: Status.LOADING });
 
-    async reload() {
-        try {
-            this.setState({status: Status.LOADING});
+			await this.props.load();
 
-            await this.props.load();
+			this.setState({ status: Status.SUCCESS });
+		} catch (e) {
+			console.error(e);
+			this.setState({ status: Status.ERROR });
+		}
+	}
 
-            this.setState({status: Status.SUCCESS});
-        } catch(e) {
-            console.error(e);
-            this.setState({status: Status.ERROR});
-        }
-    }
+	componentDidMount() {
+		this.reload();
+	}
 
-    componentDidMount() {
-        this.reload()
-    }
+	componentDidUpdate() {
+		if (this.state.key != this.props.key) {
+			this.setState({ key: this.props.key });
+			this.reload();
+		}
+	}
 
-    render() {
+	render() {
+		if (this.state.status === Status.ERROR)
+			return (
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						height: "100%",
+					}}
+				>
+					<Paper>
+						<div style={{ padding: "5px 10px" }}>
+							{this.props.errorMessage}
+							&nbsp;
+							<Button onClick={this.reload}>Try again</Button>
+						</div>
+					</Paper>
+				</div>
+			);
 
-        if (this.state.status === Status.ERROR)
-            return (<div style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                height: "100%",
-            }}>
-               <Paper>
-                    <div style={{padding: "5px 10px"}}>
-                        {this.props.errorMessage}
+		if (this.state.status === Status.SUCCESS) return this.props.onBuild();
 
-                        &nbsp;
-                        
-                        <Button onClick={this.reload}>Try again</Button>
-                    </div>
-               </Paper>
-            </div>);
-
-        if(this.state.status === Status.SUCCESS)
-            return this.props.onBuild();
-
-        return (<CenterCircularProgress></CenterCircularProgress>)
-    }
+		return <CenterCircularProgress></CenterCircularProgress>;
+	}
 }