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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import {useEffect, useState} from 'react'
import Doc from "./Doc.tsx";
import './App.css'
import {isResultDoc, ResultDoc} from "./resultdoc.ts";
const group_members = [
{name: "Anshul Gupta", sid: "862319580", nid: "agupt109"},
{name: "Nikhil Mahendrakar", sid: "862464249", nid: "nmahe008"},
{name: "Ishaan Bijor", sid: "862128714", nid: "ibijo001"},
{name: "Junbo Yang", sid: "862234040", nid: "jyang389"},
{name: "Junyan Hou", sid: "862394589", nid: "jhou038"},
]
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>
{data.length == 0 && query.length == 0 &&
<div>
<h2 className="group-title">Group 10</h2>
<table className="group-table">
<tbody>
{group_members.map(member => <tr>
<td>{member.name}</td>
<td><a href={`mailto:${member.nid}@ucr.edu`}>{member.nid}</a></td>
<td>{member.sid}</td>
</tr>)}
</tbody>
</table>
</div>
}
<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}/>)}
{data.length == 0 && query.length > 0 &&
<div className="card">
<p>No Results Found</p>
</div>
}
</div>
</>
)
}
export default App
|
