cool search function working :tada:

2 files changed, 80 insertions, 26 deletions

diff --git a/api/social/search.py b/api/social/search.py
index 712d0b8..a9bb385 100644
--- a/api/social/search.py
+++ b/api/social/search.py
@@ -5,7 +5,7 @@ import json
 
 search = Blueprint('search', __name__)
 
-@search.route('/search', methods = ['GET', 'POST'])
+@search.route('/search', methods = ['POST'])
 def index():
     data_string = request.data or "{}"
     data = json.loads(data_string)
diff --git a/pages/search.tsx b/pages/search.tsx
index 8aef64b..52dfed5 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,38 +1,92 @@
-import { Component } from 'react';
+import { FormEvent, useState } from 'react';
+import axios from 'axios';
 
 import { NavBar } from '../components/navbar';
 import { Vierkant, Button, Input } from '../components/ui';
 import { CenteredPage, PageTitle } from '../components/page';
+import { AccountAvatar } from '../components/account';
+import { userInfo } from '../api/api';
 
 import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
 
-function SearchBar() {
-	return <Vierkant style={{ padding: 8 }} fullwidth>
-		<Input label="Zoeken voor gebruikers..." dark style={{
-			backgroundColor: "var(--background)",
-			color: "var(--text)",
-			padding: 14,
-			fontSize: 16,
-			width: "calc(100% - 48px - 14px * 2)"
-		}}/>
-		<Button style={{
-			padding: 12,
-			float: "right",
-			display: "inline-block",
-			borderRadius: 4
-		}}><SearchOutlinedIcon/></Button>
-	</Vierkant>
+function search(callback: (results: Array<userInfo>) => void) {
+	var query: string = (document.getElementById("searchBar") as HTMLInputElement).value;
+	if (query.length < 3) return;
+
+	axios.request<{ "results": Array<userInfo> }>({
+		method: "post",
+		url: `${window.location.origin}/api/social/search`,
+		headers: {"content-type": "application/json"},
+		data: { "query": query }
+	})
+	.then(response => callback(response.data.results))
+	.catch(() => {});
 }
 
-export default class HomePage extends Component {
-	render () {
-		return <div>
-			<NavBar/>
-			<CenteredPage width={802}>
-				<PageTitle>Zoeken</PageTitle>
-				<SearchBar/>
-			</CenteredPage>
+function SearchResults(props: { userList: Array<userInfo> }) {
+	return <div>
+	{ props.userList?.map(user => <SearchResult user={user} key={user.id}/>) }
+	</div>;
+}
+
+function SearchResult(props: { user: userInfo }) {
+	return <Vierkant style={{
+		padding: 12
+	}} fullwidth>
+		<div style={{ position: "relative" }}>
+			<AccountAvatar size={48} dummy/>
+			<div style={{
+				position: "absolute",
+				top: 0, right: 0, bottom: 0,
+				left: 48 + 12
+			}}>
+				<b>{props.user.username}</b>
+				<p>{props.user.status || "Hey daar!, ik ben nieuw op deze website en heb nog geen status."}</p>
+			</div>
 		</div>
+	</Vierkant>;
+}
+
+function SearchBar(props: {
+	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
+}) {
+	return <Vierkant fullwidth style={{
+		padding: 8,
+		marginBottom: 24
+	}}>
+		<form onSubmit={props.searchFunction}>
+			<Input id="searchBar" label="Zoeken voor gebruikers..." autocomplete="off" dark style={{
+				backgroundColor: "var(--background)",
+				color: "var(--text)",
+				padding: 14,
+				fontSize: 16,
+				width: "calc(100% - 48px - 14px * 2)"
+			}}/>
+			<Button style={{
+				padding: 12,
+				float: "right",
+				display: "inline-block",
+				borderRadius: 4
+			}} onclick={props.searchFunction}><SearchOutlinedIcon/></Button>
+			<input type="submit" style={{ display: "none" }}/>
+		</form>
+	</Vierkant>
+}
+
+export default function HomePage() {
+	var [results, setResults] = useState<Array<userInfo>>([]);
+	var getSearchResults = (event?: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		search(results => setResults(results));
 	}
+
+	return <div>
+		<NavBar/>
+		<CenteredPage width={802}>
+			<PageTitle>Zoeken</PageTitle>
+			<SearchBar searchFunction={getSearchResults}/>
+			<SearchResults userList={results}/>
+		</CenteredPage>
+	</div>
 }