bugfixing

src/lib/utils.ts

@@ -33,30 +33,36 @@ export const  groupNews = (news, watchList) => {
           month: 'short',
           year: 'numeric',
         }).format(new Date(item?.publishedDate));
-
         const titleKey = item.title;
-
         if (!acc[dateKey]) acc[dateKey] = {};
         if (!acc[dateKey][titleKey]) acc[dateKey][titleKey] = [];
-
         acc[dateKey][titleKey]?.push(item);
-
         return acc;
       }, {})
-    )?.map(([date, titleGroup]) => [
+  )
+    // Sort the grouped dates in descending order to have the latest date first
+    ?.sort(([dateA], [dateB]) => new Date(dateB) - new Date(dateA))
+    ?.map(([date, titleGroup]) => [
       date,
-      Object?.entries(titleGroup)?.map(([title, items]) => {
+      Object.entries(titleGroup)
-        // Sort by time for each group
+        // Sort titles by the latest time of their items
-        items?.sort((a, b) => new Date(b?.publishedDate) - new Date(a?.publishedDate));
+        .sort(([, itemsA], [, itemsB]) => {
+          const latestTimeA = new Date(Math.max(...itemsA.map(item => new Date(item.publishedDate))));
+          const latestTimeB = new Date(Math.max(...itemsB.map(item => new Date(item.publishedDate))));
+          return latestTimeB - latestTimeA;
+        })
+        .map(([title, items]) => {
+          // Sort items within each title group by latest time
+          items.sort((a, b) => new Date(b.publishedDate) - new Date(a.publishedDate));
           
           // Get the unique symbols
-        const symbols = [...new Set(items?.map(item => item.symbol))];
+          const symbols = [...new Set(items.map(item => item.symbol))];
           
           // Return the group with symbols and items
           return { title, items, symbols };
         }),
     ]);
-  }
+};
 
 
 export const calculateChange = (oldList?: any[], newList?: any[]) => {

src/routes/watchlist/stocks/+page.svelte

@@ -16,15 +16,26 @@
   let switchWatchlist = false;
   let editMode = false;
   let numberOfChecked = 0;
+  let activeIdx = 0;
+
   let deleteTickerList = [];
 
   let watchList: any[] = [];
 
   let news = [];
-  let groupedNews = {};
+  let groupedNews = [];
   let checkedItems;
   let socket;
 
+  const tabs = [
+    {
+      title: "News",
+    },
+    {
+      title: "Earnings",
+    },
+  ];
+
   let allRows = [
     { name: "Volume", rule: "volume", type: "int" },
     { name: "Avg. Volume", rule: "avgVolume", type: "int" },
@@ -219,6 +230,7 @@
       return match ? { ...item, type: match?.type } : { ...item };
     });
     groupedNews = groupNews(news, watchList);
+    console.log(groupedNews);
   }
 
   async function createWatchList(event) {
@@ -1333,31 +1345,39 @@
                   ></div>
 
                   <div class=" text-white">
-                    <div class="mb-3 flex items-center space-x-2">
+                    <div
-                      <h2
+                      class="inline-flex justify-center w-full rounded-md sm:w-auto mb-3"
-                        class="text-start text-white text-xl sm:text-2xl font-bold"
                     >
-                        News
+                      <div
-                      </h2>
+                        class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
-                      <!--
-                      <button title="Refresh news"
-                        ><svg
-                          class="w-5 h-5 mt-1.5 text-icon"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                          style="max-width:40px"
-                          ><path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                            stroke-width="2"
-                          ></path></svg
-                        ></button
                       >
-                        -->
+                        {#each tabs as item, i}
+                          <button
+                            on:click={() => (activeIdx = i)}
+                            class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                            i
+                              ? 'z-0'
+                              : ''} "
+                          >
+                            {#if activeIdx === i}
+                              <div
+                                class="absolute inset-0 rounded-md bg-[#fff]"
+                              ></div>
+                            {/if}
+                            <span
+                              class="relative text-sm block text-lg font-semibold {activeIdx ===
+                              i
+                                ? 'text-black'
+                                : 'text-white'}"
+                            >
+                              {item.title}
+                            </span>
+                          </button>
+                        {/each}
+                      </div>
                     </div>
 
+                    {#if groupedNews?.length > 0}
                       {#each groupedNews as [date, titleGroups]}
                         <h3 class="mb-1.5 mt-3 font-semibold text-faded">
                           {date}
@@ -1376,7 +1396,9 @@
                                   hour12: true,
                                 })}
                               </div>
-                            <div class="flex-grow px-3 py-2 lg:py-1">
+                              <div
+                                class="flex-grow px-3 py-2 lg:py-1 border-t border-gray-700"
+                              >
                                 <a
                                   href={items[0].url}
                                   target="_blank"
@@ -1419,6 +1441,12 @@
                           {/each}
                         </div>
                       {/each}
+                    {:else}
+                      <span class="text-sm sm:text-[1rem]">
+                        No news yet. Add some stocks to the watchlist to see the
+                        latest news.
+                      </span>
+                    {/if}
                   </div>
                 </div>
               {:else}