Add filter options for commodities

iaincollins · Sep 7, 2024 · 6d6dc81 · 6d6dc81
1 parent 6c6dd93
commit 6d6dc81
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 83 deletions.
diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
@@ -0,0 +1,72 @@
+import { useState, useEffect, useRef } from 'react'
+import { 
+  COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
+  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
+  COMMODITY_FILTER_MIN_VOLUME_DEFAULT
+} from 'lib/consts'
+
+export default ({ onChange }) => {
+  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()
+    } else {
+      componentMounted.current = true 
+    }
+  }, [lastUpdatedFilter, fleetCarrierFilter, minVolumeFilter])
+
+  return (
+    <div className='tab-optionss'>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <label>
+          Updated
+          <select name='selector' value={lastUpdatedFilter} onChange={(e) => {
+            setLastUpdatedFilter(e.target.value)
+            ;(e.target.value == COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT)
+              ? window.localStorage.removeItem('lastUpdatedFilter')
+              : 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='1000'>Anytime</option>
+          </select>
+        </label>
+
+        <label>
+          Fleet Carriers
+          <select name='selector' value={fleetCarrierFilter} onChange={(e) => {
+            setFleetCarrierFilter(e.target.value)
+            ;(e.target.value == COMMODITY_FILTER_FLEET_CARRIER_DEFAULT)
+              ? window.localStorage.removeItem('fleetCarrierFilter')
+              : window.localStorage.setItem('fleetCarrierFilter', e.target.value)
+          }}>
+            <option value='included'>Included</option>
+            <option value='excluded'>Excluded</option>
+            <option value='only'>Only</option>
+          </select>
+        </label>
+
+        <label>
+          Minimum 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'>1000 T</option>
+            <option value='10000'>10000 T</option>
+          </select>
+        </label>
+      </form>
+    </div>
+  )
+}
diff --git a/components/tab-options/commodity-filter.js b/components/tab-options/commodity-filter.js
diff --git a/css/components/tabs.css b/css/components/tabs.css
@@ -115,7 +115,9 @@
   z-index: 2;
 }
 
-.tab-tab_options {
+.tab-optionss {
+  position: relative;
+  z-index: 2;
   background: var(--color-primary);
   color: var(--color-text-inverted);
   padding: .5rem;
@@ -125,23 +127,25 @@
   overflow: auto;
 }
 
-.tab-tab_options form label {
+.tab-optionss form label {
   margin-right: 1.5rem;
 }
 
-.tab-tab_options form input,
-.tab-tab_options form select {
+.tab-optionss form input,
+.tab-optionss form select {
   background: var(--color-primary);
-  border-color: rgb(0,0,0, .25);
-  color: var(--color-text-inverted);
+  border-color: rgba(0,0,0, .25);
+  color: rgb(0,0,0);
   border-style: solid;
   border-width: .1rem;
-  border-radius: 0.2rem;
+  border-radius: 0.1rem;
   padding: .25rem;
   margin-left: .5rem;
+  font-size: 1rem;
+  font-family: "Jura", sans-serif;
 }
 
-.tab-tab_options form input[type="checkbox"] {
+.tab-optionss form input[type="checkbox"] {
   margin-left: 0;
   margin-right: .5rem;
 }
diff --git a/css/responsive/mobile.css b/css/responsive/mobile.css
@@ -88,4 +88,10 @@
     padding-right: 0;
     padding-left: .25rem;
   }
+
+
+  .tab-optionss form label {
+    display: block;
+    margin-top: .5rem;
+  }
 }
diff --git a/lib/consts.js b/lib/consts.js
@@ -8,8 +8,15 @@ const API_BASE_URL = process?.env?.NODE_ENV === 'development'
 const SOL_COORDINATES = [0, 0, 0]
 const COLONIA_COORDINATES = [-9530.5, -910.28125, 19808.125]
 
+const COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT = '30'
+const COMMODITY_FILTER_FLEET_CARRIER_DEFAULT = 'excluded'
+const COMMODITY_FILTER_MIN_VOLUME_DEFAULT = 1000
+
 module.exports = {
   API_BASE_URL,
   SOL_COORDINATES,
-  COLONIA_COORDINATES
+  COLONIA_COORDINATES,
+  COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
+  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
+  COMMODITY_FILTER_MIN_VOLUME_DEFAULT
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -3,13 +3,18 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
-import CommodityFilterTabOptions from 'components/tab-options/commodity-filter'
+import CommodityTabOptions from 'components/tab-options/commodities'
 import Layout from 'components/layout'
 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 { API_BASE_URL } from 'lib/consts'
+import { 
+  API_BASE_URL,
+  COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT,
+  COMMODITY_FILTER_FLEET_CARRIER_DEFAULT,
+  COMMODITY_FILTER_MIN_VOLUME_DEFAULT
+} from 'lib/consts'
 
 export default () => {
   const router = useRouter()
@@ -26,31 +31,13 @@ export default () => {
     if (basePath === 'exporters') setTabIndex(1)
   }, [router.pathname])
 
-  useEffect(() => {
-    (async () => {
-      setCommodity(undefined)
+  async function getImportsAndExports() {
+    const commodityName = router.query?.['commodity-name']
+    if (!commodityName) return
+
       setExports(undefined)
       setImports(undefined)
 
-      const commodityName = router.query?.['commodity-name']
-      if (!commodityName) return
-
-      let c = await getCommodity(commodityName)
-      if (c) {
-        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 ?? 'Unknown'
-        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.commodityName
-      }
-      if (!c) c = getAllCommodities().find(el => el.symbol.toLowerCase() === commodityName.toLowerCase())
-      if (c && !c.totalDemand) c.totalDemand = 0
-      if (c && !c.totalStock) c.totalStock = 0
-      setCommodity(c || null)
-
       const imports = await getImports(commodityName)
       imports.forEach(c => {
         c.key = c.commodityId
@@ -80,6 +67,32 @@ export default () => {
         delete c.commodityName
       })
       setExports(exports)
+  }
+
+  useEffect(() => {
+    (async() => {
+      setCommodity(undefined)
+
+      const commodityName = router.query?.['commodity-name']
+      if (!commodityName) return
+
+      let c = await getCommodity(commodityName)
+      if (c) {
+        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 ?? 'Unknown'
+        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.commodityName
+      }
+      if (!c) c = getAllCommodities().find(el => el.symbol.toLowerCase() === commodityName.toLowerCase())
+      if (c && !c.totalDemand) c.totalDemand = 0
+      if (c && !c.totalStock) c.totalStock = 0
+      setCommodity(c || null)
+
+      getImportsAndExports()
     })()
   }, [router.query['commodity-name']])
 
@@ -200,8 +213,8 @@ export default () => {
               <TabList>
                 <Tab>Importers</Tab>
                 <Tab>Exporters</Tab>
-                <CommodityFilterTabOptions/>
               </TabList>
+              <CommodityTabOptions onChange={() => getImportsAndExports()}/>
               <TabPanel>
                 {!imports && <div className='loading-bar loading-bar--tab' />}
                 {imports && <CommodityImportOrders commodities={imports} />}
@@ -227,6 +240,23 @@ async function getExports (commodityName) {
 }
 
 async function getImports (commodityName) {
-  const res = await fetch(`${API_BASE_URL}/v1/commodity/name/${commodityName}/imports`)
+  let url = `${API_BASE_URL}/v1/commodity/name/${commodityName}/imports`
+  let 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()
 }
+