import axios from 'axios'; import { FormEvent, useState } from 'react'; import { userInfo } from '../api/api'; import { AccountAvatar } from '../components/account'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import { Button, Input, Vierkant } from '../components/ui'; import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined'; function search(callback: (results: Array) => void) { var query: string = (document.getElementById('bigSearchBar') 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 BigSearchBar(props: { searchFunction: (event?: FormEvent) => void; }) { return
; } export default function SearchPage() { 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

}
; }