From 89930b80b5a2c80c7a055d20871fa4706e15b425 Mon Sep 17 00:00:00 2001
From: rabi-siddique <rabisiddique27@gmail.com>
Date: Fri, 22 Nov 2024 10:03:35 +0500
Subject: [PATCH] refactor: introduce dropdown to manage search forms

---
 public/css/styles.css          | 33 ++++++++++++-------
 public/index.html              | 39 ++++++++++++++++-------
 public/scripts/index.js        |  4 +++
 public/scripts/submitHeight.js | 38 ----------------------
 public/scripts/submitSearch.js | 58 ++++++++++++++++++++++++++++++++++
 5 files changed, 112 insertions(+), 60 deletions(-)
 create mode 100644 public/scripts/index.js
 delete mode 100644 public/scripts/submitHeight.js
 create mode 100644 public/scripts/submitSearch.js

diff --git a/public/css/styles.css b/public/css/styles.css
index 87fb199..b4f5097 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -15,8 +15,7 @@ html {
   border-bottom: 2px solid #ddd;
 }
 
-.formDateRange,
-.formBlockHeight {
+.formDateRange {
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -48,7 +47,7 @@ html {
   }
 }
 
-#submitHeightButton,
+#submitSearchButton,
 #uploadFileButton,
 #submitDateButton {
   background-color: #007bff;
@@ -96,18 +95,16 @@ select {
   font-weight: 500;
 }
 
-#dateForm > #fileHelperText > p,
-#blockHeightForm > #fileHelperText > p {
+#dateForm > #fileHelperText > p {
   margin: 0;
 }
 
-@media (max-width: 649px) {
+@media (max-width: 599px) {
   .topbar {
     flex-direction: column;
     gap: 20px;
   }
-  .formDateRange,
-  .formBlockHeight {
+  .formDateRange {
     display: block;
   }
 
@@ -130,8 +127,22 @@ select {
   #networkForm > #fileHelperText > p {
     display: none;
   }
+}
 
-  #blockHeightForm > #fileHelperText > p {
-    padding-bottom: 8px;
-  }
+#txHashInput,
+#searchTermInput {
+  display: none;
+}
+
+#searchForm {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+#searchFormTop,
+#searchFormBottom {
+  display: flex;
+  gap: 8px;
 }
diff --git a/public/index.html b/public/index.html
index bfece7c..0099641 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,17 +46,37 @@
             </div>
         </form>
 
-        <form id="blockHeightForm" class="formBlockHeight">
-            <div id="inputBlock">
-                <input type="number" id="blockHeight" name="blockHeight" required>
-                <div id="spinnerHeightForm" class="spinner"></div>
-                <button id="submitHeightButton" type="submit">Submit Height</button>
+        <form id="searchForm">
+            <div id="searchFormTop">
+                <select id="searchType" name="searchType">
+                    <option value="blockHeight">Block Height</option>
+                    <option value="txHash">Transaction Hash</option>
+                    <option value="searchTerm">Search Term</option>
+                </select>
             </div>
-            <div id="fileHelperText">
-                <p id="helperText">Enter a Block Height</p>
+
+            <div id="searchFormBottom">
+                <div class="searchInput" id="blockHeightInput">
+                    <input type="number" id="blockHeight" name="blockHeight" required>
+                    <div class="spinner"></div>
+                </div>
+
+                <div class="searchInput" id="txHashInput">
+                    <input type="text" id="txHash" name="txHash" required>
+                </div>
+
+                <div class="searchInput" id="searchTermInput">
+                    <input type="text" id="searchTerm" name="searchTerm" required>
+                </div>
+
+                <div id="spinnerSearchForm" class="spinner"></div>
+                <button id="submitSearchButton" type="submit">Search</button>
             </div>
         </form>
 
+
+
+
     </div>
 
     <div class="mainBody">
@@ -64,10 +84,7 @@
     </div>
 
     <script src="/scripts/ses/ses.umd.min.js" charset="utf-8"></script>
-    <script src="./scripts/lockdown.js"></script>
-    <script src="scripts/upload.js"></script>
-    <script src="scripts/submitDateRange.js"></script>
-    <script src="scripts/submitHeight.js"></script>
+    <script type="module" src="./scripts/index.js"></script>
 
 </body>
 
diff --git a/public/scripts/index.js b/public/scripts/index.js
new file mode 100644
index 0000000..7d4f994
--- /dev/null
+++ b/public/scripts/index.js
@@ -0,0 +1,4 @@
+import './lockdown.js';
+import './upload.js';
+import './submitDateRange.js';
+import './submitSearch.js';
diff --git a/public/scripts/submitHeight.js b/public/scripts/submitHeight.js
deleted file mode 100644
index e260571..0000000
--- a/public/scripts/submitHeight.js
+++ /dev/null
@@ -1,38 +0,0 @@
-document
-  .getElementById('blockHeightForm')
-  .addEventListener('submit', async (e) => {
-    e.preventDefault();
-
-    const height = document.getElementById('blockHeight').value;
-    const spinner = document.getElementById('spinnerHeightForm');
-    const submitButton = document.getElementById('submitHeightButton');
-    const network = document.getElementById('networkSelect').value;
-
-    spinner.style.display = 'inline-block';
-    submitButton.style.visibility = 'hidden';
-    try {
-      const response = await fetch('/submit-height', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ height, network }),
-      });
-
-      if (response.ok) {
-        const svgContent = await response.blob();
-        const url = URL.createObjectURL(svgContent);
-
-        const svgElement = document.getElementById('svgDisplay');
-        svgElement.src = url;
-        svgElement.style.display = 'inline-block';
-      } else {
-        console.error('Failed to upload file');
-      }
-    } catch (error) {
-      console.error('Error:', error);
-    } finally {
-      spinner.style.display = 'none';
-      submitButton.style.visibility = 'visible';
-    }
-  });
diff --git a/public/scripts/submitSearch.js b/public/scripts/submitSearch.js
new file mode 100644
index 0000000..72940c0
--- /dev/null
+++ b/public/scripts/submitSearch.js
@@ -0,0 +1,58 @@
+const searchTypeSelect = document.getElementById('searchType');
+
+searchTypeSelect.addEventListener('change', () => {
+  const selection = document.getElementById('searchType').value;
+  document.getElementById('blockHeightInput').style.display = 'none';
+  document.getElementById('txHashInput').style.display = 'none';
+  document.getElementById('searchTermInput').style.display = 'none';
+
+  if (selection === 'blockHeight') {
+    document.getElementById('blockHeightInput').style.display = 'block';
+  } else if (selection === 'txHash') {
+    document.getElementById('txHashInput').style.display = 'block';
+  } else if (selection === 'searchTerm') {
+    document.getElementById('searchTermInput').style.display = 'block';
+  }
+});
+
+document.getElementById('searchForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+
+  const searchInputValue = document.querySelector('.searchInput').value;
+  const searchStrategy = document.getElementById('searchType').value;
+  const spinner = document.getElementById('spinnerSearchForm');
+  const submitButton = document.getElementById('submitSearch');
+  const network = document.getElementById('networkSelect').value;
+
+  spinner.style.display = 'inline-block';
+  submitButton.style.visibility = 'hidden';
+  try {
+    const response = await fetch('/submit-height', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        searchInputValue,
+        network,
+        strategy: searchStrategy,
+      }),
+    });
+
+    if (response.ok) {
+      const svgContent = await response.blob();
+      const url = URL.createObjectURL(svgContent);
+
+      const svgElement = document.getElementById('svgDisplay');
+      svgElement.src = url;
+      svgElement.style.display = 'inline-block';
+    } else {
+      console.error('Failed to upload file');
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  } finally {
+    spinner.style.display = 'none';
+    submitButton.style.visibility = 'visible';
+  }
+});