Improve query filter URL behaviour

* Keep URLs shorter when the default filter options applied * Fix encoding bug impacting systems with '+' in their name
iaincollins · Oct 27, 2024 · 11b5cee · 11b5cee
1 parent e37f4fd
commit 11b5cee
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 20 deletions.
diff --git a/components/header.js b/components/header.js
@@ -5,12 +5,7 @@ import AboutDialog from 'components/dialog/about-dialog'
 import { getCommoditiesWithAvgPricing } from 'lib/commodities'
 import commodities from 'lib/commodities/commodities'
 import { NavigationContext } from 'lib/context'
-import {
-  API_BASE_URL,
-  COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
-  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
-  COMMODITY_FILTER_MIN_VOLUME_DEFAULT
-} from 'lib/consts'
+import { API_BASE_URL } from 'lib/consts'
 
 export default () => {
   const router = useRouter()
@@ -88,7 +83,7 @@ export default () => {
             {newsTicker.map(item =>
               <span
                 key={`ticker_${i}_${item.marketId}_${item.commodityName}`} className='news-ticker__ticker-item'
-                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`)}
+                onClick={() => router.push(`/commodity/${item.commodityName}/${item.demandBracket === 3 ? 'importers' : 'exporters'}?location=${encodeURIComponent(item.systemName)}&maxDistance=1`)}
               >
                 <span className='muted'>{item.stationName}, {item.systemName}</span>
                 <br />

diff --git a/components/tab-options/commodities.js → ...onents/tab-options/commodities-options.js b/components/tab-options/commodities.js → ...onents/tab-options/commodities-options.js
@@ -3,8 +3,8 @@ import { useRouter } from 'next/router'
 import {
   API_BASE_URL,
   COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
-  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
   COMMODITY_FILTER_MIN_VOLUME_DEFAULT,
+  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
   COMMODITY_FILTER_LOCATION_DEFAULT,
   COMMODITY_FILTER_DISTANCE_DEFAULT,
   COMMODITY_FILTER_DISTANCE_WITH_LOCATION_DEFAULT
@@ -28,14 +28,21 @@ export default ({ disabled = false }) => {
   function updateUrlWithFilterOptions (router) {
     const commodityName = window.location?.pathname?.replace(/\/(importers|exporters)$/, '').replace(/.*\//, '')
 
-    let activeTab = 'importers'
+    let activeTab = ''
     if (window?.location?.pathname?.endsWith('exporters')) activeTab = 'exporters'
+    if (window?.location?.pathname?.endsWith('importers')) activeTab = 'importers'
 
     let url = `/commodity/${commodityName}/${activeTab}`
     const options = []
-    options.push(`maxDaysAgo=${lastUpdatedFilter}`)
-    options.push(`minVolume=${minVolumeFilter}`)
-    options.push(`fleetCarriers=${fleetCarrierFilter}`)
+    if (lastUpdatedFilter && lastUpdatedFilter !== COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT) {
+      options.push(`maxDaysAgo=${lastUpdatedFilter}`)
+    }
+    if (minVolumeFilter && minVolumeFilter !== COMMODITY_FILTER_MIN_VOLUME_DEFAULT) {
+      options.push(`minVolume=${minVolumeFilter}`)
+    }
+    if (fleetCarrierFilter && fleetCarrierFilter !== COMMODITY_FILTER_FLEET_CARRIER_DEFAULT) {
+      options.push(`fleetCarriers=${fleetCarrierFilter}`)
+    }
     if (locationFilter && locationFilter !== COMMODITY_FILTER_LOCATION_DEFAULT) {
       options.push(`location=${encodeURIComponent(locationFilter)}`)
       if (distanceFilter) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.91.0",
+  "version": "0.92.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import Link from 'next/link'
 import Head from 'next/head'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
-import CommodityTabOptions from 'components/tab-options/commodities'
+import CommodityTabOptions from 'components/tab-options/commodities-options'
 import Layout from 'components/layout'
 import CommodityImportOrders from 'components/commodity-import-orders'
 import CommodityExportOrders from 'components/commodity-export-orders'
@@ -176,12 +176,7 @@ export default () => {
             className='clear'
             onSelect={
               (newTabIndex) => {
-                // 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}`)
+                router.push(`/commodity/${router.query['commodity-name'].toLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${window.location.search}`)
               }
             }
           >