Add filter options to station import/export lists, improve UX

iaincollins · Sep 7, 2024 · 00019cd · 00019cd
1 parent 576e54e
commit 00019cd
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 66 deletions.
diff --git a/components/nearby-commodity-exporters.js b/components/nearby-commodity-exporters.js
@@ -46,6 +46,16 @@ 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 && <div className='loading-bar' style={{ marginTop: 0, marginBottom: '1rem' }} />}

diff --git a/components/nearby-commodity-importers.js b/components/nearby-commodity-importers.js
@@ -46,6 +46,16 @@ 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 && <div className='loading-bar' style={{ marginTop: 0 }} />}

diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
@@ -5,22 +5,22 @@ import {
   COMMODITY_FILTER_MIN_VOLUME_DEFAULT
 } from 'lib/consts'
 
-export default ({ onChange }) => {
+export default () => {
   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)
 
   useEffect(() => {  
     if (componentMounted.current === true) {
-      if (onChange) onChange()
+      window.dispatchEvent(new CustomEvent('CommodityFilterChangeEvent'))
     } else {
       componentMounted.current = true 
     }
   }, [lastUpdatedFilter, fleetCarrierFilter, minVolumeFilter])
 
   return (
-    <div className='tab-optionss'>
+    <div className='tab-options'>
       <form onSubmit={(e) => e.preventDefault()}>
         <label>
           Updated
@@ -31,9 +31,9 @@ export default ({ onChange }) => {
               : window.localStorage.setItem('lastUpdatedFilter', e.target.value)
           }}>
             <option value='1'>Today</option>
-            <option value='7'>In the last week</option>
-            <option value='30'>In the last month</option>
-            <option value='90'>In the last 3 months</option>
+            <option value='7'>In last week</option>
+            <option value='30'>In last month</option>
+            <option value='90'>In last 3 months</option>
             <option value='1000'>Anytime</option>
           </select>
         </label>
@@ -53,17 +53,17 @@ export default ({ onChange }) => {
         </label>
 
         <label>
-          Minimum Quantity
+          Quantity
           <select name='selector' value={minVolumeFilter} onChange={(e) => {
             setMinVolumeFilter(e.target.value)
             ;(e.target.value == COMMODITY_FILTER_MIN_VOLUME_DEFAULT)
               ? window.localStorage.removeItem('minVolumeFilter')
               : window.localStorage.setItem('minVolumeFilter', e.target.value)
           }}>
-            <option value='1'>No minimum</option>
-            <option value='100'>100 T</option>
-            <option value='1000'>1,000 T</option>
-            <option value='10000'>10,000 T</option>
+            <option value='1'>Any amount</option>
+            <option value='100'>&gt; 100 T</option>
+            <option value='1000'>&gt; 1,000 T</option>
+            <option value='10000'>&gt; 10,000 T</option>
           </select>
         </label>
       </form>

diff --git a/css/components/tabs.css b/css/components/tabs.css
@@ -115,7 +115,7 @@
   z-index: 2;
 }
 
-.tab-optionss {
+.tab-options {
   position: relative;
   z-index: 2;
   background: var(--color-primary);
@@ -127,25 +127,31 @@
   overflow: auto;
 }
 
-.tab-optionss form label {
+.tab-options form label {
   margin-right: 1.5rem;
 }
 
-.tab-optionss form input,
-.tab-optionss form select {
-  background: var(--color-primary);
-  border-color: rgba(0,0,0, .25);
-  color: rgb(0,0,0);
+.tab-options form input,
+.tab-options form select {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-dark);
+  color: var(--color-text-inverted);
   border-style: solid;
-  border-width: .1rem;
-  border-radius: 0.1rem;
+  border-width: .15rem;
+  border-radius: 0.2rem;
   padding: .25rem;
   margin-left: .5rem;
   font-size: 1rem;
   font-family: "Jura", sans-serif;
 }
 
-.tab-optionss form input[type="checkbox"] {
+.tab-options form input:hover,
+.tab-options form select:hover {
+  background: var(--color-primary-lighter);
+  border-color: var(--color-primary-darker);
+}
+
+.tab-options form input[type="checkbox"] {
   margin-left: 0;
   margin-right: .5rem;
 }
diff --git a/css/responsive/mobile.css b/css/responsive/mobile.css
@@ -90,7 +90,7 @@
   }
 
 
-  .tab-optionss form label {
+  .tab-options form label {
     display: block;
     margin-top: .5rem;
   }

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

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -9,7 +9,7 @@ import CommodityImportOrders from 'components/commodity-import-orders'
 import CommodityExportOrders from 'components/commodity-export-orders'
 import { getAllCommodities } from 'lib/commodities'
 import animateTableEffect from 'lib/animate-table-effect'
-import { 
+import {
   API_BASE_URL,
   COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
   COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
@@ -20,6 +20,7 @@ export default () => {
   const router = useRouter()
   const [tabIndex, setTabIndex] = useState(0)
   const [commodity, setCommodity] = useState()
+  const [updating, setUpdating] = useState(false)
   const [exports, setExports] = useState()
   const [imports, setImports] = useState()
 
@@ -31,47 +32,49 @@ export default () => {
     if (basePath === 'exporters') setTabIndex(1)
   }, [router.pathname])
 
-  async function getImportsAndExports() {
-    const commodityName = router.query?.['commodity-name']
+  async function getImportsAndExports(arg) {
+    const commodityName = window.location?.pathname?.replace(/.*\//, '')
     if (!commodityName) return
+    setUpdating(true)
 
-      setExports(undefined)
-      setImports(undefined)
+    const imports = await getImports(commodityName)
+    imports.forEach(c => {
+      c.key = c.commodityId
+      c.avgProfit = c.avgSellPrice - c.avgBuyPrice
+      c.avgProfitMargin = Math.floor((c.avgProfit / c.avgBuyPrice) * 100)
+      c.maxProfit = c.maxSellPrice - c.minBuyPrice
+      c.symbol = c.commodityName.toLowerCase()
+      c.category = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.category ?? ''
+      c.name = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.name ?? c.commodityName
+      c.rare = ((getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.market_id)
+      delete c.commodityId
+      delete c.commodityName
+    })
+    setImports(imports)
 
-      const imports = await getImports(commodityName)
-      imports.forEach(c => {
-        c.key = c.commodityId
-        c.avgProfit = c.avgSellPrice - c.avgBuyPrice
-        c.avgProfitMargin = Math.floor((c.avgProfit / c.avgBuyPrice) * 100)
-        c.maxProfit = c.maxSellPrice - c.minBuyPrice
-        c.symbol = c.commodityName.toLowerCase()
-        c.category = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.category ?? ''
-        c.name = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.name ?? c.commodityName
-        c.rare = ((getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.market_id)
-        delete c.commodityId
-        delete c.commodityName
-      })
-      setImports(imports)
+    const exports = await getExports(commodityName)
+    exports.forEach(c => {
+      c.key = c.commodityId
+      c.avgProfit = c.avgSellPrice - c.avgBuyPrice
+      c.avgProfitMargin = Math.floor((c.avgProfit / c.avgBuyPrice) * 100)
+      c.maxProfit = c.maxSellPrice - c.minBuyPrice
+      c.symbol = c.commodityName.toLowerCase()
+      c.category = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.category ?? ''
+      c.name = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.name ?? c.commodityName
+      c.rare = ((getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.market_id)
+      delete c.commodityId
+      delete c.commodityName
+    })
+    setExports(exports)
 
-      const exports = await getExports(commodityName)
-      exports.forEach(c => {
-        c.key = c.commodityId
-        c.avgProfit = c.avgSellPrice - c.avgBuyPrice
-        c.avgProfitMargin = Math.floor((c.avgProfit / c.avgBuyPrice) * 100)
-        c.maxProfit = c.maxSellPrice - c.minBuyPrice
-        c.symbol = c.commodityName.toLowerCase()
-        c.category = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.category ?? ''
-        c.name = (getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.name ?? c.commodityName
-        c.rare = ((getAllCommodities().find(el => el.symbol.toLowerCase() === c.symbol))?.market_id)
-        delete c.commodityId
-        delete c.commodityName
-      })
-      setExports(exports)
+    setUpdating(false)
   }
 
   useEffect(() => {
-    (async() => {
+    (async () => {
       setCommodity(undefined)
+      setExports(undefined)
+      setImports(undefined)
 
       const commodityName = router.query?.['commodity-name']
       if (!commodityName) return
@@ -96,11 +99,16 @@ export default () => {
     })()
   }, [router.query['commodity-name']])
 
+  useEffect(() => {
+    window.addEventListener('CommodityFilterChangeEvent', getImportsAndExports)
+    return () => window.removeEventListener(`CommodityFilterChangeEvent`, getImportsAndExports)
+  }, [])
+
   return (
-    <Layout loading={commodity === undefined || imports === undefined}>
+    <Layout loading={commodity === undefined || imports === undefined || updating}>
       <ul className='breadcrumbs fx__fade-in' onClick={(e) => {
-          if (e.target.tagName == 'LI') e.target.children[0].click()
-        }}>
+        if (e.target.tagName == 'LI') e.target.children[0].click()
+      }}>
         <li><Link href='/'>Home</Link></li>
         <li><Link href='/commodities'>Commodities</Link></li>
       </ul>
@@ -133,7 +141,7 @@ export default () => {
                           {' '}
                           <small>({commodity.minSellPrice.toLocaleString()} - {commodity.maxSellPrice.toLocaleString()} CR)</small>
                         </>
-                        )
+                      )
                       : <span className='muted'>Insufficent data</span>}
                   </span>
                 </td>
@@ -149,7 +157,7 @@ export default () => {
                           {' '}
                           <small>({commodity.minBuyPrice.toLocaleString()} - {commodity.maxBuyPrice.toLocaleString()} CR)</small>
                         </>
-                        )
+                      )
                       : <span className='muted'>Insufficent data</span>}
                   </span>
                 </td>
@@ -214,7 +222,7 @@ export default () => {
                 <Tab>Importers</Tab>
                 <Tab>Exporters</Tab>
               </TabList>
-              <CommodityTabOptions onChange={() => getImportsAndExports()}/>
+              <CommodityTabOptions />
               <TabPanel>
                 {!imports && <div className='loading-bar loading-bar--tab' />}
                 {imports && <CommodityImportOrders commodities={imports} />}
@@ -229,12 +237,12 @@ export default () => {
   )
 }
 
-async function getCommodity (commodityName) {
+async function getCommodity(commodityName) {
   const res = await fetch(`${API_BASE_URL}/v1/commodity/name/${commodityName}`)
   return (res.status === 200) ? await res.json() : null
 }
 
-async function getExports (commodityName) {
+async function getExports(commodityName) {
   let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/exports`
   let options = []
 
@@ -255,7 +263,7 @@ async function getExports (commodityName) {
   return await res.json()
 }
 
-async function getImports (commodityName) {
+async function getImports(commodityName) {
   let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/imports`
   let options = []
 

diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
@@ -15,6 +15,7 @@ import LocalCommodityImporters from 'components/local-commodity-importers'
 import LocalCommodityExporters from 'components/local-commodity-exporters'
 import NearbyCommodityImporters from 'components/nearby-commodity-importers'
 import NearbyCommodityExporters from 'components/nearby-commodity-exporters'
+import CommodityTabOptions from 'components/tab-options/commodities'
 import StationIcon from 'components/station-icon'
 import getSystemExports from 'lib/system-exports'
 import getSystemImports from 'lib/system-imports'
@@ -340,6 +341,7 @@ export default () => {
                 <span className='is-visible-mobile'>Near</span>
               </Tab>
             </TabList>
+            {tabIndex !== 2 && <CommodityTabOptions/>}
             <TabPanel>
               {!importOrders && <div className='loading-bar loading-bar--tab' />}
               {importOrders &&