From e37f4fd64845e0cc0007703fca1512db9c81c6a5 Mon Sep 17 00:00:00 2001 From: Iain Collins Date: Sun, 27 Oct 2024 16:22:18 +0000 Subject: [PATCH] Optimise to reduce number of API requests Minor, slightly hacky, change that signficiantly reduces the number of network requests made by avoiding unintended duplicate requests for the same data. This "should" be resolved by refactoring the component logic and cleaning up the code, but that's a lot of work for little to no performance gain, and would probably introduce new bugs (until they were squashed) and there are more intersting features to work on. --- components/header.js | 2 +- components/tab-options/commodities.js | 2 +- package.json | 2 +- pages/commodity/[commodity-name]/index.js | 29 +++++++++++++++++++---- 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/components/header.js b/components/header.js index 8499be0..19de844 100644 --- a/components/header.js +++ b/components/header.js @@ -88,7 +88,7 @@ export default () => { {newsTicker.map(item => router.push(`/commodity/${item.commodityName}/${item.demandBracket === 3 ? 'importers' : 'exporters'}?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&location=${item.systemName}&maxDistance=1`)} + onClick={() => router.push(`/commodity/${item.commodityName}/${item.demandBracket === 3 ? 'importers' : 'exporters'}?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}&location=${item.systemName}&maxDistance=1`)} > {item.stationName}, {item.systemName}
diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js index 7d5594e..9450dcf 100644 --- a/components/tab-options/commodities.js +++ b/components/tab-options/commodities.js @@ -240,8 +240,8 @@ export default ({ disabled = false }) => { onClick={() => { document.getElementById('location').value = '' setLastUpdatedFilter(COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT) - setFleetCarrierFilter(COMMODITY_FILTER_FLEET_CARRIER_DEFAULT) setMinVolumeFilter(COMMODITY_FILTER_MIN_VOLUME_DEFAULT) + setFleetCarrierFilter(COMMODITY_FILTER_FLEET_CARRIER_DEFAULT) setLocationFilter(COMMODITY_FILTER_LOCATION_DEFAULT) setDistanceFilter(COMMODITY_FILTER_DISTANCE_DEFAULT) }} diff --git a/package.json b/package.json index f243d37..fe791ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ardent-www", - "version": "0.90.0", + "version": "0.91.0", "description": "Ardent Industry", "main": "index.js", "scripts": { diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js index 06ebf09..adebbf0 100644 --- a/pages/commodity/[commodity-name]/index.js +++ b/pages/commodity/[commodity-name]/index.js @@ -26,6 +26,7 @@ const TABS = ['default', 'importers', 'exporters'] export default () => { const router = useRouter() const [navigationPath, setNavigationPath] = useContext(NavigationContext) + const [cachedQuery, setCachedQuery] = useState() const [tabIndex, setTabIndex] = useState(0) const [commodity, setCommodity] = useState() const [exports, setExports] = useState() @@ -53,10 +54,10 @@ export default () => { const commodityName = window.location.pathname.split('/')[2] if (!commodityName) return - const queryType = window.location.pathname.split('/')[3]?.toLowerCase() - if (!queryType) return + const activeTabName = window.location.pathname.split('/')[3]?.toLowerCase() + if (!activeTabName) return - if (queryType === 'importers') { + if (activeTabName === 'importers') { setImports(undefined) ;(async () => { const imports = await getImports(commodityName) @@ -78,7 +79,7 @@ export default () => { })() } - if (queryType === 'exporters') { + if (activeTabName === 'exporters') { setExports(undefined) ; (async () => { const exports = await getExports(commodityName) @@ -106,6 +107,19 @@ export default () => { const commodityName = router.query?.['commodity-name'] if (!commodityName) return + // Compare current tab (i.e. Importers, Exporters) and query options + // If they have not actually changed then avoid triggering a redraw. + const activeTabName = window.location.pathname.split('/')[3]?.toLowerCase() + if (activeTabName) { + const cacheFingerprint = JSON.stringify({ activeTabName, query: router.query }) + if (cachedQuery && cachedQuery === cacheFingerprint) { + return // If query has not changed, we don't need to do anything + } else { + // If query really has changed then update the cached query + setCachedQuery(cacheFingerprint) + } + } + setImports(undefined) setExports(undefined) @@ -162,7 +176,12 @@ export default () => { className='clear' onSelect={ (newTabIndex) => { - router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${window.location.search}`) + // Explicitly specifying default query string options makes identifying + // a query cache hit easier (and helps avoid unnecessary network requests) + const queryString = window.location.search + ? window.location.search + : `?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}` + router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${queryString}`) } } >