From 0881ea2b8868503143ac549e543814949b68a8a8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 20 Sep 2024 15:23:47 +0200
Subject: [PATCH] ui fixes

---
 src/routes/analysts/+page.svelte            |   1 -
 src/routes/cramer-tracker/+page.svelte      |  27 ++--
 src/routes/etf/+page.server.ts              |  22 +++
 src/routes/etf/+page.svelte                 | 143 ++++++++++++-------
 src/routes/etf/+page.ts                     |  35 -----
 src/routes/most-shorted-stocks/+page.svelte |  31 +++--
 src/routes/stocks/+page.svelte              | 147 +++++++++++++-------
 7 files changed, 246 insertions(+), 160 deletions(-)
 create mode 100644 src/routes/etf/+page.server.ts
 delete mode 100644 src/routes/etf/+page.ts

diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 2bea83d5..c37f4be9 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -34,7 +34,6 @@ window.addEventListener('scroll', handleScroll);
 })
 
 
-
 let order = '';
 let sortBy = ''; // Default sorting by change percentage
 
diff --git a/src/routes/cramer-tracker/+page.svelte b/src/routes/cramer-tracker/+page.svelte
index b318edd4..407918a4 100644
--- a/src/routes/cramer-tracker/+page.svelte
+++ b/src/routes/cramer-tracker/+page.svelte
@@ -1,12 +1,10 @@
 <script lang='ts'>
     import { goto } from '$app/navigation';
     import { numberOfUnreadNotification, screenWidth } from '$lib/store';
-    import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
     import { onMount } from 'svelte';
     import ArrowLogo from "lucide-svelte/icons/move-up-right";
     import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
 
-    //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   
     
       export let data;
@@ -18,23 +16,27 @@
 
 
   
-    async function infiniteHandler({ detail: { loaded, complete } }) 
-    {
-    if (displayList?.length === rawData?.length) {
-        complete();
-      } else {
+async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && displayList?.length !== rawData?.length) {
         const nextIndex = displayList?.length;
-        const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
-        displayList = [...displayList, ...newArticles];
-        loaded();
-      }
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        displayList = [...displayList, ...filteredNewResults];
     }
+  }
+
     
-      
+
     onMount(() => {
       rawData = data?.getCramerTracker ?? [];
       displayList = rawData?.slice(0,50) ?? []
       isLoaded = true;
+
+      window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
     })
     
     
@@ -203,7 +205,6 @@
                           </tbody>
                         </table>
                     </div>
-                      <InfiniteLoading on:infinite={infiniteHandler} />
                       <UpgradeToPro data={data} title="Get the latest dark pool trades in realtime from Hedge Funds & Major Institutional Traders"/>
     
                   </div>
diff --git a/src/routes/etf/+page.server.ts b/src/routes/etf/+page.server.ts
new file mode 100644
index 00000000..41fad682
--- /dev/null
+++ b/src/routes/etf/+page.server.ts
@@ -0,0 +1,22 @@
+export const load = async ({ locals }) => {
+  const getETFList = async () => {
+    const { apiKey, apiURL } = locals;
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/all-etf-tickers", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getETFList: await getETFList(),
+  };
+};
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 1977af93..cd557c91 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -4,49 +4,37 @@ import { numberOfUnreadNotification, screenWidth } from '$lib/store';
 import { abbreviateNumber  } from '$lib/utils';
 import { page } from '$app/stores';
 import logo from '$lib/images/box_logo.png';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+import { onMount } from 'svelte';
 
-import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 
 export let data;
 
 
-let charNumber =50;
-let notDestroyed = true;
-
 let rawData = data?.getETFList;
-let symbolList = rawData?.slice(0,50);
+let stockList = rawData?.slice(0,50);
 
 
-async function infiniteHandler({ detail: { loaded, complete } }) 
-{
-  if (symbolList?.length === rawData?.length && notDestroyed) {
-      complete();
-    } else if (notDestroyed) {
-      const nextIndex = symbolList?.length;
-      const newSymbols = rawData?.slice(nextIndex, nextIndex + 5);
-      symbolList = [...symbolList, ...newSymbols];
-      loaded();
+async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && stockList?.length !== rawData?.length) {
+        const nextIndex = stockList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        stockList = [...stockList, ...filteredNewResults];
     }
-}
+  }
+
+onMount(() => {
+   window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+})
+
+$: charNumber = $screenWidth < 640 ? 15 : 40;
 
 
-
-$: {
-    if($screenWidth < 640)
-    {
-    charNumber = 20;
-    }
-    else {
-    charNumber =50;
-    }
-}
-
-$: {
-    if ($page.url.pathname !== '/etf') {
-    notDestroyed = false;
-    }
-}
-    
 </script>
         
         
@@ -74,18 +62,25 @@ $: {
 
 </svelte:head>
           
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-  
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
     <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
-        <ul>
-          <li><a href="/" class="text-gray-300">Home</a></li> 
-          <li><a class="text-gray-300">All ETF Symbols</a></li> 
-        </ul>
+      <ul>
+        <li><a href="/" class="text-gray-300">Home</a></li>
+        <li class="text-gray-300">All ETFs</li>
+      </ul>
     </div>
-        
+            
+    <div class="w-full overflow-hidden m-auto mt-5">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
 
-          <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+
+              <main class="w-full lg:w-3/4 lg:pr-5">
+               
+                <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
           
               <!-- Start Column -->
               <div>
@@ -165,7 +160,7 @@ $: {
                   </tr>
                 </thead>
                 <tbody>
-                  {#each symbolList as item,index}
+                  {#each stockList as item,index}
                   <tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
                     
                     <td class="hidden sm:table-cell text-blue-400 font-medium text-sm text-start border-b-[#09090B]">
@@ -201,12 +196,66 @@ $: {
                 </tbody>
               </table>
           </div>
-    
-          <InfiniteLoading on:infinite={infiniteHandler} />
-    
+        
         
      
+       
+      </main>
+              <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+                {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+                <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Pro Subscription 🔥
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Upgrade now for unlimited access to all data and tools
+                        </span>
+                    </div>
+                </div>
+                {/if}
+
+                <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Analyst 📊
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings
+                        </span>
+                    </div>
+                </div>
+
+                <div on:click={() => goto('/analysts/top-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Stocks Picks ⭐
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings.
+                        </span>
+                    </div>
+                </div>
+
+              </aside>
+
+        </div>
+      </div>
+  
+    
+    </div>
         
-        </section>
         
-        
\ No newline at end of file
+    
+  </section>
+  
\ No newline at end of file
diff --git a/src/routes/etf/+page.ts b/src/routes/etf/+page.ts
deleted file mode 100644
index 3eebe692..00000000
--- a/src/routes/etf/+page.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getCache, setCache } from "$lib/store";
-
-export const load = async ({ parent }) => {
-  const getETFList = async () => {
-    let output;
-
-    // Get cached data for the specific tickerID
-    const cachedData = getCache("", "getETFList");
-    if (cachedData) {
-      output = cachedData;
-    } else {
-      const { apiKey, apiURL } = await parent();
-      // make the POST request to the endpoint
-      const response = await fetch(apiURL + "/all-etf-tickers", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "X-API-KEY": apiKey,
-        },
-      });
-
-      output = await response.json();
-
-      // Cache the data for this specific tickerID with a specific name 'getETFList'
-      setCache("", output, "getETFList");
-    }
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getETFList: await getETFList(),
-  };
-};
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
index 1fc7b6e2..91e218b8 100644
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ b/src/routes/most-shorted-stocks/+page.svelte
@@ -1,7 +1,6 @@
 <script lang='ts'>
   import { goto } from '$app/navigation';
   import { numberOfUnreadNotification, screenWidth } from '$lib/store';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 	import { abbreviateNumber } from '$lib/utils';
   import { onMount } from 'svelte';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
@@ -13,26 +12,29 @@
 
     let isLoaded = false;
     let rawData = []
-    let shortedList =  [];
+    let stockList =  [];
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  if (shortedList?.length === rawData?.length) {
-      complete();
-    } else {
-      const nextIndex = shortedList?.length;
-      const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
-      shortedList = [...shortedList, ...newArticles];
-      loaded();
+async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && stockList?.length !== rawData?.length) {
+        const nextIndex = stockList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        stockList = [...stockList, ...filteredNewResults];
     }
   }
   
     
   onMount(() => {
     rawData = data?.getMostShortedStocks ?? [];
-    shortedList = rawData?.slice(0,20) ?? []
+    stockList = rawData?.slice(0,50) ?? []
     isLoaded = true;
+
+     window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
   })
   
   
@@ -161,9 +163,9 @@
                           </tr>
                         </thead>
                         <tbody>
-                          {#each shortedList as item, index}
+                          {#each stockList as item, index}
   
-                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === shortedList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
+                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -204,7 +206,6 @@
                         </tbody>
                       </table>
                   </div>
-                    <InfiniteLoading on:infinite={infiniteHandler} />
                     <UpgradeToPro data={data} title="Get the most shorted stocks on the market to never miss out the next short squeeze"/>
   
                 </div>
diff --git a/src/routes/stocks/+page.svelte b/src/routes/stocks/+page.svelte
index 37d6beb1..1df32809 100644
--- a/src/routes/stocks/+page.svelte
+++ b/src/routes/stocks/+page.svelte
@@ -2,49 +2,40 @@
 import { goto } from '$app/navigation';
 import { screenWidth, numberOfUnreadNotification } from '$lib/store';
 import { abbreviateNumber } from '$lib/utils';
-import { page } from '$app/stores';
+import { onMount } from 'svelte';
 import logo from '$lib/images/box_logo.png';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
-import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 
 export let data;
 
 
-let charNumber =40;
-let notDestroyed = true;
 
 let rawData = data?.getStockList;
-let symbolList = rawData?.slice(0,50);
+let stockList = rawData?.slice(0,50);
 
 
-async function infiniteHandler({ detail: { loaded, complete } }) 
-{
-  if (symbolList?.length === rawData?.length && notDestroyed) {
-      complete();
-    } else if (notDestroyed) {
-      const nextIndex = symbolList?.length;
-      const newSymbols = rawData?.slice(nextIndex, nextIndex + 5);
-      symbolList = [...symbolList, ...newSymbols];
-      loaded();
+  
+async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && stockList?.length !== rawData?.length) {
+        const nextIndex = stockList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        stockList = [...stockList, ...filteredNewResults];
     }
-}
-
-    
-$: {
-    if($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber =40;
-    }
-}
-
-$: {
-  if ($page.url.pathname !== '/stocks') {
-    notDestroyed = false;
   }
-}
+  
+onMount(() => {
+   window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+})
+
+
+$: charNumber = $screenWidth < 640 ? 15 : 40;
+
 
 </script>
     
@@ -77,19 +68,25 @@ $: {
   
 
       
-    <section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
-        
-      <!--
-      <div class="text-sm breadcrumbs ml-4">
-        <ul>
-          <li><a href="/" class="text-gray-300">Home</a></li> 
-          <li><a class="text-gray-300">All Stock Symbols</a></li> 
-        </ul>
-      </div>
-      -->
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+      <ul>
+        <li><a href="/" class="text-gray-300">Home</a></li>
+        <li class="text-gray-300">All Stocks</li>
+      </ul>
+    </div>
+            
+    <div class="w-full overflow-hidden m-auto mt-5">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
 
-      <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+
+              <main class="w-full lg:w-3/4 lg:pr-5">
+               
+                <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
       
           <!-- Start Column -->
           <div>
@@ -169,7 +166,7 @@ $: {
             </tr>
           </thead>
           <tbody>
-            {#each symbolList as item,index}
+            {#each stockList as item,index}
             <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
               
               <td class="hidden sm:table-cell text-blue-400 font-medium text-sm text-start border-b-[#09090B]">
@@ -205,12 +202,64 @@ $: {
         </table>
       </div>
 
-      <InfiniteLoading on:infinite={infiniteHandler} />
 
     
+      </main>
+              <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+                {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+                <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Pro Subscription 🔥
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Upgrade now for unlimited access to all data and tools
+                        </span>
+                    </div>
+                </div>
+                {/if}
+
+                <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Analyst 📊
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings
+                        </span>
+                    </div>
+                </div>
+
+                <div on:click={() => goto('/analysts/top-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Stocks Picks ⭐
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings.
+                        </span>
+                    </div>
+                </div>
+
+              </aside>
+
+        </div>
+      </div>
+  
     
-     
+    </div>
+        
+        
     
-    </section>
-    
-    
\ No newline at end of file
+  </section>
+  
\ No newline at end of file