fix: comparison init on refresh

GODrums · Feb 22, 2025 · d4489c9 · d4489c9
1 parent 7f11b45
commit d4489c9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 35 deletions.
diff --git a/src/contents/csfloat_script.ts b/src/contents/csfloat_script.ts
@@ -637,7 +637,7 @@ async function adjustItem(container: Element, popout = POPOUT_ITEM.NONE) {
 		if (extensionSettings['csf-floatcoloring']) {
 			addFloatColoring(container, apiItem);
 		}
-		patternDetections(container, apiItem, false);
+		await patternDetections(container, apiItem, false);
 
 		if (location.pathname !== '/sell') {
 			if (extensionSettings['csf-listingage']) {

diff --git a/src/lib/handlers/networkhandler.ts b/src/lib/handlers/networkhandler.ts
@@ -1,8 +1,7 @@
 import { ExtensionStorage } from '~lib/util/storage';
 
 import { sendToBackground } from '@plasmohq/messaging';
-import type { GetBlueSalesBody } from '~background/messages/getBlueSales';
-import type { BlueGem, Extension } from '../@typings/ExtensionTypes';
+import type { Extension } from '../@typings/ExtensionTypes';
 import { cacheRealCurrencyRates } from './mappinghandler';
 
 let isCurrencyFetched = false;

diff --git a/src/lib/handlers/urlhandler.tsx b/src/lib/handlers/urlhandler.tsx
@@ -52,29 +52,24 @@ export function dynamicUIHandler() {
 		}
 	});
 
+	const callHandleChange = async (url: URL) => {
+		const state: Extension.URLState = {
+			site: url.hostname,
+			path: url.pathname,
+			search: url.search,
+			hash: url.hash,
+		};
+		await handleChange(state);
+	};
+
 	// dmarket is a bit special and needs an additional listener
 	if (location.hostname === 'dmarket.com') {
-		createUrlListener((newUrl) => {
-			handleChange({
-				site: newUrl.hostname,
-				path: newUrl.pathname,
-				search: newUrl.search,
-				hash: newUrl.hash,
-			});
-		}, 1500);
+		createUrlListener(callHandleChange, 1500);
 	}
 
-	setTimeout(async () => {
-		const state: Extension.URLState = {
-			site: location.hostname,
-			path: location.pathname,
-			search: location.search,
-			hash: location.hash,
-		};
-		await handleChange(state);
-	}, 1500);
+	callHandleChange(new URL(location.href));
 
-	setTimeout(showUpdatePopup, 3000);
+	// setTimeout(showUpdatePopup, 3000);
 }
 
 async function showUpdatePopup() {
@@ -153,30 +148,26 @@ async function handleCSFloatChange(state: Extension.URLState) {
 	}
 
 	const showMarketComparison = await ExtensionStorage.sync.get<boolean>('csf-marketcomparison');
-	if (showMarketComparison && state.path.includes('/item/') && !document.querySelector('betterfloat-market-comparison')) {
+	if (showMarketComparison && state.path.includes('/item/')) {
+		if (document.querySelector('betterfloat-market-comparison')) {
+			// wait for the new dialog to replace the old one
+			await new Promise((resolve) => setTimeout(resolve, 500));
+		}
 		const success = await waitForElement('div.full-screen-dialog .container');
 		if (!success) return;
 		const popup = document.querySelector<HTMLElement>('div.full-screen-dialog');
 		const container = popup?.querySelector<HTMLElement>('.container');
 		if (popup && container) {
 			popup.style.width = Number(popup.style.width.substring(0, popup.style.width.length - 2)) + 230 + 'px';
 			container.style.gridTemplateColumns = '250px 1fr 210px 210px';
-			const root = await mountShadowRoot(<CSFMarketComparison />, {
+			await mountShadowRoot(<CSFMarketComparison />, {
 				tagName: 'betterfloat-market-comparison',
 				parent: container,
 			});
 			const ownContainer = document.querySelector<HTMLElement>('betterfloat-market-comparison');
 			if (ownContainer) {
 				ownContainer.style.gridRow = '1 / span 2';
 			}
-			// unmount on url change
-			const interval = createUrlListener((url) => {
-				if (!url.pathname.includes('/item/')) {
-					root.unmount();
-					document.querySelector('betterfloat-market-comparison')?.remove();
-					clearInterval(interval);
-				}
-			}, 1000);
 		}
 	}
 

diff --git a/src/lib/inline/CSFMarketComparison.tsx b/src/lib/inline/CSFMarketComparison.tsx
@@ -194,10 +194,9 @@ const CSFMarketComparison: React.FC = () => {
 				}))
 				.filter((entry) => entry.market !== 'liquidity');
 
-			console.log('User:', user);
 			// Filter markets for free users
 			if (user?.plan.type !== 'pro') {
-				convertedData = convertedData.filter((entry) => entry.market === MarketSource.Buff || entry.market === MarketSource.YouPin);
+				convertedData = convertedData.filter((entry) => entry.market === MarketSource.Buff || entry.market === MarketSource.Steam);
 			}
 
 			if (isBannedOnBuff(listing?.item)) {
@@ -222,7 +221,8 @@ const CSFMarketComparison: React.FC = () => {
 	const initData = async () => {
 		setCurrency(localStorage.getItem('selected_currency') || 'USD');
 
-		const itemContainer = document.querySelector('mat-dialog-container item-detail');
+		const itemId = location.pathname.split('/').pop();
+		const itemContainer = document.querySelector(`.item-${itemId}`);
 		let betterfloatData = itemContainer?.getAttribute('data-betterfloat');
 		while (!betterfloatData) {
 			await new Promise((resolve) => setTimeout(resolve, 200));
@@ -234,12 +234,14 @@ const CSFMarketComparison: React.FC = () => {
 	};
 
 	useEffect(() => {
+		console.log('User:', user);
 		if (user) {
 			initData();
 		}
 	}, [user]);
 
 	useEffect(() => {
+		console.log('Listing:', listing);
 		if (listing && marketData.length === 0) {
 			fetchMarketData()
 				.catch((error) => {
@@ -275,7 +277,7 @@ const CSFMarketComparison: React.FC = () => {
 							</div>
 						)}
 					</div>
-					<ScrollArea className="w-full h-[80vh] [--border:227_100%_88%_/_0.07]">
+					<ScrollArea className="w-full h-[90vh] [--border:227_100%_88%_/_0.07]">
 						{listing && marketData.map((dataEntry) => <MarketCard key={dataEntry.market} listing={listing} entry={dataEntry} currency={currency} />)}
 						{user?.plan.type !== 'pro' && (
 							<div className="text-[--subtext-color] mt-2 bg-[--highlight-background-minimal] rounded-md">