diff --git a/src/helpers/ComunicUsersHelper.ts b/src/helpers/ComunicUsersHelper.ts new file mode 100644 index 0000000..e5e3650 --- /dev/null +++ b/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 { + return await serverRequest("users/search", { + name: name, + email: email, + }); + } +} diff --git a/src/ui/routes/SearchComunicUsersRoute.tsx b/src/ui/routes/SearchComunicUsersRoute.tsx index 74fb654..2bd3420 100644 --- a/src/ui/routes/SearchComunicUsersRoute.tsx +++ b/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: "", - lastName: "", + name: "", email: "", + results: [], }; - this.updateFirstName = this.updateFirstName.bind(this); - this.updateLastName = this.updateLastName.bind(this); + this.updateName = this.updateName.bind(this); this.updateEmailAddress = this.updateEmailAddress.bind(this); this.performSearch = this.performSearch.bind(this); this.buildResults = this.buildResults.bind(this); } - updateFirstName(e: React.ChangeEvent) { + updateName(e: React.ChangeEvent) { this.setState({ - firstName: e.target.value, - }); - } - - updateLastName(e: React.ChangeEvent) { - this.setState({ - lastName: e.target.value, + name: e.target.value, }); } @@ -47,24 +44,24 @@ export class SearchComunicUsersRoute extends React.Component< } get canPerformSearch(): boolean { - return ( - this.state.firstName.length > 2 || - this.state.lastName.length > 2 || - this.state.email.length > 4 - ); + return this.state.name.length > 2 || this.state.email.length > 4; } get searchKey(): string { - return ( - this.state.firstName + - "##" + - this.state.lastName + - "##" + - this.state.email - ); + return this.state.name + "##" + 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 */} - + - - - @@ -116,6 +105,37 @@ export class SearchComunicUsersRoute extends React.Component< } buildResults() { - return

Results!!! {this.searchKey}

; + const paperStyle = { padding: "10px", marginTop: "10px" }; + + if (this.state.results.length === 0) + return ( + + There is no result for your search. + + ); + + return ( + + {this.state.results.map((result) => { + return ( + + + + {result.first_name.substring(0, 1)} + + + + + {result.first_name} {result.last_name} + + + {result.email} + + + + ); + })} + + ); } }