web/src/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import {useEffect, useState} from 'react'
import Doc from "./Doc.tsx";
import './App.css'
import {isResultDoc, ResultDoc} from "./resultdoc.ts";

function App() {
    const [query, setQuery] = useState('');
    const [data, setData] = useState<ResultDoc[]>([]);

    useEffect(() => {
        if (query.length == 0) {
            setData([]);
            return;
        }

        fetch(`/query?q=${query}`, {
            method: "GET"
        })
            .then(res => res.json())
            .then((data: unknown) => {
                if (Array.isArray(data) && data.every(isResultDoc)) {
                    setData(data);
                } else {
                    console.error("Retrieved data is invalid");
                }
            })
    }, [query]);

    return (
        <>
            <h1>CS172 Project</h1>
            <div className="card">
                <input className="searchbox" type="text" value={query} onChange={(e) => setQuery(e.target.value)}/>
                {/*Add this later if search becomes too long*/}
                {/*<button id="searchbutton" type="submit">*/}
                {/*    Search!*/}
                {/*</button>*/}
            </div>

            <div className="item-container">
                {data.map((doc: ResultDoc) => <Doc document={doc} key={doc.id}/>)}
            </div>
        </>
    )
}

export default App