1 files changed, 46 insertions, 0 deletions
diff --git a/web/src/App.tsx b/web/src/App.tsx
new file mode 100644
index 0000000..2d597af
--- /dev/null
+++ b/web/src/App.tsx
@@ -0,0 +1,46 @@
+import {useEffect, useState} from 'react'
+import Doc, {isResultDoc, ResultDoc} from "./Doc.tsx";
+import './App.css'
+
+function App() {
+    const [query, setQuery] = useState('');
+    const [data, setData] = useState<ResultDoc[]>([]);
+
+    useEffect(() => {
+        if (query.length == 0) {
+            setData([]);
+            return;
+        }
+
+        fetch(`http://127.0.0.1:5000/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