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

@@ -11,71 +11,83 @@ import { CenterCircularProgress } from "./CenterCircularProgress";
 enum Status {
 	LOADING,
 	ERROR,
-    SUCCESS
+	SUCCESS,
 }
 
 export interface AsyncWidgetProperties {
-    load: () => Promise<void>,
+	key?: number;
-    errorMessage: string,
+	load: () => Promise<void>;
-    onBuild: () => ReactNode
+	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);
 
 		this.state = {
-            status: Status.LOADING
+			status: Status.LOADING,
-        }
+			key: this.props.key,
+		};
 
 		this.reload = this.reload.bind(this);
 	}
 
 	async reload() {
 		try {
-            this.setState({status: Status.LOADING});
+			this.setState({ status: Status.LOADING });
 
 			await this.props.load();
 
-            this.setState({status: Status.SUCCESS});
+			this.setState({ status: Status.SUCCESS });
-        } catch(e) {
+		} catch (e) {
 			console.error(e);
-            this.setState({status: Status.ERROR});
+			this.setState({ status: Status.ERROR });
 		}
 	}
 
 	componentDidMount() {
-        this.reload()
+		this.reload();
+	}
+
+	componentDidUpdate() {
+		if (this.state.key != this.props.key) {
+			this.setState({ key: this.props.key });
+			this.reload();
+		}
 	}
 
 	render() {
-
 		if (this.state.status === Status.ERROR)
-            return (<div style={{
+			return (
+				<div
+					style={{
 						display: "flex",
 						alignItems: "center",
 						justifyContent: "center",
 						height: "100%",
-            }}>
+					}}
+				>
 					<Paper>
-                    <div style={{padding: "5px 10px"}}>
+						<div style={{ padding: "5px 10px" }}>
 							{this.props.errorMessage}
-                        
 							&nbsp;
-                        
 							<Button onClick={this.reload}>Try again</Button>
 						</div>
 					</Paper>
-            </div>);
+				</div>
+			);
 
-        if(this.state.status === Status.SUCCESS)
+		if (this.state.status === Status.SUCCESS) return this.props.onBuild();
-            return this.props.onBuild();
 
-        return (<CenterCircularProgress></CenterCircularProgress>)
+		return <CenterCircularProgress></CenterCircularProgress>;
 	}
 }