comunicconsole/src/ui/routes/AccountSettingsRoute.tsx

/**
 * Account settings route
 *
 * @author Pierre Hubert
 */

import {
	Button,
	Divider,
	Grid,
	Paper,
	TextField,
	Typography,
} from "@material-ui/core";
import React from "react";
import { useParams } from "react-router-dom";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { matAlert, snackbar } from "../widgets/DialogsProvider";

export function AccountSettingsRoute() {
	let params: any = useParams();

	return <AccountSettingsRouteInner id={Number(params.id)} />;
}

interface SettingsRouteProps {
	id: number;
}

interface SettingsRouteState {
	account: AdminAccount;
}

class AccountSettingsRouteInner extends React.Component<
	SettingsRouteProps,
	SettingsRouteState
> {
	constructor(props: any) {
		super(props);

		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 (
			<AsyncWidget
				key={this.props.id}
				errorMessage="Failed to load admin information!"
				onBuild={this.build}
				load={this.load}
			></AsyncWidget>
		);
	}

	build() {
		return (
			<Grid container spacing={2}>
				<GeneralSettings admin={this.state.account}></GeneralSettings>
			</Grid>
		);
	}
}

class GeneralSettings extends React.Component<
	{ admin: AdminAccount },
	{ newName: string; newEmail: string }
> {
	constructor(p: any) {
		super(p);

		this.state = {
			newName: this.props.admin.name,
			newEmail: this.props.admin.email,
		};

		this.changedName = this.changedName.bind(this);
		this.changedEmail = this.changedEmail.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
	}

	changedName(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({ newName: e.target.value });
	}

	changedEmail(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({ newEmail: e.target.value });
	}

	get isValid(): boolean {
		return this.state.newEmail.length > 2 && this.state.newName.length > 2;
	}

	async handleSubmit() {
		try {
			if (!this.isValid) return;

			await AccountHelper.UpdateGeneralSettings({
				id: this.props.admin.id,
				name: this.state.newName,
				email: this.state.newEmail,
			});

			snackbar("Successfully updated admin settings!");
		} catch (e) {
			console.error(e);
			matAlert("Failed to update admin settings!");
		}
	}

	render() {
		return (
			<SettingsSection title="General settings">
				<TextField
					required
					label="Name"
					value={this.state.newName}
					onChange={this.changedName}
					style={{ width: "100%", paddingBottom: "20px" }}
				/>

				<TextField
					required
					label="Email"
					value={this.state.newEmail}
					onChange={this.changedEmail}
					type="mail"
					style={{ width: "100%", paddingBottom: "20px" }}
				/>

				<Button
					style={{ alignSelf: "end", marginRight: "10px" }}
					disabled={!this.isValid}
					onClick={this.handleSubmit}
				>
					Update
				</Button>
			</SettingsSection>
		);
	}
}

function SettingsSection(p: { title: string; children?: React.ReactNode }) {
	return (
		<Grid item xs={6} spacing={2}>
			<Paper>
				<Typography variant="h5" style={{ padding: "10px 10px " }}>
					General settings
				</Typography>
				<Divider />
				<div
					style={{
						padding: "10px 10px",
						display: "flex",
						flexDirection: "column",
					}}
				>
					{p.children}
				</div>
			</Paper>
		</Grid>
	);
}