From 271867b5efed372fcf72d4a306a6aa046720ace8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 14 Nov 2024 22:44:19 +0100
Subject: [PATCH] update sentiment tracker

---
 src/lib/components/Searchbar.svelte       |   1 -
 src/lib/components/Table/Table.svelte     |  26 +++
 src/routes/sentiment-tracker/+page.svelte | 215 +++-------------------
 3 files changed, 51 insertions(+), 191 deletions(-)

diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index 4ddbada6..a5eec3e1 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -127,7 +127,6 @@
       );
       searchBarData = await response?.json();
     }, 50); // delay
-    console.log(searchBarData);
   }
 
   const onKeyPress = (e) => {
diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index 891b292f..fa15bda6 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/src/lib/components/Table/Table.svelte
@@ -126,6 +126,7 @@
       rule: "institutionalOwnership",
       type: "percent",
     },
+    { name: "Sentiment", rule: "sentiment", type: "sentiment" },
   ];
 
   const proOnlyItems = new Set(
@@ -689,6 +690,31 @@
                 {:else}
                   -
                 {/if}
+              {:else if column.type === "sentiment"}
+                <div
+                  class={item[column.key] >= 55
+                    ? "text-[#00FC50]"
+                    : item[column.key] >= 50
+                      ? "text-[#E57C34]"
+                      : "text-[#FF2F1F]"}
+                >
+                  <div class="flex flex-row items-center justify-end">
+                    <div class="">
+                      {item[column.key] >= 80
+                        ? "Very Bullish"
+                        : item[column.key] >= 55
+                          ? "Bullish"
+                          : item[column.key] > 50
+                            ? "Mixed"
+                            : "Bearish"}
+                    </div>
+                    <div
+                      class="ml-2 px-1.5 py-1.5 border text-center rounded-lg text-xs font-semibold"
+                    >
+                      {item[column.key]}
+                    </div>
+                  </div>
+                </div>
               {:else}
                 {item[column.key]}
               {/if}
diff --git a/src/routes/sentiment-tracker/+page.svelte b/src/routes/sentiment-tracker/+page.svelte
index dfad1d1b..017e70f6 100644
--- a/src/routes/sentiment-tracker/+page.svelte
+++ b/src/routes/sentiment-tracker/+page.svelte
@@ -1,114 +1,30 @@
 <script lang="ts">
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
+  import { numberOfUnreadNotification } from "$lib/store";
+
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import TableHeader from "$lib/components/Table/TableHeader.svelte";
-  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import Table from "$lib/components/Table/Table.svelte";
 
   export let data;
 
   let rawData = data?.getSentimentTracker ?? [];
-  let stockList = rawData?.slice(0, 50) ?? [];
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "sentiment",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
 
-  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(() => {
-    if (data?.user?.tier === "Pro") {
-      window.addEventListener("scroll", handleScroll);
-      return () => {
-        window.removeEventListener("scroll", handleScroll);
-      };
-    }
-  });
-
-  let columns = [
-    { key: "rank", label: "#", align: "right" },
-    { key: "symbol", label: "Symbol", align: "left" },
-    { key: "name", label: "Name", align: "left" },
-    { key: "marketCap", label: "Market Cap", align: "right" },
-    { key: "price", label: "Price", align: "right" },
-    { key: "changesPercentage", label: "% Change", align: "right" },
-    { key: "sentiment", label: "Sentiment", align: "right" },
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Sentiment", rule: "sentiment" },
   ];
 
-  let sortOrders = {
-    rank: { order: "none", type: "number" },
-    symbol: { order: "none", type: "string" },
-    name: { order: "none", type: "string" },
-    marketCap: { order: "none", type: "number" },
-    price: { order: "none", type: "number" },
-    changesPercentage: { order: "none", type: "number" },
-    sentiment: { order: "none", type: "number" },
-  };
-
-  const sortData = (key) => {
-    // Reset all other keys to 'none' except the current key
-    for (const k in sortOrders) {
-      if (k !== key) {
-        sortOrders[k].order = "none";
-      }
-    }
-
-    // Cycle through 'none', 'asc', 'desc' for the clicked key
-    const orderCycle = ["none", "asc", "desc"];
-
-    let originalData = rawData;
-
-    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
-    sortOrders[key].order =
-      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
-    const sortOrder = sortOrders[key].order;
-
-    // Reset to original data when 'none' and stop further sorting
-    if (sortOrder === "none") {
-      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
-      return;
-    }
-
-    // Define a generic comparison function
-    const compareValues = (a, b) => {
-      const { type } = sortOrders[key];
-      let valueA, valueB;
-
-      switch (type) {
-        case "date":
-          valueA = new Date(a[key]);
-          valueB = new Date(b[key]);
-          break;
-        case "string":
-          valueA = a[key].toUpperCase();
-          valueB = b[key].toUpperCase();
-          return sortOrder === "asc"
-            ? valueA.localeCompare(valueB)
-            : valueB.localeCompare(valueA);
-        case "number":
-        default:
-          valueA = parseFloat(a[key]);
-          valueB = parseFloat(b[key]);
-          break;
-      }
-
-      if (sortOrder === "asc") {
-        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-      } else {
-        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
-      }
-    };
-
-    // Sort using the generic comparison function
-    stockList = [...originalData].sort(compareValues);
-  };
-  $: charNumber = $screenWidth < 640 ? 15 : 40;
+  const hideLastRow = true;
 </script>
 
 <svelte:head>
@@ -180,96 +96,15 @@
             and the most bullish stocks being discussed on Twitter and StockTwits
           </div>
 
-          <div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
-            <div
-              class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
-            >
-              <table
-                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
-              >
-                <thead>
-                  <TableHeader {columns} {sortOrders} {sortData} />
-                </thead>
-                <tbody>
-                  {#each stockList as item, index}
-                    <tr
-                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
-                        1 ===
-                        stockList?.length && data?.user?.tier !== 'Pro'
-                        ? 'opacity-[0.1]'
-                        : ''}"
-                    >
-                      <td
-                        class="text-white text-sm sm:text-[1rem] font-medium text-white text-end"
-                      >
-                        {item?.rank}
-                      </td>
+          <div class="w-full m-auto mt-20 sm:mt-10">
+            <Table
+              {data}
+              {rawData}
+              {excludedRules}
+              {defaultList}
+              {hideLastRow}
+            />
 
-                      <td class="text-sm sm:text-[1rem] text-start">
-                        <HoverStockChart symbol={item?.symbol} />
-                      </td>
-
-                      <td
-                        class="whitespace-nowrap text-white text-sm sm:text-[1rem] text-white text-start"
-                      >
-                        {item?.name?.length > charNumber
-                          ? item?.name?.slice(0, charNumber) + "..."
-                          : item?.name}
-                      </td>
-
-                      <td
-                        class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
-                      >
-                        {abbreviateNumber(item?.marketCap)}
-                      </td>
-
-                      <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                      >
-                        {item?.price}
-                      </td>
-
-                      <td
-                        class="text-sm sm:text-[1rem] whitespace-nowrap {item?.changesPercentage >=
-                        0
-                          ? 'text-[#00FC50]'
-                          : 'text-[#FF2F1F]'} text-end"
-                      >
-                        {item?.changesPercentage > 0
-                          ? "+"
-                          : ""}{item?.changesPercentage}%
-                      </td>
-
-                      <td
-                        class="text-end text-sm sm:text-[1rem] font-medium whitespace-nowrap {item?.sentiment >=
-                        55
-                          ? 'text-[#00FC50]'
-                          : item?.sentiment >= 50
-                            ? 'text-[#E57C34]'
-                            : 'text-[#FF2F1F]'}"
-                      >
-                        <div class="flex flex-row items-center justify-end">
-                          <div class="">
-                            {item?.sentiment >= 80
-                              ? "Very Bullish"
-                              : item?.sentiment >= 55
-                                ? "Bullish"
-                                : item?.sentiment > 50
-                                  ? "Mixed"
-                                  : "Bearish"}
-                          </div>
-                          <div
-                            class="ml-2 px-1.5 py-1.5 border text-center rounded-lg text-xs font-semibold"
-                          >
-                            {item?.sentiment}
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
             <UpgradeToPro
               {data}
               title="Get the latest stock trends from social media to never miss out the next hype"