no search results message + try to prevent repeat api requests

1 files changed, 8 insertions, 0 deletions

diff --git a/pages/search.tsx b/pages/search.tsx
index 92de828..66e16d2 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -74,10 +74,12 @@ function SearchBar(props: {
 }
 
 export default function HomePage() {
+	var [searched, setSearched] = useState(false);
 	var [results, setResults] = useState<Array<userInfo>>([]);
 	var getSearchResults = (event?: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
 		search(results => setResults(results));
+		setSearched(true);
 	}
 
 	return <div>
@@ -86,6 +88,12 @@ export default function HomePage() {
 			<PageTitle>Zoeken</PageTitle>
 			<SearchBar searchFunction={getSearchResults}/>
 			<SearchResults userList={results}/>
+			{ searched && results.length == 0 && <h1 style={{
+				opacity: .6,
+				color: "var(--text)",
+				textAlign: "center",
+				margin: "24px 32px"
+			}}>Geen zoekresultaten gevonden</h1> }
 		</CenteredPage>
 	</div>
 }