smooth watchlist

src/routes/stocks/[tickerID]/+layout.svelte

@@ -112,32 +112,51 @@ function handleTypeOfTrade(state:string)
   async function toggleUserWatchlist(watchListId: string) {
     try {
       const watchlistIndex = userWatchList?.findIndex((item) => item?.id === watchListId);
-    const postData = {
-      'userId': data?.user?.id,
-      'watchListId': watchListId,
-      'ticker': $stockTicker,
-      'path': 'update-watchlist'
-    };
 
-    const response = await fetch('/api/fastify-post-data', {
+      
-      method: 'POST',
+      if (watchlistIndex !== -1) {
-      headers: {
+          const tickerIndex = userWatchList[watchlistIndex]?.ticker?.indexOf($stockTicker);
-         "Content-Type": "application/json"
+          
-      },
+          if (tickerIndex !== -1) {
-      body: JSON.stringify(postData),
+              // Remove the ticker if it exists
-    });
+              userWatchList[watchlistIndex]?.ticker?.splice(tickerIndex, 1);
+          } else {
+              // Add the ticker if it doesn't exist
+              userWatchList[watchlistIndex]?.ticker?.push($stockTicker);
+          }
+      } else {
+        userWatchList.push({'title': 'Favorites', 'ticker': [$stockTicker]});
+      }
+
+
+      const postData = {
+        'userId': data?.user?.id,
+        'watchListId': watchListId,
+        'ticker': $stockTicker,
+        'path': 'update-watchlist'
+      };
+
+      const response = await fetch('/api/fastify-post-data', {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(postData),
+      });
 
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
 
       const output = (await response.json())?.items;
-
+      /*
       if (watchlistIndex !== -1) {
         userWatchList[watchlistIndex] = output;
       } else {
         userWatchList.push(output);
       }
+        */
+
 
       userWatchList = [...userWatchList];
       isTickerIncluded = !isTickerIncluded;
@@ -829,11 +848,10 @@ function handleTypeOfTrade(state:string)
                   <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"
                     ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
                       <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc>
-                      <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                         <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
                           <path
                             d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
-                            id="🎨-Color"
                           >
                           </path>
                         </g>