Start to display user information

src/helpers/ComunicUsersHelper.ts

@@ -11,7 +11,7 @@ export interface SearchResult {
 	first_name: string;
 	last_name: string;
 	email: string;
-	account_image: string;
+	account_image?: string;
 }
 
 export interface ComunicUser {
@@ -21,15 +21,16 @@ export interface ComunicUser {
 	email: string;
 	account_creation_time: number;
 	last_activity: number;
-	page_visibilty: "private" | "public" | "open";
+	page_visibility: "private" | "public" | "open";
 	directory?: string;
-	account_image: string;
+	account_image?: string;
-	friend_list_public: string;
+	account_image_visibility: "friends" | "public" | "open";
+	friend_list_public: boolean;
 	is_email_public: boolean;
 	personal_website?: string;
 	public_note?: string;
 	location?: string;
-	block_commments: boolean;
+	block_comments: boolean;
 	allow_posts_from_friends: boolean;
 	allow_mails: boolean;
 	lang: string;

src/ui/accountSettings/SettingsSection.tsx

@@ -1,5 +1,6 @@
-import { Grid, Paper, Typography, Divider } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import React from "react";
+import { CustomCard } from "../widgets/CustomCard";
 
 export function SettingsSection(p: {
 	title: string;
@@ -7,20 +8,7 @@ export function SettingsSection(p: {
 }) {
 	return (
 		<Grid item sm={6}>
-			<Paper>
+			<CustomCard title={p.title}>{p.children}</CustomCard>
-				<Typography variant="h6" style={{ padding: "10px 15px " }}>
-					{p.title}
-				</Typography>
-				<Divider />
-				<div
-					style={{
-						display: "flex",
-						flexDirection: "column",
-					}}
-				>
-					{p.children}
-				</div>
-			</Paper>
 		</Grid>
 	);
 }

src/ui/routes/ComunicUserRoute.tsx

@@ -1,9 +1,27 @@
+import {
+	Avatar,
+	Grid,
+	Table,
+	TableBody,
+	TableCell,
+	TableRow,
+} from "@material-ui/core";
 import React from "react";
 import {
 	ComunicUser,
 	ComunicUsersHelper,
 } from "../../helpers/ComunicUsersHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { CustomCard } from "../widgets/CustomCard";
+import { PageTitle } from "../widgets/PageTitle";
+import { TimestampWidget } from "../widgets/TimestampWidget";
+
+interface UserProperty {
+	name: string;
+	value?: string | number;
+	bool?: boolean;
+	child?: React.ReactElement;
+}
 
 /**
  * Comunic user management route
@@ -21,14 +39,111 @@ export class ComunicUserRoute extends React.Component<
 		this.build = this.build.bind(this);
 	}
 
+	get user(): ComunicUser {
+		return this.state.user;
+	}
+
 	async load() {
 		const user = await ComunicUsersHelper.GetSingle(this.props.userID);
 
 		this.setState({ user: user });
 	}
 
+	get userProperties(): UserProperty[] {
+		return [
+			{ name: "Account ID", value: this.user.id },
+			{ name: "First name", value: this.user.first_name },
+			{ name: "Last name", value: this.user.last_name },
+			{ name: "Email address", value: this.user.email },
+			{
+				name: "Account creation time",
+				child: (
+					<TimestampWidget time={this.user.account_creation_time} />
+				),
+			},
+			{ name: "Page visibility", value: this.user.page_visibility },
+			{
+				name: "Virtual directory",
+				value: this.user.directory ? "@" + this.user.directory : "None",
+			},
+			{
+				name: "Account image",
+				child: <Avatar src={this.user.account_image} />,
+			},
+			{
+				name: "Account image visibility",
+				value: this.user.account_image_visibility,
+			},
+			{
+				name: "Is friend list public",
+				bool: this.user.friend_list_public,
+			},
+			{
+				name: "Is email address public",
+				bool: this.user.is_email_public,
+			},
+			{
+				name: "Personal website",
+				value: this.user.personal_website,
+			},
+			{
+				name: "Public note",
+				value: this.user.public_note,
+			},
+			{ name: "Location", value: this.user.location },
+			{ name: "Block comments", bool: this.user.block_comments },
+			{
+				name: "Allow posts from friends",
+				bool: this.user.allow_posts_from_friends,
+			},
+			{ name: "Allow emails", bool: this.user.allow_mails },
+			{ name: "Language", value: this.user.lang },
+		];
+	}
+
 	build() {
-		return <p>Go for {this.state.user.first_name}</p>;
+		return (
+			<>
+				<PageTitle
+					name={this.user.first_name + " " + this.user.last_name}
+				/>
+
+				<Grid container spacing={3}>
+					<Grid item xs={6}>
+						<CustomCard title="General information">
+							<Table>
+								<TableBody>
+									{this.userProperties.map((p) => {
+										return (
+											<TableRow key={p.name}>
+												<TableCell
+													style={{
+														fontWeight: "bold",
+													}}
+												>
+													{p.name}
+												</TableCell>
+												<TableCell>
+													{p.child != null
+														? p.child
+														: p.bool != null
+														? p.bool
+															? "Yes"
+															: "No"
+														: p.value == null
+														? "Undefined"
+														: p.value}
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</TableBody>
+							</Table>
+						</CustomCard>
+					</Grid>
+				</Grid>
+			</>
+		);
 	}
 
 	render() {

src/ui/widgets/CustomCard.tsx

@@ -0,0 +1,21 @@
+import { Divider, Paper, Typography } from "@material-ui/core";
+import React from "react";
+
+export function CustomCard(p: { title: string; children?: React.ReactNode }) {
+	return (
+		<Paper>
+			<Typography variant="h6" style={{ padding: "10px 15px " }}>
+				{p.title}
+			</Typography>
+			<Divider />
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+				}}
+			>
+				{p.children}
+			</div>
+		</Paper>
+	);
+}