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 search(callback: (results: Array) => void) { var query: string = (document.getElementById("searchBar") as HTMLInputElement).value; if (query.length < 3) return; axios.request<{ "results": Array }>({ method: "post", url: `${window.location.origin}/api/social/search`, headers: {"content-type": "application/json"}, data: { "query": query } }) .then(response => callback(response.data.results)) .catch(() => {}); } function SearchResults(props: { userList: Array }) { return
{ props.userList?.map(user => ) }
; } function SearchResult(props: { user: userInfo }) { return
{props.user.username}

{props.user.status}

; } function SearchBar(props: { searchFunction: (event?: FormEvent) => void; }) { return
} export default function HomePage() { var [searched, setSearched] = useState(false); var [results, setResults] = useState>([]); var getSearchResults = (event?: FormEvent) => { event.preventDefault(); search(results => setResults(results)); setSearched(true); } return
Zoeken { searched && results.length == 0 &&

Geen zoekresultaten gevonden

}
}