From f36d9efdc33c953906f3dbbb229262e174f77f73 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 17 Jan 2025 21:35:00 +0100
Subject: [PATCH] ui fixes

---
 .../[tickerID]/dividends/+layout.svelte       | 19 +++++++++++++------
 .../stocks/[tickerID]/dividends/+page.svelte  | 19 ++++++++++++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/dividends/+layout.svelte b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
index aceec04e..d45d6f36 100644
--- a/src/routes/stocks/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import { stockTicker } from "$lib/store";
 
   export let data;
+  let similarStocks;
 
-  const similarStocks = data?.getSimilarStocks?.sort(
-    (a, b) => b?.dividendYield - a?.dividendYield,
-  );
+  $: {
+    if ($stockTicker) {
+      similarStocks = data?.getSimilarStocks?.sort(
+        (a, b) => b?.dividendYield - a?.dividendYield,
+      );
+    }
+  }
 </script>
 
 <section class="w-auto overflow-hidden min-h-screen">
@@ -42,9 +47,11 @@
                     <tr class="border-gray-800 border-b text-[1rem]"
                       ><td class="text-left text-[1rem]"
                         ><a
-                          href={`/stocks/${item?.symbol}`}
+                          href={`/stocks/${item?.symbol}/dividends`}
                           class="sm:hover:text-white text-blue-400"
-                          >{item?.symbol}</a
+                          >{item?.name?.length > 30
+                            ? item?.name?.slice(0, 30) + "..."
+                            : item?.name}</a
                         ></td
                       >
                       <td class="text-right cursor-normal text-[1rem]"
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 4aeac41e..e7200094 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -8,8 +8,7 @@
 
   export let data;
   let dateDistance;
-  let rawData = data?.getStockDividend;
-  let optionsDividend;
+  let rawData = data?.getStockDividend || [];
 
   let exDividendDate = rawData?.history?.at(0)?.date;
   let dividendYield = rawData?.dividendYield;
@@ -73,7 +72,21 @@
     }
   }
 
-  const htmlOutput = generateDividendInfoHTML();
+  let htmlOutput = generateDividendInfoHTML();
+
+  $: {
+    if ($stockTicker) {
+      rawData = data?.getStockDividend || [];
+      exDividendDate = rawData?.history?.at(0)?.date;
+      dividendYield = rawData?.dividendYield;
+      annualDividend = rawData?.annualDividend;
+      payoutFrequency = rawData?.payoutFrequency;
+      payoutRatio = rawData?.payoutRatio;
+      dividendGrowth = rawData?.dividendGrowth;
+
+      htmlOutput = generateDividendInfoHTML();
+    }
+  }
 </script>
 
 <svelte:head>