diff options
| -rw-r--r-- | api/social/search.py | 2 | ||||
| -rw-r--r-- | pages/search.tsx | 104 |
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> } |