Can search for Comunic users

src/helpers/ComunicUsersHelper.ts

@@ -0,0 +1,33 @@
+/**
+ * Comunic users management
+ *
+ * @author Pierre Hubert
+ */
+
+import { serverRequest } from "./APIHelper";
+
+export interface SearchResult {
+	id: number;
+	first_name: string;
+	last_name: string;
+	email: string;
+	account_image: string;
+}
+
+export class ComunicUsersHelper {
+	/**
+	 * Search for Comunic users
+	 *
+	 * @param name The name of the user to search
+	 * @param email The email address of the user to search
+	 */
+	static async SearchUser(
+		name: string,
+		email: string
+	): Promise<SearchResult[]> {
+		return await serverRequest("users/search", {
+			name: name,
+			email: email,
+		});
+	}
+}

src/ui/routes/SearchComunicUsersRoute.tsx

@@ -4,39 +4,36 @@
  * @author Pierre Hubert
  */
 
-import { Grid, Paper, TextField } from "@material-ui/core";
+import { Avatar, Grid, Paper, TextField, Typography } from "@material-ui/core";
 import React from "react";
+import {
+	ComunicUsersHelper,
+	SearchResult as UserSearchResult,
+} from "../../helpers/ComunicUsersHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { PageTitle } from "../widgets/PageTitle";
 
 export class SearchComunicUsersRoute extends React.Component<
 	{},
-	{ firstName: string; lastName: string; email: string }
+	{ name: string; email: string; results: UserSearchResult[] }
 > {
 	constructor(p: any) {
 		super(p);
 		this.state = {
-			firstName: "",
+			name: "",
-			lastName: "",
 			email: "",
+			results: [],
 		};
 
-		this.updateFirstName = this.updateFirstName.bind(this);
+		this.updateName = this.updateName.bind(this);
-		this.updateLastName = this.updateLastName.bind(this);
 		this.updateEmailAddress = this.updateEmailAddress.bind(this);
 		this.performSearch = this.performSearch.bind(this);
 		this.buildResults = this.buildResults.bind(this);
 	}
 
-	updateFirstName(e: React.ChangeEvent<HTMLInputElement>) {
+	updateName(e: React.ChangeEvent<HTMLInputElement>) {
 		this.setState({
-			firstName: e.target.value,
+			name: e.target.value,
-		});
-	}
-
-	updateLastName(e: React.ChangeEvent<HTMLInputElement>) {
-		this.setState({
-			lastName: e.target.value,
 		});
 	}
 
@@ -47,24 +44,24 @@ export class SearchComunicUsersRoute extends React.Component<
 	}
 
 	get canPerformSearch(): boolean {
-		return (
+		return this.state.name.length > 2 || this.state.email.length > 4;
-			this.state.firstName.length > 2 ||
-			this.state.lastName.length > 2 ||
-			this.state.email.length > 4
-		);
 	}
 
 	get searchKey(): string {
-		return (
+		return this.state.name + "##" + this.state.email;
-			this.state.firstName +
-			"##" +
-			this.state.lastName +
-			"##" +
-			this.state.email
-		);
 	}
 
-	async performSearch() {}
+	async performSearch() {
+		const key = this.searchKey;
+		const results = await ComunicUsersHelper.SearchUser(
+			this.state.name,
+			this.state.email
+		);
+
+		if (key !== this.searchKey) return;
+
+		this.setState({ results: results });
+	}
 
 	render() {
 		return (
@@ -73,20 +70,12 @@ export class SearchComunicUsersRoute extends React.Component<
 
 				{/* Filter users */}
 				<Grid container spacing={3}>
-					<Grid item xs={3}>
+					<Grid item xs={6}>
 						<TextField
-							label="First name"
+							label="Name"
 							style={{ width: "100%" }}
-							value={this.state.firstName}
+							value={this.state.name}
-							onChange={this.updateFirstName}
+							onChange={this.updateName}
-						/>
-					</Grid>
-					<Grid item xs={3}>
-						<TextField
-							label="Last name"
-							style={{ width: "100%" }}
-							value={this.state.lastName}
-							onChange={this.updateLastName}
 						/>
 					</Grid>
 					<Grid item xs={6}>
@@ -116,6 +105,37 @@ export class SearchComunicUsersRoute extends React.Component<
 	}
 
 	buildResults() {
-		return <p>Results!!! {this.searchKey}</p>;
+		const paperStyle = { padding: "10px", marginTop: "10px" };
+
+		if (this.state.results.length === 0)
+			return (
+				<Paper style={paperStyle}>
+					There is no result for your search.
+				</Paper>
+			);
+
+		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>
+					);
+				})}
+			</Paper>
+		);
 	}
 }