From f1d70e5d26ccfc85104b27a45fd22aa09fe326c1 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Mon, 23 Dec 2024 23:56:07 +0100 Subject: [PATCH] reverting svelte-4 --- src/lib/components/Searchbar.svelte | 407 ++++++++++++---------------- src/routes/+layout.svelte | 140 +++++----- 2 files changed, 244 insertions(+), 303 deletions(-) diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte index aac5e4ef..2fe29828 100644 --- a/src/lib/components/Searchbar.svelte +++ b/src/lib/components/Searchbar.svelte @@ -3,16 +3,22 @@ import { onMount } from "svelte"; import Search from "lucide-svelte/icons/search"; import { goto } from "$app/navigation"; + import { Combobox } from "bits-ui"; + import { page } from "$app/stores"; + let searchHistory = []; let updatedSearchHistory = []; let searchBarData = []; - + let isLoading = false; let timeoutId; let assetType = ""; let focusedSuggestion = ""; let arrowMovement = false; let showSuggestions = false; - let searchQuery = ""; + let touchedInput = false; + + $: inputValue = ""; + let searchOpen = false; let searchBarModalChecked = false; // Initialize it to false @@ -46,6 +52,12 @@ }, ]; + async function handleSearch( symbol, assetType) { + //event.preventDefault(); + searchBarTicker(symbol); + goto(`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`) + } + async function popularTicker(state) { searchOpen = false; if (!state) return; @@ -80,9 +92,12 @@ !state || !searchBarData?.find((item) => item?.symbol === state?.toUpperCase()) ) { - searchQuery = ""; - const closePopup = document.getElementById("searchBarModal"); - closePopup?.dispatchEvent(new MouseEvent("click")); + inputValue = ""; + if ($screenWidth < 640) { + const closePopup = document.getElementById("searchBarModal"); + closePopup?.dispatchEvent(new MouseEvent("click")); + } + return; } @@ -101,21 +116,24 @@ ...(searchHistory?.filter( (item) => item?.symbol?.toUpperCase() !== upperState, ) || []), - ].slice(0, 5); + ]?.slice(0, 5); } // Close search modal searchOpen = false; - const closePopup = document.getElementById("searchBarModal"); - closePopup?.dispatchEvent(new MouseEvent("click")); + if ($screenWidth < 640) { + const closePopup = document.getElementById("searchBarModal"); + closePopup?.dispatchEvent(new MouseEvent("click")); + } - searchQuery = ""; + inputValue = ""; } async function search() { + isLoading = true; clearTimeout(timeoutId); // Clear any existing timeout - if (!searchQuery.trim()) { + if (!inputValue.trim()) { // Skip if query is empty or just whitespace searchBarData = []; // Clear previous results return; @@ -123,21 +141,22 @@ timeoutId = setTimeout(async () => { const response = await fetch( - `/api/searchbar?query=${encodeURIComponent(searchQuery)}&limit=10`, + `/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`, ); searchBarData = await response?.json(); }, 50); // delay + isLoading = false; } const onKeyPress = (e) => { if (e?.charCode === 13 && searchBarData?.length > 0) { const assetActions = { - ETF: () => goto(`/etf/${searchQuery}`), - Stock: () => goto(`/stocks/${searchQuery}`), - Crypto: () => goto(`/crypto/${searchQuery}`), + ETF: () => goto(`/etf/${inputValue}`), + Stock: () => goto(`/stocks/${inputValue}`), + Crypto: () => goto(`/crypto/${inputValue}`), }; if (!arrowMovement && searchBarData?.length > 0) { - searchQuery = searchBarData.at(0).symbol; + inputValue = searchBarData.at(0).symbol; assetType = searchBarData.at(0).type; } @@ -145,7 +164,7 @@ assetActions[assetType]?.(); // Trigger search bar action - searchBarTicker(searchQuery); + searchBarTicker(inputValue); } }; @@ -161,7 +180,7 @@ : popularList; if (!list?.length) return; - const currentIndex = list.findIndex((item) => item?.symbol === searchQuery); + const currentIndex = list.findIndex((item) => item?.symbol === inputValue); const isMovingDown = event.key === "ArrowDown"; // Check if movement is within bounds @@ -175,16 +194,18 @@ const selectedItem = list[newIndex]; // Update all related states at once - searchQuery = selectedItem?.symbol; + inputValue = selectedItem?.symbol; assetType = selectedItem?.type; focusedSuggestion = selectedItem?.symbol; } + } - const handleControlD = async (event) => { + const handleControlK = async (event) => { if (event.ctrlKey && event.key === "k") { - // Ctrl+F is pressed, open the modal - const keyboardSearch = document.getElementById("searchBarModal"); - keyboardSearch?.dispatchEvent(new MouseEvent("click")); + + //const keyboardSearch = document.getElementById("searchBarModal"); + //keyboardSearch?.dispatchEvent(new MouseEvent("click")); + touchedInput = true; event.preventDefault(); } }; @@ -216,15 +237,14 @@ console.log(e); } - window.addEventListener("keydown", handleControlD); + window.addEventListener("keydown", handleControlK); window.addEventListener("keydown", handleEscape); return () => { - window.removeEventListener("keydown", handleControlD); + window.removeEventListener("keydown", handleControlK); window.removeEventListener("keydown", handleEscape); }; }); - let charNumber = 20; $: { if (searchBarModalChecked === true && typeof window !== "undefined") { @@ -238,7 +258,7 @@ $: { if (searchBarModalChecked === false && typeof window !== "undefined") { - showSuggestions = searchQuery = ""; + showSuggestions = inputValue = ""; document.body.classList?.remove("overflow-hidden"); } } @@ -266,19 +286,113 @@ } } } + + + + + - - - -{#if $screenWidth >= 640} - + +
+ + -
+
+
-{:else} - - - -
- - -
-
- -
-
- - - -
-
- -
- -
- {#if !showSuggestions} -
- {searchHistory?.length > 0 ? "Recent" : "Popular"} -
- {/if} - -
-
- - -
-
-
-{/if} + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 363f15cc..5624df74 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -11,7 +11,6 @@ import Footer from "$lib/components/Footer.svelte"; import Searchbar from "$lib/components/Searchbar.svelte"; import NotificationBell from "$lib/components/NotificationBell.svelte"; - import { goto } from "$app/navigation"; //import PullToRefresh from '$lib/components/PullToRefresh.svelte'; //import DiscountBanner from '$lib/components/DiscountBanner.svelte'; @@ -92,7 +91,7 @@ const output = event.data?.output; notificationList = output?.notificationList; hasUnreadElement = output?.hasUnreadElement; - $numberOfUnreadNotification = output?.numberOfUnreadNotification?.length; + numberOfUnreadNotification.set(output?.numberOfUnreadNotification?.length); //pushNotification() }; @@ -164,7 +163,7 @@ (item?) => !item?.readed, ); hasUnreadElement = numberOfUnreadNotification?.length !== 0 ? true : false; - $numberOfUnreadNotification = numberOfUnreadNotification?.length; + numberOfUnreadNotification.set(numberOfUnreadNotification?.length); } let Cookie; @@ -810,77 +809,78 @@ Stocknear -
- - + - -
- - {#if data?.user} - - - - - - - - My Account - - - - - - - Watchlist - - - - - Price Alert - - - - -
- + + + - Logout + My Account - - -
- - {:else} - - Login - - {/if} + + + + + + Watchlist + + + + + Price Alert + + + + +
+ +
+ + + {:else} + + Login + + {/if} + + + + + + +