Ready to display user information page

src/helpers/ComunicUsersHelper.ts

@@ -14,6 +14,27 @@ export interface SearchResult {
 	account_image: string;
 }
 
+export interface ComunicUser {
+	id: number;
+	first_name: string;
+	last_name: string;
+	email: string;
+	account_creation_time: number;
+	last_activity: number;
+	page_visibilty: "private" | "public" | "open";
+	directory?: string;
+	account_image: string;
+	friend_list_public: string;
+	is_email_public: boolean;
+	personal_website?: string;
+	public_note?: string;
+	location?: string;
+	block_commments: boolean;
+	allow_posts_from_friends: boolean;
+	allow_mails: boolean;
+	lang: string;
+}
+
 export class ComunicUsersHelper {
 	/**
 	 * Search for Comunic users
@@ -30,4 +51,13 @@ export class ComunicUsersHelper {
 			email: email,
 		});
 	}
+
+	/**
+	 * Get information about a single user
+	 */
+	static async GetSingle(id: number): Promise<ComunicUser> {
+		return await serverRequest("users/info", {
+			user_id: id,
+		});
+	}
 }

src/ui/routes/ComunicUserRoute.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+	ComunicUser,
+	ComunicUsersHelper,
+} from "../../helpers/ComunicUsersHelper";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+
+/**
+ * Comunic user management route
+ *
+ * @author Pierre Hubert
+ */
+export class ComunicUserRoute extends React.Component<
+	{ userID: number },
+	{ user: ComunicUser }
+> {
+	constructor(p: any) {
+		super(p);
+
+		this.load = this.load.bind(this);
+		this.build = this.build.bind(this);
+	}
+
+	async load() {
+		const user = await ComunicUsersHelper.GetSingle(this.props.userID);
+
+		this.setState({ user: user });
+	}
+
+	build() {
+		return <p>Go for {this.state.user.first_name}</p>;
+	}
+
+	render() {
+		return (
+			<AsyncWidget
+				key={this.props.userID}
+				load={this.load}
+				errorMessage="Failed to load user information!"
+				onBuild={this.build}
+			/>
+		);
+	}
+}

src/ui/routes/MainRoute.tsx

@@ -27,12 +27,14 @@ import {
 	Route,
 	Switch,
 	useHistory,
+	useParams,
 	useRouteMatch,
 } from "react-router-dom";
 import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper";
 import { AccountLogsRoute } from "./AccountLogsRoute";
 import { AccountSettingsRoute } from "./AccountSettingsRoute";
 import { AccountsListRoute } from "./AccountsListRoute";
+import { ComunicUserRoute } from "./ComunicUserRoute";
 import { HomeRoute } from "./HomeRoute";
 import { NotFoundRoute } from "./NotFoundRoute";
 import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute";
@@ -221,6 +223,10 @@ export function MainRoute() {
 									<SearchComunicUsersRoute />
 								</Route>
 
+								<Route path="/user/:id">
+									<ComunicUserRouteProxy />
+								</Route>
+
 								<Route exact path="/accounts">
 									<AccountsListRoute />
 								</Route>
@@ -244,3 +250,9 @@ export function MainRoute() {
 		</Router>
 	);
 }
+
+function ComunicUserRouteProxy() {
+	let { id } = useParams<{ id: string }>();
+
+	return <ComunicUserRoute userID={Number(id)} />;
+}

src/ui/routes/SearchComunicUsersRoute.tsx

@@ -4,10 +4,19 @@
  * @author Pierre Hubert
  */
 
-import { Avatar, Grid, Paper, TextField, Typography } from "@material-ui/core";
+import {
+	Avatar,
+	Grid,
+	ListItem,
+	Paper,
+	TextField,
+	Typography,
+} from "@material-ui/core";
 import React from "react";
+import { useHistory } from "react-router-dom";
 import {
 	ComunicUsersHelper,
+	SearchResult,
 	SearchResult as UserSearchResult,
 } from "../../helpers/ComunicUsersHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
@@ -117,25 +126,36 @@ export class SearchComunicUsersRoute extends React.Component<
 		return (
 			<Paper style={paperStyle}>
 				{this.state.results.map((result) => {
-					return (
-						<Grid container wrap="nowrap" spacing={2}>
-							<Grid item>
-								<Avatar src={result.account_image}>
-									{result.first_name.substring(0, 1)}
-								</Avatar>
-							</Grid>
-							<Grid item xs>
-								<Typography>
-									{result.first_name} {result.last_name}
-								</Typography>
-								<Typography color="textSecondary">
-									<i>{result.email}</i>
-								</Typography>
-							</Grid>
-						</Grid>
-					);
+					return <ResultItem key={result.id} user={result} />;
 				})}
 			</Paper>
 		);
 	}
 }
+
+function ResultItem(p: { user: SearchResult }) {
+	const history = useHistory();
+	const openButton = () => {
+		history.push("/user/" + p.user.id);
+	};
+
+	return (
+		<ListItem button onClick={openButton}>
+			<Grid container wrap="nowrap" spacing={2}>
+				<Grid item>
+					<Avatar src={p.user.account_image}>
+						{p.user.first_name.substring(0, 1)}
+					</Avatar>
+				</Grid>
+				<Grid item xs>
+					<Typography>
+						{p.user.first_name} {p.user.last_name}
+					</Typography>
+					<Typography color="textSecondary">
+						<i>{p.user.email}</i>
+					</Typography>
+				</Grid>
+			</Grid>
+		</ListItem>
+	);
+}