From 94fef5fc7e28343c77f56b579dca25d9862369a2 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 13 Jun 2024 15:51:25 +0200
Subject: [PATCH] Bugfixing: call api for searching stocks in mobile

---
 src/routes/crypto/[tickerID]/+layout.svelte | 29 +++++++++++-
 src/routes/etf/[tickerID]/+layout.svelte    | 52 +++++++++++++++------
 src/routes/stocks/[tickerID]/+layout.svelte | 28 ++++++++++-
 3 files changed, 90 insertions(+), 19 deletions(-)

diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index f50e299d..ee48e22b 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-  import {userRegion, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, cryptoTicker, assetType} from '$lib/store';
+  import {searchBarData, userRegion, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, cryptoTicker, assetType} from '$lib/store';
 
   import { onMount, onDestroy, afterUpdate} from "svelte";
   import { goto } from '$app/navigation';
@@ -19,17 +19,42 @@
 const usRegion = ['cle1','iad1','pdx1','sfo1'];
 let fastifyURL;
 let wsURL;
+let apiURL;
 
 userRegion?.subscribe(value => {
 if (usRegion?.includes(value)) {
+  apiURL = import.meta.env.VITE_USEAST_API_URL;
   fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
   wsURL = import.meta.env.VITE_USEAST_WS_URL;
 } else {
+  apiURL = import.meta.env.VITE_EU_API_URL;
   fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
   wsURL = import.meta.env.VITE_EU_WS_URL;
 }
 });
 
+async function loadSearchData() {
+    
+    if($searchBarData?.length !== 0)
+    {
+      return
+    }
+    else {
+  
+       // make the GET request to the endpoint
+       const response = await fetch(apiURL+'/searchbar-data', {
+      method: 'GET',
+      headers: {
+          'Content-Type': 'application/json'
+      },
+      });
+  
+      $searchBarData = await response.json();
+    }
+     
+  
+  }
+
 
 
     let previousRealtimePrice = null;
@@ -475,7 +500,7 @@ $: {
                     </div>
                     
                       <!--Start Search Button-->
-                      <label class="ml-auto mr-4" for="searchBarModal">
+                      <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
                         <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
                       </label>
                         <!--End Search Button-->
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 174bcfa0..3a881799 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-    import {globalForm, userRegion, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
+    import {searchBarData, globalForm, userRegion, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
 
     import { onMount, onDestroy, afterUpdate} from "svelte";
     import { goto } from '$app/navigation';
@@ -21,21 +21,43 @@
   
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
   
-  let fastifyURL;
-  let wsURL;
-  
-  
-  userRegion.subscribe(value => {
+let fastifyURL;
+let wsURL;
+let apiURL;
 
-  if (usRegion.includes(value)) {
-    fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
-    wsURL = import.meta.env.VITE_USEAST_WS_URL;
-  } else {
-    fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
-    wsURL = import.meta.env.VITE_EU_WS_URL;
-  }
-  });
+userRegion?.subscribe(value => {
+if (usRegion?.includes(value)) {
+  apiURL = import.meta.env.VITE_USEAST_API_URL;
+  fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
+  wsURL = import.meta.env.VITE_USEAST_WS_URL;
+} else {
+  apiURL = import.meta.env.VITE_EU_API_URL;
+  fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
+  wsURL = import.meta.env.VITE_EU_WS_URL;
+}
+});
+
+async function loadSearchData() {
+    
+    if($searchBarData?.length !== 0)
+    {
+      return
+    }
+    else {
   
+       // make the GET request to the endpoint
+       const response = await fetch(apiURL+'/searchbar-data', {
+      method: 'GET',
+      headers: {
+          'Content-Type': 'application/json'
+      },
+      });
+  
+      $searchBarData = await response.json();
+    }
+     
+  
+  }
       
     
   
@@ -507,7 +529,7 @@ $: {
                       </div>
                       
                         <!--Start Search Button-->
-                        <label class="ml-auto mr-4" for="searchBarModal">
+                        <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
                           <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
                         </label>
                           <!--End Search Button-->
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index aabb99aa..60ab9526 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-  import {userRegion, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, stockTicker, assetType, isOpen } from '$lib/store';
+  import {searchBarData, userRegion, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, stockTicker, assetType, isOpen } from '$lib/store';
 
   import { onMount, onDestroy, afterUpdate} from "svelte";
   import { goto } from '$app/navigation';
@@ -19,17 +19,41 @@
 const usRegion = ['cle1','iad1','pdx1','sfo1'];
 let fastifyURL;
 let wsURL;
+let apiURL;
 
 userRegion?.subscribe(value => {
 if (usRegion?.includes(value)) {
+  apiURL = import.meta.env.VITE_USEAST_API_URL;
   fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
   wsURL = import.meta.env.VITE_USEAST_WS_URL;
 } else {
+  apiURL = import.meta.env.VITE_EU_API_URL;
   fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
   wsURL = import.meta.env.VITE_EU_WS_URL;
 }
 });
 
+async function loadSearchData() {
+    
+    if($searchBarData?.length !== 0)
+    {
+      return
+    }
+    else {
+  
+       // make the GET request to the endpoint
+       const response = await fetch(apiURL+'/searchbar-data', {
+      method: 'GET',
+      headers: {
+          'Content-Type': 'application/json'
+      },
+      });
+  
+      $searchBarData = await response.json();
+    }
+     
+  
+  }
 
 
     let previousRealtimePrice = null;
@@ -492,7 +516,7 @@ $: {
                     </div>
                     
                       <!--Start Search Button-->
-                      <label class="ml-auto mr-4" for="searchBarModal">
+                      <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
                         <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
                       </label>
                         <!--End Search Button-->