fix(scanArea): prevent crash when area feature has no name/key

config/multi-domain-example/README.md

@@ -4,7 +4,7 @@
 
 - This makes use of the `NODE_CONFIG_ENV` env variable to determine which `local.json` files to load
 - Loads `default.json` => `local.json` => `local-{NODE_CONFIG_ENV}`.json
-- You set all of your base defaults in `local.json` still, then set things that are unique to those domains, such `geoJsonFilename` or authentication strategies in each of the domain specifics jsons
+- You set all of your base defaults in `local.json` still, then set things that are unique to those domains, such as `geoJsonFileName` or authentication strategies in each of the domain specifics jsons
 - The `NODE_CONFIG_ENV` var names should not contain `/` or `.`
 
 ## File System
@@ -20,7 +20,7 @@ local - orangemap.json
 
 - `local.json` is the base config file that all other configs will inherit from, it can also be its own map instance if do not set the `NODE_CONFIG_ENV` env variable
 - The other files will inherit everything you set in `local.json` and then override any values that are set in the domain specific file
-- Such as in `local-applemap.json`, we have set a new title, a separate Discord strategy, and a different geoJsonFilename
+- Such as in `local-applemap.json`, we have set a new title, a separate Discord strategy, and a different geoJsonFileName
 - Only config setting you must set in each file is the port, since separate instances of the app will be generated
 - In `local-orangemap.json`, we also set a different start Latitude and Longitude and have disabled some various features that we do not want on that map. In `local.json`, we had set `alwaysEnabledPerms = ["map"]`, however, for orangemap we have overridden that by providing an empty array.
 - The databases specified in `local.json` will be used in all 3 maps, as will all of the permissions.

config/multi-domain-example/local-applemap.json

@@ -4,7 +4,7 @@
     "general": {
       "title": "Apple Map",
       "headerTitle": "Apple Map PoGo",
-      "geoJsonFilName": "http://koji.map.com/api/v1/geofence/feature-collection/apple"
+      "geoJsonFileName": "http://koji.map.com/api/v1/geofence/feature-collection/apple"
     },
     "links": {
       "discordInvite": "apple map invite",

config/multi-domain-example/local-orangemap.json

@@ -6,7 +6,7 @@
       "headerTitle": "Orange Map",
       "startLat": 67.2512,
       "startLon": -25.9667,
-      "geoJsonFilName": "http://koji.map.com/api/v1/geofence/feature-collection/orange"
+      "geoJsonFileName": "http://koji.map.com/api/v1/geofence/feature-collection/orange"
     },
     "misc": {
       "enableMapJsFilter": false,

src/features/scanArea/ScanAreaTile.jsx

@@ -14,7 +14,8 @@ import { getProperName } from '@utils/strings'
  * @returns
  */
 function ScanArea(featureCollection) {
-  const search = useStorage((s) => s.filters.scanAreas?.filter?.search)
+  const rawSearch = useStorage((s) => s.filters.scanAreas?.filter?.search ?? '')
+  const search = rawSearch.toLowerCase()
   const tapToToggle = useStorage((s) => s.userSettings.scanAreas.tapToToggle)
   const alwaysShowLabels = useStorage(
     (s) => s.userSettings.scanAreas.alwaysShowLabels,
@@ -23,12 +24,12 @@ function ScanArea(featureCollection) {
 
   return (
     <GeoJSON
-      key={`${search}${tapToToggle}${alwaysShowLabels}`}
+      key={`${rawSearch}${tapToToggle}${alwaysShowLabels}`}
       data={featureCollection}
       filter={(f) =>
         webhook ||
         search === '' ||
-        f.properties.key.toLowerCase().includes(search.toLowerCase())
+        (f.properties?.key || '').toLowerCase().includes(search)
       }
       eventHandlers={{
         click: ({ propagatedFrom: layer }) => {