sfc-utils 1.4.54 → 1.4.56

package/components/geocoder.mjs

@@ -1,177 +1,179 @@
-import React, { useRef, useState } from 'react'
-import * as geocoderStyles from '../styles/modules/geocoder.module.less'
+import React, { useRef, useState } from "react";
+import * as geocoderStyles from "../styles/modules/geocoder.module.less";
 
 // This is a singleton event listener that we can use to add/remove event listeners
 // Don't call it during SSR
 var setSingletonEventListener = (function (element) {
-  var handlers = {}
+  var handlers = {};
   return function (evtName, func) {
     handlers.hasOwnProperty(evtName) &&
-      element.removeEventListener(evtName, handlers[evtName])
+      element.removeEventListener(evtName, handlers[evtName]);
     if (func) {
-      handlers[evtName] = func
-      element.addEventListener(evtName, func)
+      handlers[evtName] = func;
+      element.addEventListener(evtName, func);
     } else {
-      delete handlers[evtName]
+      delete handlers[evtName];
     }
-  }
-})(typeof document !== 'undefined' && document)
+  };
+})(typeof document !== "undefined" && document);
 
 // Our new and improved geocoder! Hits PositionStack first and then falls back to classic geocoder
 // Accepts a region to filter results by -- this can be custom but if it's not passed in, it will default to the state where the market resides
 const Geocoder = ({
   filterRegion, // You need to test results, but could also pass in a neighbourhood, district, city, county, state or administrative area
-  market,       // Will filter by the market's state if no filterRegion provided
+  market, // Will filter by the market's state if no filterRegion provided
   resultFunc,
+  buttonTrackingId,
+  placeholder,
 }) => {
   // Show a loader when we're requesting
-  const [loading, setLoading] = useState(false)
-  const [locData, setLocData] = useState(null)
-  const [inputValue, setInputValue] = useState('')
-  const [activeKeyboardIndex, setActiveKeyboardIndex] = useState(null)
-  const resultsRef = useRef(null)
-  const geocoderInputRef = useRef(null)
-  const latestFetchRef = useRef(null)
+  const [loading, setLoading] = useState(false);
+  const [locData, setLocData] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [activeKeyboardIndex, setActiveKeyboardIndex] = useState(null);
+  const resultsRef = useRef(null);
+  const geocoderInputRef = useRef(null);
+  const latestFetchRef = useRef(null);
 
   if (!filterRegion) {
     switch (market) {
-      case 'SFC':
-        filterRegion = 'California'
-        break
-      case 'Houston':
-      case 'San Antonio':
-        filterRegion = 'Texas'
-        break
-      case 'Albany':
-        filterRegion = 'New York'
-        break
-      case 'CT':
-        filterRegion = 'Connecticut'
+      case "SFC":
+        filterRegion = "California";
+        break;
+      case "Houston":
+      case "San Antonio":
+        filterRegion = "Texas";
+        break;
+      case "Albany":
+        filterRegion = "New York";
+        break;
+      case "CT":
+        filterRegion = "Connecticut";
       default:
-        filterRegion = 'United States'
+        filterRegion = "United States";
     }
   }
 
   // We don't want this CONSTANTLY firing, so we debounce it
   const search = (query) => {
     // Save value of query so we can check if it's the last one
-    latestFetchRef.current = query
+    latestFetchRef.current = query;
     // If we're already loading, don't fire another request, the request will be re-requested after the first one finishes
     if (loading) {
-      return false
+      return false;
     }
     // POST as form url encoded data
-    let formData = new FormData()
-    formData.append('query', query)
-    formData.append('region', filterRegion)
+    let formData = new FormData();
+    formData.append("query", query);
+    formData.append("region", filterRegion);
     // Remove any existing event listeners
-    setSingletonEventListener('keydown')
+    setSingletonEventListener("keydown");
     // Make req
-    fetch('https://projects.sfchronicle.com/feeds/geocode/v2.php', {
-      method: 'POST',
+    fetch("https://projects.sfchronicle.com/feeds/geocode/v2.php", {
+      method: "POST",
       body: formData,
     })
       .then((resp) => {
         // Sometimes, there's a junk response, so let's handle that gracefully
         if (!resp || !resp.ok) {
-          return null
+          return null;
         }
-        return resp.json()
+        return resp.json();
       })
       .then((output) => {
         // If this is not the latest fetch, bail and fetch latest
         if (latestFetchRef.current !== query) {
           setTimeout(() => {
             // Delay a bit because it seems like we're still typing
-            search(latestFetchRef.current)
-          }, 1000)
-          return
+            search(latestFetchRef.current);
+          }, 1000);
+          return;
         } else {
           // Uncomment this to see what request was actually honored
           //console.log('OK VALID RESULTS FOR', latestFetchRef.current)
         }
         // Unset loading
-        setLoading(false)
+        setLoading(false);
         // Remove any existing event listeners
-        setSingletonEventListener('keydown')
+        setSingletonEventListener("keydown");
         // Show results
-        setLocData(output.data)
+        setLocData(output.data);
         // Bail early if there's no data
         if (!output) {
-          return false
+          return false;
         }
         // Handle result
         if (output.data.length === 0) {
           // We could show something saying "No results" ... or we could not
         } else {
           // Create a keydown event listener
-          setSingletonEventListener('keydown', function resultsKeyHandler(e) {
+          setSingletonEventListener("keydown", function resultsKeyHandler(e) {
             setActiveKeyboardIndex((prevIndex) => {
-              let newIndex = prevIndex
+              let newIndex = prevIndex;
               switch (e.key) {
-                case 'ArrowDown':
+                case "ArrowDown":
                   // Handle the index
                   if (prevIndex === null) {
-                    newIndex = 0
+                    newIndex = 0;
                   } else if (prevIndex < output.data.length - 1) {
-                    newIndex = prevIndex + 1
+                    newIndex = prevIndex + 1;
                   } else {
-                    newIndex = 0
+                    newIndex = 0;
                   }
-                  break
-                case 'ArrowUp':
+                  break;
+                case "ArrowUp":
                   // Handle the index
                   if (prevIndex === null) {
-                    newIndex = output.data.length - 1
+                    newIndex = output.data.length - 1;
                   } else if (prevIndex > 0) {
-                    newIndex = prevIndex - 1
+                    newIndex = prevIndex - 1;
                   } else {
-                    newIndex = output.data.length - 1
+                    newIndex = output.data.length - 1;
                   }
-                  break
-                case 'Enter':
+                  break;
+                case "Enter":
                   // Do something with the data
-                  const selectedLocation = output.data[prevIndex]
+                  const selectedLocation = output.data[prevIndex];
                   // Update the input value with the choice
                   if (selectedLocation) {
-                    setInputValue(selectedLocation.name)
+                    setInputValue(selectedLocation.name);
                     // Call function if it exists
                     if (resultFunc) {
-                      resultFunc(selectedLocation)
+                      resultFunc(selectedLocation);
                     }
                   }
                   // Hide the list now
-                  setLocData(null)
+                  setLocData(null);
               }
-              return newIndex
-            })
-          })
+              return newIndex;
+            });
+          });
 
           // Start listening for a click outside the div
-          document.addEventListener('click', function resultsClickHandler(e) {
+          document.addEventListener("click", function resultsClickHandler(e) {
             // Whether we clicked inside or outside, we hide the list
-            setLocData(null)
+            setLocData(null);
             // Also cancel the keydown listener
-            setSingletonEventListener('keydown')
+            setSingletonEventListener("keydown");
             // Received click, cancel this listener
-            this.removeEventListener('click', resultsClickHandler)
-          })
+            this.removeEventListener("click", resultsClickHandler);
+          });
         }
-      })
-  }
+      });
+  };
 
   // Handle the change event
   const handleChange = (event) => {
     // Set the input value
-    const inputValue = event.target.value
-    setInputValue(inputValue)
-    setActiveKeyboardIndex(null)
+    const inputValue = event.target.value;
+    setInputValue(inputValue);
+    setActiveKeyboardIndex(null);
     // Only query if the value is not empty
     if (inputValue) {
-      setLoading(true)
-      search(inputValue)
+      setLoading(true);
+      search(inputValue);
     }
-  }
+  };
 
   return (
     <div className={geocoderStyles.wrapper}>
@@ -179,7 +181,7 @@ const Geocoder = ({
       <input
         ref={geocoderInputRef}
         className={geocoderStyles.input}
-        placeholder="Enter an address"
+        placeholder={placeholder ? placeholder : "Enter an address"}
         name="address"
         onChange={handleChange}
         value={inputValue}
@@ -190,19 +192,19 @@ const Geocoder = ({
       {locData && (
         <ul className={geocoderStyles.resultsWrapper} ref={resultsRef}>
           {locData.map((loc, i) => {
-            let thisClass = geocoderStyles.result
+            let thisClass = geocoderStyles.result;
             if (activeKeyboardIndex === i) {
-              thisClass += ' ' + geocoderStyles.active
+              thisClass += " " + geocoderStyles.active;
             }
             return (
               <li
                 className={thisClass}
                 key={i}
                 onClick={() => {
-                  setInputValue(locData[i].name)
+                  setInputValue(locData[i].name);
                   // Call function if it exists
                   if (resultFunc) {
-                    resultFunc(locData[i])
+                    resultFunc(locData[i]);
                   }
                 }}
               >
@@ -210,23 +212,23 @@ const Geocoder = ({
                   className={geocoderStyles.button}
                   onFocus={(e) => {
                     // Set index
-                    setActiveKeyboardIndex(i)
+                    setActiveKeyboardIndex(i);
                   }}
                 >
                   <div className={geocoderStyles.name}>{loc.name}</div>
                   <div className={geocoderStyles.details}>
                     {loc.locality}
-                    {loc.locality && loc.region && ', '}
+                    {loc.locality && loc.region && ", "}
                     {loc.region}
                   </div>
                 </button>
               </li>
-            )
+            );
           })}
         </ul>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Geocoder
+export default Geocoder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.54",
+  "version": "1.4.56",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -14,4 +14,4 @@
     "react-transition-group": "^4.4.5",
     "write": "^2.0.0"
   }
-}
+}