update pricing page

src/lib/components/PriceAlert.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">
   import toast from "svelte-french-toast";
-  import {
+  import { openPriceAlert, newPriceAlertData } from "$lib/store";
-    openPriceAlert,
-    displayCompanyName,
-    stockTicker,
-    etfTicker,
-    cryptoTicker,
-    assetType,
-  } from "$lib/store";
 
   export let data;
   export let ticker;
+  export let assetType;
 
   let currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
   let targetPrice = currentPrice; //(currentPrice * (1 + targetPrice / 100))?.toFixed(2);
@@ -32,14 +26,9 @@
 
       const postData = {
         userId: data?.user?.id,
-        symbol:
+        symbol: ticker,
-          $assetType === "stock"
+        name: data?.getStockQuote?.name,
-            ? $stockTicker
+        assetType: assetType,
-            : $assetType === "etf"
-              ? $etfTicker
-              : $cryptoTicker,
-        name: $displayCompanyName,
-        assetType: $assetType,
         priceWhenCreated: currentPrice,
         condition: condition,
         targetPrice: targetPrice,
@@ -54,6 +43,8 @@
         body: JSON.stringify(postData),
       });
 
+      $newPriceAlertData = await response?.json();
+
       //const output = await response.json();
 
       toast.success(`Successfully created price alert`, {

src/lib/store.ts

@@ -122,6 +122,8 @@ export const oauthVerifier = writable(<string>"");
 export const oauthProvider = writable(<string>"");
 
 
+export const newPriceAlertData = writable(<Array<any>>{});
+
 export const cachedPosts = writable(<Array<any>>{});
 export const currentPagePosition = writable(<Number>0);
 export const postVote = writable(<Array<any>>{});

src/routes/api/create-price-alert/+server.ts

@@ -20,11 +20,10 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     
     try {
 
-        await pb.collection("priceAlert")?.create(newAlert)
+        output = await pb.collection("priceAlert")?.create(newAlert)
-        output = 'success';
 
       } catch (err) {
-          output = 'failure'
+          output = {}
       }
 
   return new Response(JSON.stringify(output));

src/routes/api/get-price-alert/+server.ts

@@ -0,0 +1,22 @@
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ locals }) => {
+  const { apiURL, apiKey, user } = locals;
+
+  const postData = { userId: user?.id};
+  const response = await fetch(apiURL + "/get-price-alert", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-API-KEY": apiKey,
+    },
+    body: JSON.stringify(postData),
+  });
+
+  let output = await response.json();
+
+      output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
+
+
+  return new Response(JSON.stringify(output));
+};

src/routes/api/ticker-data/+server.ts

@@ -15,6 +15,5 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   });
 
   const output = await response.json();
-
   return new Response(JSON.stringify(output));
 };

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

@@ -929,7 +929,7 @@
 {/if}
 -->
 
-<PriceAlert {data} ticker={$cryptoTicker} />
+<PriceAlert {data} ticker={$cryptoTicker} assetType={$assetType} />
 
 <!--Start Type of Trade-->
 

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

@@ -11,6 +11,7 @@
     currentPrice,
     priceIncrease,
     etfTicker,
+    assetType,
     displayCompanyName,
     isOpen,
     shouldUpdatePriceChart,
@@ -742,7 +743,7 @@
 <!--End Login Modal-->
 
 <!--Start SellTrade Modal-->
-<PriceAlert {data} ticker={$etfTicker} />
+<PriceAlert {data} ticker={$etfTicker} assetType={$assetType} />
 <!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
 

src/routes/price-alert/+page.server.ts

@@ -17,24 +17,9 @@ export const load = async ({ locals }) => {
     return output;
   };
 
-  const getMiniPlotsIndex = async () => {
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/mini-plots-index", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
   
   // Make sure to return a promise
   return {
-    getMiniPlotsIndex: await getMiniPlotsIndex(),
     getPriceAlert: await getPriceAlert(),
   };
 };

src/routes/price-alert/+page.svelte

@@ -1,138 +1,27 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
+  import { numberOfUnreadNotification, openPriceAlert } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
 
   //import { enhance } from '$app/forms';
   import toast from "svelte-french-toast";
   import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
+  import { screenWidth, newPriceAlertData } from "$lib/store";
-  import MiniPlot from "$lib/components/MiniPlot.svelte";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import { Combobox } from "bits-ui";
+  import PriceAlert from "$lib/components/PriceAlert.svelte";
 
   export let data;
+  let timeoutId;
+  let searchBarData = [];
 
-  const rawData = data?.getMiniPlotsIndex;
+  let addTicker = "";
-
+  let addAssetType = "";
-  function getCurrentDateFormatted() {
-    // Get current date
-    let date = new Date();
-
-    // If today is Saturday or Sunday, move to the previous Friday
-    if (date.getDay() === 6) {
-      // Saturday
-      date.setDate(date.getDate() - 1);
-    } else if (date.getDay() === 0) {
-      // Sunday
-      date.setDate(date.getDate() - 2);
-    }
-
-    // Define months array for formatting
-    const months = [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec",
-    ];
-
-    // Get formatted date components
-    const month = months[date.getMonth()];
-    const day = date.getDate();
-    const year = date.getFullYear();
-
-    // Return formatted date
-    return `${month} ${day}, ${year}`;
-  }
 
   let editMode = false;
   let numberOfChecked = 0;
   let deletePriceAlertList = [];
 
-  let priceDataSP500;
-  let priceDataNasdaq;
-  let priceDataDowJones;
-  let priceDataRussel2000;
-
-  let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
-  let previousCloseSP500,
-    previousCloseNasdaq,
-    previousCloseDowJones,
-    previousCloseRussel2000;
-  // Assign values based on the symbol
-  rawData?.forEach(
-    ({ symbol, priceData, changesPercentage, previousClose }) => {
-      switch (symbol) {
-        case "SPY":
-          priceDataSP500 = priceData?.map(({ time, value }) => ({
-            time: Date?.parse(time),
-            value,
-          }));
-          priceDataSP500 = priceDataSP500?.filter(
-            (item) =>
-              item.value !== 0 &&
-              item.value !== null &&
-              item.value !== undefined,
-          );
-          changeSP500 = changesPercentage;
-          previousCloseSP500 = previousClose;
-          break;
-        case "QQQ":
-          priceDataNasdaq = priceData?.map(({ time, value }) => ({
-            time: Date?.parse(time),
-            value,
-          }));
-          priceDataNasdaq = priceDataNasdaq?.filter(
-            (item) =>
-              item.value !== 0 &&
-              item.value !== null &&
-              item.value !== undefined,
-          );
-          changeNasdaq = changesPercentage;
-          previousCloseNasdaq = previousClose;
-          break;
-        case "DIA":
-          priceDataDowJones = priceData?.map(({ time, value }) => ({
-            time: Date?.parse(time),
-            value,
-          }));
-          priceDataDowJones = priceDataDowJones?.filter(
-            (item) =>
-              item.value !== 0 &&
-              item.value !== null &&
-              item.value !== undefined,
-          );
-          changeDowJones = changesPercentage;
-          previousCloseDowJones = previousClose;
-          break;
-        case "IWM":
-          priceDataRussel2000 = priceData?.map(({ time, value }) => ({
-            time: Date?.parse(time),
-            value,
-          }));
-          priceDataRussel2000 = priceDataRussel2000?.filter(
-            (item) =>
-              item.value !== 0 &&
-              item.value !== null &&
-              item.value !== undefined,
-          );
-          changeRussel2000 = changesPercentage;
-          previousCloseRussel2000 = previousClose;
-          break;
-        default:
-          // Handle unknown symbol
-          break;
-      }
-    },
-  );
-
   let priceAlertList = data?.getPriceAlert;
 
   async function handleFilter(priceAlertId) {
@@ -150,7 +39,7 @@
     numberOfChecked = deletePriceAlertList?.length;
   }
 
-  async function handleDelete() {
+  async function handleDeleteTickers() {
     if (numberOfChecked === 0) {
       toast.error(`You need to select symbols before you can delete them`, {
         style:
@@ -180,7 +69,82 @@
     }
   }
 
+  async function handleAddAlert(event, ticker, assetType) {
+    addTicker = ticker;
+    addAssetType = assetType?.toLowerCase();
+    const postData = {
+      path: "get-quote",
+      ticker: ticker,
+    };
+
+    const response = await fetch("/api/ticker-data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(postData),
+    });
+    const output = await response?.json();
+
+    data.getStockQuote = output;
+
+    const clicked = document.getElementById("priceAlertModal");
+    clicked?.dispatchEvent(new MouseEvent("click"));
+
+    editMode = false;
+    $openPriceAlert = true;
+
+    inputValue = "";
+    event?.preventDefault();
+  }
+
+  async function getPriceAlertList() {
+    const response = await fetch("/api/get-price-alert", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    let output = await response.json();
+    output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
+    priceAlertList = [...output];
+  }
+
   $: charNumber = $screenWidth < 640 ? 15 : 40;
+
+  $: {
+    if (Object?.keys($newPriceAlertData)?.length > 0) {
+      getPriceAlertList();
+    }
+  }
+
+  function handleEditMode() {
+    if (editMode === true) {
+      deletePriceAlertList = [];
+      numberOfChecked = 0;
+    }
+    editMode = !editMode;
+  }
+
+  let inputValue = "";
+  let touchedInput = false;
+
+  async function search() {
+    clearTimeout(timeoutId); // Clear any existing timeout
+
+    if (!inputValue.trim()) {
+      // Skip if query is empty or just whitespace
+      searchBarData = []; // Clear previous results
+      return;
+    }
+
+    timeoutId = setTimeout(async () => {
+      const response = await fetch(
+        `/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`,
+      );
+      searchBarData = await response?.json();
+    }, 50); // delay
+  }
 </script>
 
 <svelte:head>
@@ -236,45 +200,6 @@
             </h1>
           </div>
 
-          <div class="sm:hidden">
-            <div class="text-white text-xs sm:text-sm pb-5 sm:pb-2">
-              Stock Indexes - {getCurrentDateFormatted()}
-            </div>
-
-            <div
-              class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center"
-            >
-              <div
-                class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3"
-              >
-                <MiniPlot
-                  title="S&P500"
-                  priceData={priceDataSP500}
-                  changesPercentage={changeSP500}
-                  previousClose={previousCloseSP500}
-                />
-                <MiniPlot
-                  title="Nasdaq"
-                  priceData={priceDataNasdaq}
-                  changesPercentage={changeNasdaq}
-                  previousClose={previousCloseNasdaq}
-                />
-                <MiniPlot
-                  title="Dow"
-                  priceData={priceDataDowJones}
-                  changesPercentage={changeDowJones}
-                  previousClose={previousCloseDowJones}
-                />
-                <MiniPlot
-                  title="Russel"
-                  priceData={priceDataRussel2000}
-                  changesPercentage={changeRussel2000}
-                  previousClose={previousCloseRussel2000}
-                />
-              </div>
-            </div>
-          </div>
-
           {#if priceAlertList?.length === 0}
             <div class="flex flex-col justify-center items-center m-auto pt-8">
               <span class="text-white font-bold text-white text-xl sm:text-3xl">
@@ -316,11 +241,17 @@
               {/if}
             </div>
           {:else}
-            <div class="flex flex-row justify-end items-center pb-2">
+            <div
+              class="w-full {$screenWidth < 640
+                ? 'grid grid-cols-2'
+                : ''} gap-x-3 gap-y-3 sm:gap-x-0 sm:gap-y-0 relative inline-block text-left w-full flex flex-col sm:flex-row items-center"
+            >
+              <div class="order-4 w-fit flex justify-end sm:ml-3">
+                <div class="flex flex-row items-center justify-end">
                   {#if editMode}
                     <label
-                  on:click={handleDelete}
+                      on:click={handleDeleteTickers}
-                  class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
+                      class="border text-sm border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 pl-3 pr-4 font-semibold text-white bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out sm:hover:text-red-500"
                     >
                       <svg
                         class="inline-block w-5 h-5"
@@ -337,8 +268,8 @@
                     </label>
                   {/if}
                   <label
-                on:click={() => (editMode = !editMode)}
+                    on:click={handleEditMode}
-                class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
+                    class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-[#27272A] ease-out sm:hover:text-red-500"
                   >
                     <svg
                       class="inline-block w-5 h-5"
@@ -353,12 +284,82 @@
                       /></svg
                     >
                     {#if !editMode}
-                  <span class="ml-1 text-white text-sm"> Edit </span>
+                      <span class="ml-1 text-white text-sm sm:text-[1rem]">
+                        Edit Watchlist
+                      </span>
                     {:else}
-                  <span class="ml-1 text-white text-sm"> Cancel </span>
+                      <span class="ml-1 text-white text-sm sm:text-[1rem]">
+                        Cancel
+                      </span>
                     {/if}
                   </label>
                 </div>
+              </div>
+
+              <div class="order-2 sm:order-1 w-full sm:w-fit">
+                <Combobox.Root
+                  items={searchBarData}
+                  bind:inputValue
+                  bind:touchedInput
+                >
+                  <div class="relative sm:ml-3 w-full">
+                    <div
+                      class="absolute inset-y-0 left-0 flex items-center pl-2.5"
+                    >
+                      <svg
+                        class="h-4 w-4 text-icon xs:h-5 xs:w-5"
+                        fill="none"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="3"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        style="max-width: 40px"
+                        aria-hidden="true"
+                      >
+                        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <Combobox.Input
+                      on:input={search}
+                      class="text-sm sm:text-[1rem] controls-input text-white bg-[#09090B] focus:outline-none border border-gray-600 rounded-md placeholder:text-white/80 px-3 py-2 pl-8 xs:pl-10 flex-grow w-full sm:min-w-56 max-w-xs"
+                      placeholder="Add new stock"
+                      aria-label="Add new stock"
+                    />
+                  </div>
+                  {#if inputValue?.length !== 0}
+                    <Combobox.Content
+                      class="w-auto z-10 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none"
+                      sideOffset={8}
+                    >
+                      {#each searchBarData as item}
+                        <Combobox.Item
+                          class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-[#27272A]"
+                          value={item.symbol}
+                          label={item.name}
+                          on:click={(e) =>
+                            handleAddAlert(e, item?.symbol, item?.type)}
+                        >
+                          <div class="flex flex-col items-start">
+                            <span class="text-sm text-blue-400"
+                              >{item?.symbol}</span
+                            >
+                            <span class="text-xs sm:text-sm text-white"
+                              >{item?.name}</span
+                            >
+                          </div>
+                        </Combobox.Item>
+                      {:else}
+                        <span class="block px-5 py-2 text-sm text-white">
+                          No results found
+                        </span>
+                      {/each}
+                    </Combobox.Content>
+                  {/if}
+                </Combobox.Root>
+              </div>
+            </div>
             <!--Start Table-->
             <div
               class="w-full rounded-md overflow-hidden overflow-x-scroll no-scrollbar"
@@ -525,3 +526,5 @@
     </div>
   </div>
 </section>
+
+<PriceAlert {data} ticker={addTicker} assetType={addAssetType} />

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

@@ -973,7 +973,7 @@
 <!--End Login Modal-->
 
 <!--Start SellTrade Modal-->
-<PriceAlert {data} ticker={$stockTicker} />
+<PriceAlert {data} ticker={$stockTicker} assetType={$assetType} />
 
 <!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />