From fdea3f8269d1ca0ca48d3aa5962ae2ba4538e07a Mon Sep 17 00:00:00 2001
From: Iain Collins <me@iaincollins.com>
Date: Sat, 26 Oct 2024 05:48:13 +0100
Subject: [PATCH] Fix for hitting enter after typing location name in filter

Threre are a bunch of other bugs with this behaviour, mostly performance related, but can get to that in refactoring
---
 components/tab-options/commodities.js     | 19 ++++++++++++++-----
 package.json                              |  2 +-
 pages/commodity/[commodity-name]/index.js |  8 ++++----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
index 2ee4f1c..7f23386 100644
--- a/components/tab-options/commodities.js
+++ b/components/tab-options/commodities.js
@@ -35,15 +35,15 @@ export default ({ disabled = false }) => {
   }, [lastUpdatedFilter, fleetCarrierFilter, minVolumeFilter, locationFilter, distanceFilter])
 
   useEffect(() => {
-    if (router.query?.maxDaysAgo && router.query.maxDaysAgo !== lastUpdatedFilter) {
+    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 !== fleetCarrierFilter) {
+    if (router.query?.fleetCarriers && router.query.fleetCarriers !== parseInt(fleetCarrierFilter)) {
       setFleetCarrierFilter(router.query.fleetCarriers)
       window.localStorage.setItem('fleetCarrierFilter', router.query.fleetCarriers)
     }
-    if (router.query?.minVolume && router.query.minVolume !== minVolumeFilter) {
+    if (router.query?.minVolume && parseInt(router.query.minVolume) !== parseInt(minVolumeFilter)) {
       setMinVolumeFilter(router.query.minVolume)
       window.localStorage.setItem('minVolumeFilter', router.query.minVolume)
     }
@@ -52,7 +52,7 @@ export default ({ disabled = false }) => {
       window.localStorage.setItem('locationFilter', router.query.location.trim())
       document.getElementById('location').value = router.query.location.trim()
     }
-    if (router.query?.maxDistance && router.query.maxDaysAgo !== distanceFilter) {
+    if (router.query?.maxDistance && parseInt(router.query.maxDaysAgo) !== parseInt(distanceFilter)) {
       setDistanceFilter(router.query.maxDistance)
       window.localStorage.setItem('distanceFilter', router.query.maxDistance)
     }
@@ -60,7 +60,10 @@ export default ({ disabled = false }) => {
 
   return (
     <div className='tab-options'>
-      <form onSubmit={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('CommodityFilterChangeEvent')); document.activeElement.blur() }}>
+      <form method='GET' action='/' onSubmit={(e) => {
+          e.preventDefault()
+          document.activeElement.blur()
+        }}>
         <label>
           <span className='tab-options__label-text'>Updated</span>
           <select
@@ -123,6 +126,12 @@ export default ({ disabled = false }) => {
             defaultValue={locationFilter}
             previous-value={locationFilter}
             size={12}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                document.activeElement.blur()
+              }
+            }}
             onBlur={async (e) => {
               const value = e.target.value.replace(/\u200B/g, '').trim()
               if (e.target.value === ZERO_WIDTH_SPACE) {
diff --git a/package.json b/package.json
index 30ebeff..b12e35c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.88.0",
+  "version": "0.89.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 9578e10..aeff72d 100644
--- a/pages/commodity/[commodity-name]/index.js
+++ b/pages/commodity/[commodity-name]/index.js
@@ -297,15 +297,15 @@ export default () => {
                         </p>
                       </td>
                     </tr>}
-                  <tr>
+                  {!commodity?.rare &&<tr>
                     <th className='is-hidden-mobile'>&nbsp;</th>
                     <td>
-                      <ul style={{ padding: '0 0 0 1rem' }}>
-                        <li style={{ marginBottom: '1rem' }}><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/importers`}>Where to sell {commodity.name}</Link></li>
+                      <ul style={{ padding: '0 0 0 1.5rem' }}>
+                        <li style={{ marginBottom: '.5rem' }}><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/importers`}>Where to sell {commodity.name}</Link></li>
                         <li><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/exporters`}>Where to buy {commodity.name}</Link></li>
                       </ul>
                     </td>
-                  </tr>
+                  </tr>}
                 </tbody>
               </table>