Added ability to query from URL

glycojones · Nov 26, 2023 · acb39ce · acb39ce
1 parent d6d41ea
commit acb39ce
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 32 deletions.
diff --git a/webserver/src/App.tsx b/webserver/src/App.tsx
@@ -1,20 +1,34 @@
-import { useEffect, useState, Suspense } from 'react'
+import { useMemo, Suspense } from 'react'
 import './App.css'
 import HomeSection from './pages/Home/HomeSection'
 import DatabaseSection from './pages/DatabaseSection/DatabaseSection'
 
 import PageLoad from './components/Loading/PageLoad'
-import {  Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Link,
+  useLocation
+} from "react-router-dom";
+import APIHandler from './api_components/APIHandler'
+
+function useQuery() {
+  const { search } = useLocation();
+
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
 
 function App() {
+  let query = useQuery();
+
   return (
     <Suspense fallback={<PageLoad />}>
       <div className='flex flex-col'>
 
-          <Routes>
-            <Route index path="/" element={<HomeSection />}/>
-            <Route path="/database" element={<DatabaseSection />} />
-          </Routes>
+        <Routes>
+          <Route index path="/" element={<HomeSection />} />
+          <Route path="/database" element={<DatabaseSection query={query}/>} />
+        </Routes>
       </div>
     </Suspense>
   )

diff --git a/webserver/src/pages/DatabaseSection/DatabaseSection.tsx b/webserver/src/pages/DatabaseSection/DatabaseSection.tsx
@@ -9,7 +9,7 @@ import { DatabaseHeader } from "../../layouts/DatabaseHeader.tsx";
 
 import pako from "pako"
 
-export default function DatabaseSection() {
+export default function DatabaseSection(props) {
 
     const [PDBCode, setPDBCode] = useState<string>("")
     const [submit, setSubmit] = useState<boolean>(false);
@@ -20,38 +20,49 @@ export default function DatabaseSection() {
     const [results, setResults] = useState<string>("")
     const [failure, setFailure] = useState<boolean>(false)
 
-    useEffect(() => {
-        if (PDBCode != "") {
-            setLoadingText(`Fetching ${PDBCode.toUpperCase()} from the database`)
-            let pdb_code = PDBCode.toLowerCase()
-            let middlefix = pdb_code.substring(1, 3)
+    function handle_database_lookup(PDBCode) {
+        let pdb_code = PDBCode.toLowerCase()
+        let middlefix = pdb_code.substring(1, 3)
 
-            let url = `https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/${middlefix}/${pdb_code}.json.gz`
+        let url = `https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/${middlefix}/${pdb_code}.json.gz`
 
-            try {
-                fetch(url, {
-                    method: "GET"
-                }).then(response => {
-                    let buffer = response.arrayBuffer()
-                    buffer.then((bytes) => {
-                        var decompressedData = pako.inflate(bytes, { to: 'string' });
-                        var jsonString = decompressedData.toString('utf-8');
-                        var jsonObject = JSON.parse(jsonString);
-                        setResults(jsonObject)
-                    }).catch( e => {
-                        setFallBack(true)
-                        setFailureText("Cannot be found in database")
-                    })
+        try {
+            fetch(url, {
+                method: "GET"
+            }).then(response => {
+                let buffer = response.arrayBuffer()
+                buffer.then((bytes) => {
+                    var decompressedData = pako.inflate(bytes, { to: 'string' });
+                    var jsonString = decompressedData.toString('utf-8');
+                    var jsonObject = JSON.parse(jsonString);
+                    setResults(jsonObject)
                 }).catch(e => {
-                    console.log(e)
+                    setFallBack(true)
+                    setFailureText("Cannot be found in database")
                 })
-            } catch { 
-                console.log("not in db")
-            }
+            }).catch(e => {
+                console.log(e)
+            })
+        } catch {
+            console.log("not in db")
         }
+    }
 
+    useEffect(() => {
+        if (PDBCode != "") {
+            setLoadingText(`Fetching ${PDBCode.toUpperCase()} from the database`)
+            handle_database_lookup(PDBCode)
+        }
     }, [submit])
 
+    useEffect(() => {
+        console.log(props, props.query.get("pdb"))
+        if (props.query.get("pdb") != null) {
+            handle_database_lookup(props.query.get("pdb"))
+        }
+    }, [])
+
+
     useEffect(() => {
         setSubmit(false)
         setFallBack(false)
@@ -70,7 +81,7 @@ export default function DatabaseSection() {
         loadingText: loadingText,
         fallback: fallback,
         failureText: failureText,
-        results: results, 
+        results: results,
     }
 
     return (