From f3607066e652f5ad68570a12bd1aecab5354557a Mon Sep 17 00:00:00 2001 From: Iain Collins Date: Sun, 27 Oct 2024 15:32:19 +0000 Subject: [PATCH] Refactor how commodity filter options are persisted Removed persisting options via localStorage and moved it to URL state. This is more ephemeral, but is a less confusing user experience, and still allows links to views to be easily shared. It's far from perfect and I expect to refine it further - and the render and network behaviour needs optimisation. --- components/commodity-export-orders.js | 10 +- components/commodity-import-orders.js | 10 +- components/nearby-commodity-exporters.js | 35 +----- components/nearby-commodity-importers.js | 35 +----- components/tab-options/commodities.js | 141 +++++++++------------- lib/auth.js | 2 +- pages/cmdr.js | 2 +- pages/commodity/[commodity-name]/index.js | 111 ++++++++--------- 8 files changed, 111 insertions(+), 235 deletions(-) diff --git a/components/commodity-export-orders.js b/components/commodity-export-orders.js index 9c55419..fa22a75 100644 --- a/components/commodity-export-orders.js +++ b/components/commodity-export-orders.js @@ -18,14 +18,6 @@ async function getExportsForCommodityBySystem (systemName, commodityName) { } export default ({ commodities }) => { - const [hideDistanceColumn, setHideDistanceColumn] = useState() - - useEffect(() => { - setHideDistanceColumn((!window.localStorage?.getItem('locationFilter') || parseInt(window.localStorage?.getItem('distanceFilter')) === 1)) - }, [commodities]) - - if (hideDistanceColumn === undefined) return - return ( { render: (v, r) => ( <> {v} - {hideDistanceColumn === false && {Number.isInteger(r.distance) ? <>{r.distance.toLocaleString()} ly : ''}} + {Number.isInteger(r.distance) && {Number.isInteger(r.distance) ? <>{r.distance.toLocaleString()} ly : ''}} ) }, diff --git a/components/commodity-import-orders.js b/components/commodity-import-orders.js index 0287684..95b360d 100644 --- a/components/commodity-import-orders.js +++ b/components/commodity-import-orders.js @@ -18,14 +18,6 @@ async function getImportsForCommodityBySystem (systemName, commodityName) { } export default ({ commodities }) => { - const [hideDistanceColumn, setHideDistanceColumn] = useState() - - useEffect(() => { - setHideDistanceColumn((!window.localStorage?.getItem('locationFilter') || parseInt(window.localStorage?.getItem('distanceFilter')) === 1)) - }, [commodities]) - - if (hideDistanceColumn === undefined) return - return (
{ render: (v, r) => ( <> {v} - {hideDistanceColumn === false && {Number.isInteger(r.distance) ? <>{r.distance.toLocaleString()} ly : ''}} + {Number.isInteger(r.distance) && {Number.isInteger(r.distance) ? <>{r.distance.toLocaleString()} ly : ''}} ) }, diff --git a/components/nearby-commodity-exporters.js b/components/nearby-commodity-exporters.js index 9c3d0b3..4b91657 100644 --- a/components/nearby-commodity-exporters.js +++ b/components/nearby-commodity-exporters.js @@ -4,35 +4,12 @@ import Table from 'rc-table' import { timeBetweenTimestamps } from 'lib/utils/dates' import TradeBracketIcon from './trade-bracket' import StationIcon from './station-icon' -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' const MAX_ROWS_TO_DISPLAY = 10 async function getNearbyExportersOfCommodity (systemName, commodityName) { let url = `${API_BASE_URL}/v1/system/name/${systemName}/commodity/name/${commodityName}/nearby/exports` - const options = [] - - /* - const lastUpdatedFilterValue = window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT - const minVolumeFilterValue = window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT - const fleetCarrierFilterValue = window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT - - options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) - options.push(`minVolume=${minVolumeFilterValue}`) - if (fleetCarrierFilterValue === 'excluded') options.push('fleetCarriers=false') - if (fleetCarrierFilterValue === 'only') options.push('fleetCarriers=true') - */ - - if (options.length > 0) { - url += `?${options.join('&')}` - } - - // TODO const res = await fetch(url) return await res.json() } @@ -48,16 +25,6 @@ export default ({ commodity }) => { })() }, [commodity.commodityName, commodity.systemName]) - useEffect(() => { - const eventHandler = async () => { - setNearbyExporters( - (await getNearbyExportersOfCommodity(commodity.systemName, commodity.symbol)).slice(0, MAX_ROWS_TO_DISPLAY) - ) - } - window.addEventListener('CommodityFilterChangeEvent', eventHandler) - return () => window.removeEventListener('CommodityFilterChangeEvent', eventHandler) - }, []) - return ( <> {!nearbyExporters &&
} diff --git a/components/nearby-commodity-importers.js b/components/nearby-commodity-importers.js index 23b5f1a..6fcc11b 100644 --- a/components/nearby-commodity-importers.js +++ b/components/nearby-commodity-importers.js @@ -4,35 +4,12 @@ import Table from 'rc-table' import { timeBetweenTimestamps } from 'lib/utils/dates' import TradeBracketIcon from './trade-bracket' import StationIcon from './station-icon' -import { - API_BASE_URL, - // COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT, - // COMMODITY_FILTER_FLEET_CARRIER_DEFAULT, - // COMMODITY_FILTER_MIN_VOLUME_DEFAULT, - NO_DEMAND_TEXT -} from 'lib/consts' +import { API_BASE_URL, NO_DEMAND_TEXT } from 'lib/consts' const MAX_ROWS_TO_DISPLAY = 10 async function getNearbyImportersOfCommodity (systemName, commodityName) { let url = `${API_BASE_URL}/v1/system/name/${systemName}/commodity/name/${commodityName}/nearby/imports` - const options = [] - - /* - const lastUpdatedFilterValue = window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT - const minVolumeFilterValue = window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT - const fleetCarrierFilterValue = window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT - - options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) - options.push(`minVolume=${minVolumeFilterValue}`) - if (fleetCarrierFilterValue === 'excluded') options.push('fleetCarriers=false') - if (fleetCarrierFilterValue === 'only') options.push('fleetCarriers=true') - */ - - if (options.length > 0) { - url += `?${options.join('&')}` - } - const res = await fetch(url) return await res.json() } @@ -48,16 +25,6 @@ export default ({ commodity }) => { })() }, [commodity.commodityName, commodity.systemName]) - useEffect(() => { - const eventHandler = async () => { - setNearbyImporters( - (await getNearbyImportersOfCommodity(commodity.systemName, commodity.symbol)).slice(0, MAX_ROWS_TO_DISPLAY) - ) - } - window.addEventListener('CommodityFilterChangeEvent', eventHandler) - return () => window.removeEventListener('CommodityFilterChangeEvent', eventHandler) - }, []) - return ( <> {!nearbyImporters &&
} diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js index 7f23386..7d5594e 100644 --- a/components/tab-options/commodities.js +++ b/components/tab-options/commodities.js @@ -19,15 +19,39 @@ const DEFAULT_LOCATION_OPTIONS = ['Any location', 'Core Systems', 'Colonia Regio export default ({ disabled = false }) => { const router = useRouter() const componentMounted = useRef(false) - const [lastUpdatedFilter, setLastUpdatedFilter] = useState(window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT) - const [fleetCarrierFilter, setFleetCarrierFilter] = useState(window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT) - const [minVolumeFilter, setMinVolumeFilter] = useState(window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT) - const [locationFilter, setLocationFilter] = useState(window.localStorage?.getItem('locationFilter') ?? COMMODITY_FILTER_LOCATION_DEFAULT) - const [distanceFilter, setDistanceFilter] = useState(window.localStorage?.getItem('distanceFilter') ?? COMMODITY_FILTER_DISTANCE_DEFAULT) + const [lastUpdatedFilter, setLastUpdatedFilter] = useState() + const [minVolumeFilter, setMinVolumeFilter] = useState() + const [fleetCarrierFilter, setFleetCarrierFilter] = useState() + const [locationFilter, setLocationFilter] = useState() + const [distanceFilter, setDistanceFilter] = useState() + + function updateUrlWithFilterOptions (router) { + const commodityName = window.location?.pathname?.replace(/\/(importers|exporters)$/, '').replace(/.*\//, '') + + let activeTab = 'importers' + if (window?.location?.pathname?.endsWith('exporters')) activeTab = 'exporters' + + let url = `/commodity/${commodityName}/${activeTab}` + const options = [] + options.push(`maxDaysAgo=${lastUpdatedFilter}`) + options.push(`minVolume=${minVolumeFilter}`) + options.push(`fleetCarriers=${fleetCarrierFilter}`) + if (locationFilter && locationFilter !== COMMODITY_FILTER_LOCATION_DEFAULT) { + options.push(`location=${encodeURIComponent(locationFilter)}`) + if (distanceFilter) { + options.push(`maxDistance=${distanceFilter}`) + } + } + + if (options.length > 0) { + url += `?${options.join('&')}` + } + + router.push(url) + } useEffect(() => { if (componentMounted.current === true) { - window.dispatchEvent(new CustomEvent('CommodityFilterChangeEvent')) updateUrlWithFilterOptions(router) } else { componentMounted.current = true @@ -35,35 +59,21 @@ export default ({ disabled = false }) => { }, [lastUpdatedFilter, fleetCarrierFilter, minVolumeFilter, locationFilter, distanceFilter]) useEffect(() => { - if (router.query?.maxDaysAgo && parseInt(router.query.maxDaysAgo) !== parseInt(lastUpdatedFilter)) { - setLastUpdatedFilter(router.query.maxDaysAgo) - window.localStorage.setItem('lastUpdatedFilter', router.query.maxDaysAgo) - } - if (router.query?.fleetCarriers && router.query.fleetCarriers !== parseInt(fleetCarrierFilter)) { - setFleetCarrierFilter(router.query.fleetCarriers) - window.localStorage.setItem('fleetCarrierFilter', router.query.fleetCarriers) - } - if (router.query?.minVolume && parseInt(router.query.minVolume) !== parseInt(minVolumeFilter)) { - setMinVolumeFilter(router.query.minVolume) - window.localStorage.setItem('minVolumeFilter', router.query.minVolume) - } - if (router.query?.location && router.query.location !== locationFilter) { - setLocationFilter(router.query.location.trim()) - window.localStorage.setItem('locationFilter', router.query.location.trim()) - document.getElementById('location').value = router.query.location.trim() - } - if (router.query?.maxDistance && parseInt(router.query.maxDaysAgo) !== parseInt(distanceFilter)) { - setDistanceFilter(router.query.maxDistance) - window.localStorage.setItem('distanceFilter', router.query.maxDistance) - } + setLastUpdatedFilter(router.query?.maxDaysAgo ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT) + setMinVolumeFilter(router.query?.minVolume ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT) + setFleetCarrierFilter(router.query?.fleetCarriers ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT) + setLocationFilter(router.query?.location ?? COMMODITY_FILTER_LOCATION_DEFAULT) + setDistanceFilter(router.query?.maxDistance ?? COMMODITY_FILTER_DISTANCE_DEFAULT) }, [router.query]) return (
-
{ + { e.preventDefault() document.activeElement.blur() - }}> + }} + > @@ -141,32 +148,26 @@ export default ({ disabled = false }) => { const locationValue = value if (locationValue === '' || locationValue === COMMODITY_FILTER_LOCATION_DEFAULT) { e.target.value = '' - window.localStorage.removeItem('distanceFilter') setDistanceFilter(COMMODITY_FILTER_DISTANCE_DEFAULT) setLocationFilter(COMMODITY_FILTER_LOCATION_DEFAULT) - window.localStorage.removeItem('locationFilter') } else { let newLocationValue = locationValue if (locationValue === 'Core Systems') { newLocationValue = 'Sol' e.target.value = newLocationValue - window.localStorage.setItem('distanceFilter', 500) setDistanceFilter(500) } else if (locationValue === 'Colonia Region') { newLocationValue = 'Colonia' e.target.value = newLocationValue - window.localStorage.setItem('distanceFilter', 100) setDistanceFilter(100) } else { e.target.value = value // trimmed value if (distanceFilter === COMMODITY_FILTER_DISTANCE_DEFAULT) { setDistanceFilter(COMMODITY_FILTER_DISTANCE_WITH_LOCATION_DEFAULT) - window.localStorage.setItem('distanceFilter', COMMODITY_FILTER_DISTANCE_WITH_LOCATION_DEFAULT) } document.getElementById('location-list').innerHTML = '' } setLocationFilter(newLocationValue) - window.localStorage.setItem('locationFilter', newLocationValue) } } }} @@ -211,10 +212,9 @@ export default ({ disabled = false }) => { disabled={disabled || locationFilter === COMMODITY_FILTER_LOCATION_DEFAULT || locationFilter === ZERO_WIDTH_SPACE} value={distanceFilter} onChange={(e) => { - setDistanceFilter(e.target.value) ; (e.target.value === COMMODITY_FILTER_DISTANCE_DEFAULT) - ? window.localStorage.removeItem('distanceFilter') - : window.localStorage.setItem('distanceFilter', parseInt(e.target.value)) + ? setDistanceFilter(undefined) + : setDistanceFilter(e.target.value) }} > @@ -244,11 +244,6 @@ export default ({ disabled = false }) => { setMinVolumeFilter(COMMODITY_FILTER_MIN_VOLUME_DEFAULT) setLocationFilter(COMMODITY_FILTER_LOCATION_DEFAULT) setDistanceFilter(COMMODITY_FILTER_DISTANCE_DEFAULT) - window.localStorage.removeItem('lastUpdatedFilter') - window.localStorage.removeItem('fleetCarrierFilter') - window.localStorage.removeItem('minVolumeFilter') - window.localStorage.removeItem('locationFilter') - window.localStorage.removeItem('distanceFilter') }} > Reset @@ -265,31 +260,3 @@ async function findSystemsByName (systemName) { const res = await fetch(`${API_BASE_URL}/v1/search/system/name/${systemName}/`) return await res.json() } - -function updateUrlWithFilterOptions (router) { - const commodityName = window.location?.pathname?.replace(/\/(importers|exporters)$/, '').replace(/.*\//, '') - - let activeTab = 'importers' - if (window?.location?.pathname?.endsWith('exporters')) activeTab = 'exporters' - - let url = `/commodity/${commodityName}/${activeTab}` - const options = [] - - const lastUpdatedFilterValue = window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT - const minVolumeFilterValue = window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT - const fleetCarrierFilterValue = window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT - const locationFilterValue = window.localStorage?.getItem('locationFilter') ?? null - const distanceFilterValue = window.localStorage?.getItem('distanceFilter') ?? null - - options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) - options.push(`minVolume=${minVolumeFilterValue}`) - options.push(`fleetCarriers=${fleetCarrierFilterValue}`) - if (locationFilterValue !== null) options.push(`systemName=${encodeURIComponent(locationFilterValue)}`) - if (distanceFilterValue !== null) options.push(`maxDistance=${distanceFilterValue}`) - - if (options.length > 0) { - url += `?${options.join('&')}` - } - - return router.push(url) -} diff --git a/lib/auth.js b/lib/auth.js index e22029d..ef294a7 100644 --- a/lib/auth.js +++ b/lib/auth.js @@ -25,5 +25,5 @@ async function isSignedIn () { module.exports = { getAccessToken, getCsrfToken, - isSignedIn, + isSignedIn } diff --git a/pages/cmdr.js b/pages/cmdr.js index 77f8098..fe54a15 100644 --- a/pages/cmdr.js +++ b/pages/cmdr.js @@ -5,7 +5,7 @@ import { NavigationContext } from 'lib/context' import { getCmdrInfo } from 'lib/cmdr' import hexToAscii from 'lib/utils/hex-to-ascii' import Layout from 'components/layout' -import { SIGN_IN_URL, SIGN_OUT_URL, } from 'lib/consts' +import { SIGN_IN_URL, SIGN_OUT_URL } from 'lib/consts' export default () => { const [signedIn, setSignedIn] = useState() diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js index aeff72d..06ebf09 100644 --- a/pages/commodity/[commodity-name]/index.js +++ b/pages/commodity/[commodity-name]/index.js @@ -16,7 +16,9 @@ import { API_BASE_URL, COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT, COMMODITY_FILTER_FLEET_CARRIER_DEFAULT, - COMMODITY_FILTER_MIN_VOLUME_DEFAULT + COMMODITY_FILTER_MIN_VOLUME_DEFAULT, + COMMODITY_FILTER_LOCATION_DEFAULT, + COMMODITY_FILTER_DISTANCE_DEFAULT } from 'lib/consts' const TABS = ['default', 'importers', 'exporters'] @@ -136,12 +138,6 @@ export default () => { })() }, [router.query]) - useEffect(() => { - const commodityFilterChangeEvent = () => getImportsAndExports() - window.addEventListener('CommodityFilterChangeEvent', commodityFilterChangeEvent) - return () => window.removeEventListener('CommodityFilterChangeEvent', commodityFilterChangeEvent) - }, []) - return ( { className='clear' onSelect={ (newTabIndex) => { - router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}`) + router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${window.location.search}`) } } > @@ -180,8 +176,7 @@ export default () => { {tabIndex === 1 && <>Importers of {commodity.name}} {tabIndex === 2 && <>Exporters of {commodity.name}} - {(tabIndex === 1) ? : ''} - {(tabIndex === 2) ? : ''} + {(tabIndex !== 0) ? : ''}
@@ -297,18 +292,18 @@ export default () => {

} - {!commodity?.rare && - - - } + {!commodity?.rare && + + + + }
  -
    -
  • Where to sell {commodity.name}
    • -
  • Where to buy {commodity.name}
    • -
-
  +
    +
  • Where to sell {commodity.name}
    • +
  • Where to buy {commodity.name}
    • +
+
- {!imports &&
} @@ -330,51 +325,13 @@ async function getCommodity (commodityName) { } async function getExports (commodityName) { - let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/exports` - const options = [] - - const lastUpdatedFilterValue = window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT - const minVolumeFilterValue = window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT - const fleetCarrierFilterValue = window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT - const locationFilterValue = window.localStorage?.getItem('locationFilter') ?? null - const distanceFilterValue = window.localStorage?.getItem('distanceFilter') ?? null - - options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) - options.push(`minVolume=${minVolumeFilterValue}`) - if (fleetCarrierFilterValue === 'excluded') options.push('fleetCarriers=false') - if (fleetCarrierFilterValue === 'only') options.push('fleetCarriers=true') - if (locationFilterValue !== null) options.push(`systemName=${encodeURIComponent(locationFilterValue)}`) - if (distanceFilterValue !== null) options.push(`maxDistance=${distanceFilterValue}`) - - if (options.length > 0) { - url += `?${options.join('&')}` - } - + let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/exports?${apiQueryOptions()}` const res = await fetch(url) return await res.json() } async function getImports (commodityName) { - let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/imports` - const options = [] - - const lastUpdatedFilterValue = window.localStorage?.getItem('lastUpdatedFilter') ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT - const minVolumeFilterValue = window.localStorage?.getItem('minVolumeFilter') ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT - const fleetCarrierFilterValue = window.localStorage?.getItem('fleetCarrierFilter') ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT - const locationFilterValue = window.localStorage?.getItem('locationFilter') ?? null - const distanceFilterValue = window.localStorage?.getItem('distanceFilter') ?? null - - options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) - options.push(`minVolume=${minVolumeFilterValue}`) - if (fleetCarrierFilterValue === 'excluded') options.push('fleetCarriers=false') - if (fleetCarrierFilterValue === 'only') options.push('fleetCarriers=true') - if (locationFilterValue !== null) options.push(`systemName=${encodeURIComponent(locationFilterValue)}`) - if (distanceFilterValue !== null) options.push(`maxDistance=${distanceFilterValue}`) - - if (options.length > 0) { - url += `?${options.join('&')}` - } - + let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/imports?${apiQueryOptions()}` const res = await fetch(url) return await res.json() } @@ -398,3 +355,37 @@ const TabDescription = ({ children }) => {
) } + +function apiQueryOptions () { + // Parse current query string and convert the params to an API query parametrer string + const options = [] + + const query = parseQueryString() + const lastUpdatedFilterValue = query?.maxDaysAgo ?? COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT + const minVolumeFilterValue = query?.minVolume ?? COMMODITY_FILTER_MIN_VOLUME_DEFAULT + const fleetCarrierFilterValue = query?.fleetCarriers ?? COMMODITY_FILTER_FLEET_CARRIER_DEFAULT + const locationFilterValue = query?.location ?? COMMODITY_FILTER_LOCATION_DEFAULT + const distanceFilterValue = query?.maxDistance ?? COMMODITY_FILTER_DISTANCE_DEFAULT + + options.push(`maxDaysAgo=${lastUpdatedFilterValue}`) + options.push(`minVolume=${minVolumeFilterValue}`) + if (fleetCarrierFilterValue === 'excluded') options.push('fleetCarriers=false') + if (fleetCarrierFilterValue === 'only') options.push('fleetCarriers=true') + if (locationFilterValue && locationFilterValue !== COMMODITY_FILTER_LOCATION_DEFAULT) { + options.push(`systemName=${encodeURIComponent(locationFilterValue)}`) + if (distanceFilterValue && distanceFilterValue !== COMMODITY_FILTER_DISTANCE_DEFAULT) { + options.push(`maxDistance=${distanceFilterValue}`) + } + } + + return options.join('&') +} + +function parseQueryString () { + const obj = {} + window.location.search.replace( + new RegExp('([^?=&]+)(=([^&]*))?', 'g'), + ($0, $1, $2, $3) => { obj[$1] = decodeURIComponent($3) } + ) + return obj +};