Make search suggestions better, and actually use function.prototype.call for once

src/components/ProxyRegistrar.astro

@@ -17,8 +17,7 @@
     form.addEventListener("submit", formEventListener);
   }
 
-  async function formEventListener(event) {
-    event.preventDefault();
+  async function loadContent() {
     let loadingContent = document.getElementById("loading-content");
     loadingContent.style.opacity = 1;
     let url = input.value.trim();
@@ -32,7 +31,6 @@
     } else if (preference == "rammerhead") {
       // Check if rammerhead-session exists in cookies
       let rammerheadSession = getCookie("rammerhead-session");
-      console.log(rammerheadSession);
       if (!rammerheadSession) {
         let session = await fetch("/newsession");
         let sessionID = await session.text();
@@ -89,6 +87,12 @@
     });
   }
 
+  function formEventListener(event) {
+    event.preventDefault();
+    loadContent();
+  }
+  window.loadContent = loadContent;
+
   function isUrl(val = "") {
     if (/^http(s?):\/\//.test(val) || (val.includes(".") && val.substr(0, 1) !== " ")) return true;
     return false;

src/pages/[lang]/index.astro

@@ -16,7 +16,8 @@ export function getStaticPaths() {
     <h1 class="title-text">{t("menu.welcome")}</h1>
     <div class="form-wrapper">
       <form class="url-input-form" id="url-input-form">
-        <input class="url-input" id="url-input" type="text" placeholder={t("menu.search")} />
+        <input class="url-input" id="url-input" type="text" placeholder={t("menu.search")} autocomplete="off" />
+        <div id="search-suggestions"></div>
         <div id="loading-content">Loading...</div>
         <div id="top-bar"></div>
         <iframe title="proxy-iframe" id="proxy-frame"></iframe>
@@ -49,11 +50,13 @@ export function getStaticPaths() {
 </Layout>
 
 <script>
-    const debounce = (func, delay) => {
-        let debounceTimer;
-        return function () {
-            const context = this;
-            const args = arguments;
+    type Suggestion = {
+        phrase: string;
+    }
+    const debounce = (func: Function, delay: number): (...args: any[]) => void => {
+        let debounceTimer: NodeJS.Timeout;
+        return function (this: Function, ...args: any[]) {
+            const context: any = this;
             clearTimeout(debounceTimer);
             debounceTimer = setTimeout(() => {
                 func.apply(context, args);
@@ -61,20 +64,66 @@ export function getStaticPaths() {
         };
     };
 
-    const urlInput = document.getElementById("url-input");
-
-    async function sendAPIRequest() {
+    async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
+      if (!urlInput) throw new Error("urlInput is null");
+      if (!searchSuggestions) throw new Error("searchSuggestions is null");
         let url = urlInput.value;
-        let request = await fetch("https://api.duckduckgo.com/?q=" + url + "&format=json");
+        let request = await fetch("/search?query=" + url);
         let data = await request.json();
-        console.log(data);
+        searchSuggestions.innerHTML = "";
+        data.map((suggestion: Suggestion) => {
+            let suggestionElement = document.createElement("div");
+            // For some reason css classes weren't working T^T.
+            suggestionElement.style.cursor = "pointer";
+            suggestionElement.style.marginTop = "5px";
+            suggestionElement.innerText = suggestion.phrase;
+            suggestionElement.addEventListener("click", () => {
+              console.log("here")
+                urlInput.value = suggestion.phrase;
+                // I can't be bothered to extend the window object, so I'm just going to use any
+                (window as any).loadContent();
+            });
+            searchSuggestions.appendChild(suggestionElement);
+        });
+        if (data.length === 0) {
+          urlInput.classList.remove("search-results");
+          searchSuggestions.style.opacity = "0";
+        } else {
+          urlInput.classList.add("search-results");
+          searchSuggestions.style.opacity = "1";
+        }
     }
+    function addEventListeners() {
+      let urlInput = document.getElementById("url-input") as HTMLInputElement;
+      let searchSuggestions = document.getElementById('search-suggestions') as HTMLDivElement;
+      // Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
+      if (!urlInput || !searchSuggestions) return;
+        urlInput.addEventListener('focus', () => {
+          if (!searchSuggestions) {
+              throw new Error("searchSuggestions is null");
+          }
+          if (searchSuggestions.children.length > 0) {
+              searchSuggestions.style.opacity = "1";
+              searchSuggestions.style.pointerEvents = "all";
+              urlInput.classList.add("search-results");
+          }
+      })
+      urlInput.addEventListener('blur', () => {
+          searchSuggestions.style.opacity = "0";
+          setTimeout(() => {
+              searchSuggestions.style.pointerEvents = "none";
+          }, 200);
+          urlInput.classList.remove("search-results")
+      })
+
+      urlInput.addEventListener("keyup", () => {
+          debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
+      });
+    }
+    document.addEventListener('astro:after-swap', addEventListeners);
+    addEventListeners();
 
-    const debouncedSendAPIRequest = debounce(sendAPIRequest, 500);
 
-    urlInput.addEventListener("keyup", () => {
-        debouncedSendAPIRequest();
-    });
 </script>
 
 <style>
@@ -88,7 +137,7 @@ export function getStaticPaths() {
     justify-content: center;
   }
   form {
-    width: 40%;
+    width: 350px;
     height: 56px;
   }
 
@@ -104,9 +153,6 @@ export function getStaticPaths() {
   .url-input {
     display: block;
     background: transparent url("/img/search.svg") no-repeat 13px center;
-  }
-
-  .url-input {
     background-color: var(--dropdown-background-color);
     color: var(--text-color);
     border: 3px solid var(--text-color);
@@ -114,20 +160,46 @@ export function getStaticPaths() {
     padding: 15px;
     width: 100%;
     text-align: center;
-    transition: 400ms ease-out;
+    transition: 250ms ease-in-out;
     outline: none;
     font-family: "Varela Round", sans-serif;
     font-size: 16px;
   }
 
+  .url-input.search-results {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 0;
+  }
+
   .url-input::placeholder {
     color: var(--text-color);
   }
 
+  #search-suggestions {
+    background-color: var(--accent-color-brighter);
+    z-index: 3;
+    position: relative;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: var(--text-color);
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    transition: 250ms ease-in-out;
+    opacity: 0;
+    height: 240px;
+    overflow: hidden;
+    border: 3px solid var(--text-color);
+  }
+
   #loading-content {
     color: var(--text-color);
     padding: 8px;
     position: relative;
+    /* hack */
+    top: -325px;
     opacity: 0;
     transition: 250ms ease-in-out;
     text-align: center;

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "exclude": ["node_modules/**"],
+  "exclude": ["node_modules/**", "dist/**"],
   "compilerOptions": {
     "verbatimModuleSyntax": false,
   }