From 19f645bbc1c719906c92643490d2ee4302486da8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 15 Dec 2024 15:46:19 +0100
Subject: [PATCH] update market news page

---
 src/routes/market-news/+layout.svelte         |  22 ++-
 src/routes/market-news/+page.server.ts        |   4 +-
 src/routes/market-news/+page.svelte           |  40 +++--
 .../market-news/general/+page.server.ts       |   4 +-
 src/routes/market-news/general/+page.svelte   |  32 ++--
 .../press-releases/+page.server.ts            |  25 +++
 .../market-news/press-releases/+page.svelte   | 158 ++++++++++++++++++
 7 files changed, 241 insertions(+), 44 deletions(-)
 create mode 100644 src/routes/market-news/press-releases/+page.server.ts
 create mode 100644 src/routes/market-news/press-releases/+page.svelte

diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index 3df8eb34..9eb61fb9 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -7,13 +7,17 @@
 
   const tabs = [
     {
-      title: "Stock",
+      title: "All Stocks",
       path: "/market-news",
     },
     {
-      title: "General",
+      title: "Market",
       path: "/market-news/general",
     },
+    {
+      title: "Press Releases",
+      path: "/market-news/press-releases",
+    },
   ];
 
   let activeIdx = 0;
@@ -23,6 +27,8 @@
     activeIdx = 0;
   } else if ($page.url.pathname.startsWith("/market-news/general")) {
     activeIdx = 1;
+  } else if ($page.url.pathname.startsWith("/market-news/press-releases")) {
+    activeIdx = 2;
   }
 </script>
 
@@ -49,18 +55,20 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
-            Stock Market News
+            {activeIdx === 0
+              ? "All Stocks News"
+              : activeIdx === 1
+                ? "Market News"
+                : "Press Releases"}
           </h1>
 
           <nav class=" border-b-[2px] overflow-x-scroll whitespace-nowrap">
-            <ul
-              class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
-            >
+            <ul class="flex flex-row items-center w-full text-lg text-white">
               {#each tabs as item, i}
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
                     : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   {item.title}
diff --git a/src/routes/market-news/+page.server.ts b/src/routes/market-news/+page.server.ts
index 4303e6ad..caf95068 100644
--- a/src/routes/market-news/+page.server.ts
+++ b/src/routes/market-news/+page.server.ts
@@ -1,5 +1,5 @@
 export const load = async ({ locals }) => {
-  const getMarketNews = async () => {
+  const getData = async () => {
     const { apiURL, apiKey } = locals;
     const postData = { newsType: "stock-news" };
     // make the POST request to the endpoint
@@ -19,6 +19,6 @@ export const load = async ({ locals }) => {
 
   // Make sure to return a promise
   return {
-    getMarketNews: await getMarketNews(),
+    getData: await getData(),
   };
 };
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index ac7d20ea..c2278b85 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -4,7 +4,7 @@
 
   export let data;
 
-  let rawData = data?.getMarketNews;
+  let rawData = data?.getData;
   let news = rawData.slice(0, 15) ?? [];
 
   const formatDate = (dateString) => {
@@ -73,35 +73,29 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
-    Stock Market News and Breaking Stories · Stocknear
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} All
+    Stock News · Stocknear
   </title>
   <meta
     name="description"
-    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
+    content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
   />
 
   <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`Today's Stock Market News and Breaking Stories · Stocknear`}
-  />
+  <meta property="og:title" content={`All Stock News · Stocknear`} />
   <meta
     property="og:description"
-    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
+    content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`Today's Stock Market News and Breaking Stories · Stocknear`}
-  />
+  <meta name="twitter:title" content={`All Stock News · Stocknear`} />
   <meta
     name="twitter:description"
-    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
+    content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
@@ -152,16 +146,18 @@
                         <div class="flex-shrink-0 m-auto">
                           <img
                             src={item?.image}
-                            class="h-auto w-full"
+                            class="h-full w-full object-cover rounded"
                             alt="news image"
                             loading="lazy"
                           />
                         </div>
                       </a>
+
                       <div class="w-full">
-                        <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
+                        <h3 class="text-sm text-white/80 truncate mb-2">
                           {formatDate(item?.publishedDate)} ago · {item?.site}
                         </h3>
+
                         <a
                           href={item?.url}
                           rel="noopener noreferrer"
@@ -175,12 +171,22 @@
                               : item?.text}
                           </p>
                         </a>
+                        <div class=" mt-2 text-white">
+                          <span>Stocks:</span>
+
+                          <a
+                            href={"/stocks/" + item?.symbol}
+                            class="px-2.5 text-sm py-0.5 rounded-md bg-white bg-opacity-[0.1] sm:hover:bg-opacity-[0.2] ml-1"
+                          >
+                            {item?.symbol}
+                          </a>
+                        </div>
                       </div>
                     </div>
                   {/if}
                 </div>
 
-                <hr class="border-gray-800 w-full m-auto mt-5 mb-5" />
+                <hr class="border-gray-600 w-full m-auto mt-3 mb-5" />
               {/each}
             {/if}
           </div>
diff --git a/src/routes/market-news/general/+page.server.ts b/src/routes/market-news/general/+page.server.ts
index 4e8917c0..098239a5 100644
--- a/src/routes/market-news/general/+page.server.ts
+++ b/src/routes/market-news/general/+page.server.ts
@@ -1,5 +1,5 @@
 export const load = async ({ locals }) => {
-  const getGeneralNews = async () => {
+  const getData = async () => {
     const { apiURL, apiKey } = locals;
     const postData = { newsType: "general-news" };
 
@@ -20,6 +20,6 @@ export const load = async ({ locals }) => {
 
   // Make sure to return a promise
   return {
-    getGeneralNews: await getGeneralNews(),
+    getData: await getData(),
   };
 };
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index 79b3e1c4..dbefac38 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -4,7 +4,7 @@
 
   export let data;
 
-  let rawData = data?.getGeneralNews;
+  let rawData = data?.getData;
   let news = rawData.slice(0, 15) ?? [];
 
   const formatDate = (dateString) => {
@@ -74,21 +74,21 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
-    General News and Breaking Stories · Stocknear
+    Stock Market News and Breaking Stories · Stocknear
   </title>
   <meta
     name="description"
-    content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
+    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
   />
 
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`Today's General News and Breaking Stories · Stocknear`}
+    content={`Today's Stock Market News and Breaking Stories · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
+    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -97,11 +97,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`Today's General News and Breaking Stories · Stocknear`}
+    content={`Today's Stock Market News and Breaking Stories · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
+    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
@@ -112,13 +112,13 @@
       <main>
         <div class="w-full m-auto">
           <div class="grid grid-cols-1 gap-y-3">
-            {#if news?.length !== 0}
+            {#if news.length !== 0}
               {#each news as item}
                 <div class="w-full flex flex-col bg-[#09090B] m-auto">
                   {#if (videoId = checkIfYoutubeVideo(item?.url))}
                     <div class="w-full mb-4">
                       <h3 class="text-sm text-white/80 mb-2">
-                        {formatDate(item?.datetime * 1000)} ago · {item?.source}
+                        {formatDate(item?.publishedDate)} ago · {item?.site}
                       </h3>
                       <a
                         href={item?.url}
@@ -126,9 +126,9 @@
                         target="_blank"
                         class="text-lg sm:text-xl font-bold text-white"
                       >
-                        {item?.headline}
+                        {item?.title}
                         <p class="text-white text-sm font-normal">
-                          {item?.summary}
+                          {item?.text}
                         </p>
                       </a>
                     </div>
@@ -160,7 +160,7 @@
                       </a>
                       <div class="w-full">
                         <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
-                          {formatDate(item?.datetime * 1000)} ago · {item?.source}
+                          {formatDate(item?.publishedDate)} ago · {item?.site}
                         </h3>
                         <a
                           href={item?.url}
@@ -168,11 +168,11 @@
                           target="_blank"
                           class="text-lg sm:text-xl font-bold text-white"
                         >
-                          {item?.headline}
+                          {item?.title}
                           <p class="text-white text-sm mt-2 font-normal">
-                            {item?.summary?.length > 200
-                              ? item?.summary?.slice(0, 200) + "..."
-                              : item?.summary}
+                            {item?.text?.length > 200
+                              ? item?.text?.slice(0, 200) + "..."
+                              : item?.text}
                           </p>
                         </a>
                       </div>
diff --git a/src/routes/market-news/press-releases/+page.server.ts b/src/routes/market-news/press-releases/+page.server.ts
new file mode 100644
index 00000000..a8950daa
--- /dev/null
+++ b/src/routes/market-news/press-releases/+page.server.ts
@@ -0,0 +1,25 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiURL, apiKey } = locals;
+    const postData = { newsType: "press-news" };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/market-news", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};
diff --git a/src/routes/market-news/press-releases/+page.svelte b/src/routes/market-news/press-releases/+page.svelte
new file mode 100644
index 00000000..207e3de7
--- /dev/null
+++ b/src/routes/market-news/press-releases/+page.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { numberOfUnreadNotification } from "$lib/store";
+  import { onMount } from "svelte";
+
+  export let data;
+
+  let rawData = data?.getData;
+  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];
+    }
+  }
+
+  onMount(async () => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Press
+    Releases From Publicly Traded Companies · Stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`TPress Releases From Publicly Traded Companies · Stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`TPress Releases From Publicly Traded Companies · Stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full overflow-hidden m-auto mt-10">
+  <div class="flex justify-center w-full m-auto overflow-hidden">
+    <div class="relative flex justify-center items-center overflow-hidden">
+      <main>
+        <div class="w-full m-auto">
+          <div class="grid grid-cols-1 gap-y-3">
+            {#if news.length !== 0}
+              {#each news as item}
+                <div class="w-full flex flex-col bg-[#09090B] m-auto">
+                  <div class="w-full flex flex-col sm:flex-row">
+                    <a
+                      href={item?.url}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3"
+                    >
+                      <div class="flex-shrink-0 m-auto">
+                        <img
+                          src={item?.image}
+                          class="h-full w-full object-cover rounded"
+                          alt="news image"
+                          loading="lazy"
+                        />
+                      </div>
+                    </a>
+
+                    <div class="w-full">
+                      <h3 class="text-sm text-white/80 truncate mb-2">
+                        {formatDate(item?.publishedDate)} ago · {item?.site}
+                      </h3>
+
+                      <a
+                        href={item?.url}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        class="text-lg sm:text-xl font-bold text-white"
+                      >
+                        {item?.title}
+                        <p class="text-white text-sm mt-2 font-normal">
+                          {item?.text?.length > 200
+                            ? item?.text?.slice(0, 200) + "..."
+                            : item?.text}
+                        </p>
+                      </a>
+                      <div class=" mt-2 text-white">
+                        <span>Stocks:</span>
+
+                        <a
+                          href={"/stocks/" + item?.symbol}
+                          class="px-2.5 text-sm py-0.5 rounded-md bg-white bg-opacity-[0.1] sm:hover:bg-opacity-[0.2] ml-1"
+                        >
+                          {item?.symbol}
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <hr class="border-gray-600 w-full m-auto mt-3 mb-5" />
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</section>