From c7f8d1446191c82bed5f45b36d40ebe42387a77c Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 17 Sep 2024 16:13:51 +0200
Subject: [PATCH] ui fixes

---
 src/routes/earnings-calendar/+page.svelte   |   2 +-
 src/routes/market-news/+layout.svelte       |  92 +++++++++++----
 src/routes/market-news/+page.svelte         |  36 +++---
 src/routes/market-news/general/+page.svelte | 122 ++++++++++++--------
 4 files changed, 164 insertions(+), 88 deletions(-)

diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index 167dfead..ffae28d1 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -461,7 +461,7 @@ $: {
                   <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
+                      Pro Subscription 🔥
                       </h2>
                       <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
                       </div>
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index e31ed8b9..2eb8b7f0 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -3,11 +3,38 @@ import logo from '$lib/images/news_logo.png'
 import ScrollToTop from '$lib/components/ScrollToTop.svelte';
 import ArrowLogo from "lucide-svelte/icons/move-up-right";
 import { goto } from '$app/navigation';
+import { page } from '$app/stores';
 
 export let data;
-let displaySection = 'stock'
 
 
+  function handleMode(i) {
+    activeIdx = i;
+    if(activeIdx === 0) {
+      goto("/market-news")
+    } else if (activeIdx === 1) {
+      goto("/market-news/general")
+    }
+  }
+  
+  const tabs = [
+      {
+        title: "Stock",
+      },
+      {
+        title: "General",
+      },
+    ];
+  
+let activeIdx = 0;
+
+  // Subscribe to the $page store to reactively update the activeIdx based on the URL
+  $: if ($page.url.pathname === '/market-news') {
+    activeIdx = 0;
+  } else if ($page.url.pathname.startsWith('/market-news/general')) {
+    activeIdx = 1;
+  } 
+
 </script>
 
 <!-- HEADER FOR BETTER SEO -->
@@ -86,22 +113,25 @@ let displaySection = 'stock'
   
 
 
-                <div class="w-full mb-2" >
-                  <ul class="pr-4 sm:pr-0 w-full font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
-                    <li class="cursor-pointer flex flex-col items-center text-xl">
-                      <a href='/market-news' on:click={() => displaySection = 'stock'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'stock' ? 'text-white ' : 'bg-[#09090B]'}" >
-                        Stock
-                      </a>
-                      <div class="{displaySection === 'stock' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4.2rem]" />
-                    </li>
-                    <li class="cursor-pointer flex flex-col items-center text-xl">
-                      <a href='/market-news/general' on:click={() => displaySection = 'general'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'general' ? 'text-white ' : 'bg-[#09090B]'}" >
-                        General
-                      </a>
-                      <div class="{displaySection === 'general' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4.2rem]" />
-                    </li>
-                  </ul>
-                </div>
+                <div class="bg-[#313131] w-fit relative mr-auto flex flex-wrap items-center justify-center rounded sm:rounded-lg p-1 -mt-3">
+                    {#each tabs as item, i}
+                    <button
+                        on:click={() => handleMode(i)}
+                        class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                        {#if activeIdx === i}
+                            <div
+                            class="absolute inset-0 rounded-lg bg-purple-600"
+                            ></div>
+                        {/if}
+                        <span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
+                            {item.title}
+                        </span>
+                    </button>
+                    {/each}
+                    </div>
 
 
 
@@ -121,7 +151,7 @@ let displaySection = 'stock'
                   <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
+                      Pro Subscription 🔥
                       </h2>
                       <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
                       </div>
@@ -132,30 +162,44 @@ let displaySection = 'stock'
               </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 on:click={() => goto('/earnings-calendar')} 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">
+                    Earnings Calendar 🌟
+                    </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 Earnings of companies
+                    </span>
+                </div>
+            </div>
+
+              <div on:click={() => goto('/dividends-calendar')} 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">
-                      Wallstreet Analyst
+                      Dividend Calendar 💸
                       </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.
+                          Stay updated on upcoming Dividends in the stock market.
                       </span>
                   </div>
               </div>
 
-              <div on:click={() => goto('/politicians')} 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 on:click={() => goto('/economic-calendar')} 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">
-                      Congress Trading
+                      Economic Events 🌍
                       </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 Congress trading insights.
+                          Stay updated on upcoming Economic Events worldwide.
                       </span>
                   </div>
               </div>
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index 79aa87cc..28d99283 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-import { formatDistanceToNow } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz'
 
-import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+
 import { numberOfUnreadNotification } from '$lib/store';
+import { onMount } from 'svelte';
 
 export let data;
 
@@ -37,17 +36,22 @@ const inputDate = new Date(dateString);
 };
 
 
-async function infiniteHandler({ detail: { loaded, complete } }) 
-{
-  if (news?.length === rawData?.length) {
-      complete();
-    } else {
-      const nextIndex = news?.length;
-      const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
-      news = [...news, ...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 && news?.length !== rawData?.length) {
+        const nextIndex = news?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        news = [...news, ...filteredNewResults];
     }
-}
+  }
+
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
 
 let videoId = null;
 
@@ -117,7 +121,7 @@ function checkIfYoutubeVideo(link) {
                             {:else}
                                 <a href={item.url} target="_blank">
                                 <div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
-                                    <img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
+                                    <img src={item?.image} class="w-screen sm:w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
                                 </div>
                                 </a>
                             {/if}
@@ -137,7 +141,7 @@ function checkIfYoutubeVideo(link) {
                                     {item?.title?.length > 120 ? item?.title?.slice(0,120) +'...' : item?.title}
                                   </a>
                                   <p class="text-white text-sm mt-2">
-                                    {item?.text.length > 100 ? item?.text.slice(0,100) + "..." : item?.text}
+                                    {item?.text?.length > 100 ? item?.text?.slice(0,100) + "..." : item?.text}
                                   </p>
                               </div>
 
@@ -145,8 +149,6 @@ function checkIfYoutubeVideo(link) {
 
                           {/each}
 
-                          <InfiniteLoading on:infinite={infiniteHandler} />
-
   
                       
                       {/if}
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index ad3d8242..8d495350 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -1,50 +1,81 @@
 <script lang="ts">
-    import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-    import { numberOfUnreadNotification } from '$lib/store';
-    import { formatDate } from '$lib/utils';
-    
-    export let data;
-    
-    
-    let rawData = data?.getGeneralNews;
-    let news = rawData.slice(0,15) ?? [];
-    
-    
-    async function infiniteHandler({ detail: { loaded, complete } }) 
-    {
-      if (news?.length === rawData?.length) {
-          complete();
-        } else {
-          const nextIndex = news?.length;
-          const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
-          news = [...news, ...newArticles];
-          loaded();
-        }
-    }
 
-    
-    let videoId = null;
-    
-      
-    function checkIfYoutubeVideo(link) {
-    
-      const url = new URL(link);
-      if (url.hostname === "www.youtube.com") {
-      const searchParams = url.searchParams;
-      searchParams.delete('t'); // Remove the "t" parameter
-      const videoIdMatch = url.search.match(/v=([^&]+)/);
-    
-      if (videoIdMatch) {
-        return videoIdMatch[1];
-      }
-      } else {
-        return null;
-      }
-    
+
+import { numberOfUnreadNotification } from '$lib/store';
+import { onMount } from 'svelte';
+
+export let data;
+
+
+let rawData = data?.getGeneralNews;
+let news = rawData.slice(0,15) ?? [];
+
+const formatDate = (dateString) => {
+// Create a date object for the input dateString
+const inputDate = new Date(dateString);
+  
+  // Create a date object for the current time in New York City
+  const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
+  const currentNYCDate = new Date(nycTime);
+  
+  // Calculate the difference in milliseconds
+  const difference = inputDate.getTime() - currentNYCDate.getTime();
+  
+  // Convert the difference to minutes
+  const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+  
+  if (minutes < 60) {
+    return `${minutes} minutes`;
+  } else if (minutes < 1440) {
+    const hours = Math.round(minutes / 60);
+    return `${hours} hour${hours !== 1 ? 's' : ''}`;
+  } else {
+    const days = Math.round(minutes / 1440);
+    return `${days} day${days !== 1 ? 's' : ''}`;
+  }
+};
+
+
+ async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && news?.length !== rawData?.length) {
+        const nextIndex = news?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        news = [...news, ...filteredNewResults];
     }
-    
-    
-    </script>
+  }
+
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
+let videoId = null;
+
+
+function checkIfYoutubeVideo(link) {
+
+  const url = new URL(link);
+  if (url.hostname === "www.youtube.com") {
+  const searchParams = url.searchParams;
+  searchParams?.delete('t'); // Remove the "t" parameter
+  const videoIdMatch = url?.search?.match(/v=([^&]+)/);
+
+  if (videoIdMatch) {
+    return videoIdMatch[1];
+  }
+  } else {
+    return null;
+  }
+
+}
+
+
+</script>
+
     
 <svelte:head>
 
@@ -92,7 +123,7 @@
                             {:else}
                                 <a href={item?.url} target="_blank">
                                 <div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
-                                    <img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
+                                    <img src={item?.image} class="w-screen sm:w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
                                 </div>
                                 </a>
                             {/if}
@@ -114,7 +145,6 @@
 
                           {/each}
 
-                          <InfiniteLoading on:infinite={infiniteHandler} />