Ready to create account settings route

src/helpers/AccountHelper.ts

@@ -65,6 +65,17 @@ export class AccountHelper {
 		sessionStorage.setItem(SESSION_STORAGE_TOKEN, res.token);
 	}
 
+	/**
+	 * Get information about an administrator
+	 *
+	 * @param id The ID of the target administrator
+	 */
+	static async getAdminInfo(id: number): Promise<AdminAccount> {
+		return await serverRequest("accounts/info", {
+			id: id,
+		});
+	}
+
 	/**
 	 * Attempt to refresh current account information
 	 */

src/ui/routes/AccountSettingsRoute.tsx

@@ -0,0 +1,35 @@
+/**
+ * Account settings route
+ *
+ * @author Pierre Hubert
+ */
+
+import React from "react";
+import { useParams } from "react-router-dom";
+
+export function AccountSettingsRoute() {
+	let params: any = useParams();
+
+	return <AccountSettingsRouteInner id={Number(params.id)} />;
+}
+
+interface SettingsRouteProps {
+	id: number;
+}
+
+interface SettingsRouteState {}
+
+class AccountSettingsRouteInner extends React.Component<
+	SettingsRouteProps,
+	SettingsRouteState
+> {
+	constructor(props: any) {
+		super(props);
+
+		this.state = {};
+	}
+
+	render() {
+		return <div>"hello {this.props.id}</div>;
+	}
+}

src/ui/routes/HomeRoute.tsx

@@ -1,3 +1,3 @@
 export function HomeRoute() {
-	return <p style={{ color: "white" }}>Welcome to Comunic Console!</p>;
+	return <p style={{ color: "white" }}>Welcome to the Comunic Console!</p>;
 }

src/ui/routes/MainRoute.tsx

@@ -6,8 +6,6 @@
 
 import {
 	AppBar,
-	Badge,
-	Divider,
 	IconButton,
 	List,
 	ListItem,
@@ -18,16 +16,19 @@ import {
 	Toolbar,
 	Typography,
 } from "@material-ui/core";
-import DraftsIcon from "@material-ui/icons/Drafts";
-import InboxIcon from "@material-ui/icons/Inbox";
-import NotificationsIcon from "@material-ui/icons/Notifications";
-import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { AccountHelper } from "../../helpers/AccountHelper";
-import CloseSharpIcon from "@material-ui/icons/CloseSharp";
-import { NotFoundRoute } from "./NotFoundRoute";
-import { HomeRoute } from "./HomeRoute";
 import { Home, Person } from "@material-ui/icons";
+import CloseSharpIcon from "@material-ui/icons/CloseSharp";
+import React from "react";
+import {
+	BrowserRouter as Router,
+	Route,
+	Switch,
+	useHistory,
+} from "react-router-dom";
+import { AccountHelper } from "../../helpers/AccountHelper";
+import { AccountSettingsRoute } from "./AccountSettingsRoute";
+import { HomeRoute } from "./HomeRoute";
+import { NotFoundRoute } from "./NotFoundRoute";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -79,18 +80,22 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function Menu() {
-	const classes = useStyles();
+	const history = useHistory();
+
+	const openHome = () => history.push("/");
+	const openMyAccount = () =>
+		history.push("/accounts/" + AccountHelper.currentAccount.id);
 
 	return (
 		<div>
 			<List component="nav" aria-label="main mailbox folders">
-				<ListItem button>
+				<ListItem button onClick={openHome}>
 					<ListItemIcon>
 						<Home />
 					</ListItemIcon>
 					<ListItemText primary="Home" />
 				</ListItem>
-				<ListItem button>
+				<ListItem button onClick={openMyAccount}>
 					<ListItemIcon>
 						<Person />
 					</ListItemIcon>
@@ -123,7 +128,7 @@ export function MainRoute() {
 						noWrap
 						className={classes.title}
 					>
-						Comunic Admin
+						Comunic Console
 					</Typography>
 
 					<Typography>
@@ -156,6 +161,10 @@ export function MainRoute() {
 							<HomeRoute></HomeRoute>
 						</Route>
 
+						<Route path="/accounts/:id">
+							<AccountSettingsRoute></AccountSettingsRoute>
+						</Route>
+
 						<Route path="*">
 							<NotFoundRoute></NotFoundRoute>
 						</Route>