Merge branch '187001114-store-location-from-map' into 187000993-stati…

…on-selection-bug-fix
concord-consortium · Feb 8, 2024 · edbcc8b · edbcc8b
2 parents 6727040 + acf6a96
commit edbcc8b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import classnames from "classnames";
-import { autoComplete, geoLocSearch } from "../utils/geonameSearch";
+import { autoComplete, geoLocSearch, geoNameSearch } from "../utils/geonameSearch";
 import { geonamesUser, kOffsetMap, timezoneServiceURL } from "../constants";
 import { useStateContext } from "../hooks/use-state";
 import { IPlace, IStation, IWeatherStation, IStatus } from "../types";
@@ -57,7 +57,7 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
           setShowSelectionList(false);
           setShowMapButton(false);
           setState((draft) => {
-            draft.location = undefined;
+            draft.location = locationInputEl.current?.value === "" ? undefined : location;
             draft.zoomMap = false;
           });
         }
@@ -71,7 +71,7 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [location]);
 
   useEffect(() => {
     if (locationInputEl.current?.value === "") {
@@ -156,9 +156,10 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
     }
   };
 
-  const getLocationList = () => {
-    if (locationInputEl.current) {
-      autoComplete(locationInputEl.current)
+  const getLocationList = (newLoc?: string) => {
+    const locationToUse = newLoc || locationInputEl.current?.value;
+    if (locationToUse) {
+      autoComplete(locationToUse)
         .then ((placeList: IPlace[] | undefined) => {
                 if (placeList) {
                   setLocationPossibilities(placeList);
@@ -168,10 +169,12 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
   };
 
   useEffect(() => {
-    if (isEditing) {
-      getLocationList();
+    if (isEditing || location) { //if location changes from map selection
+      const newLocation = location ? location.name : "";
+      setCandidateLocation(newLocation);
+      getLocationList(newLocation);
     }
-  }, [isEditing]);
+  }, [isEditing, location]);
 
   const placeNameSelected = (place: IPlace | undefined) => {
     setState(draft => {
@@ -182,13 +185,20 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
     setCandidateLocation(place?.name || "");
     setShowSelectionList(false);
     setIsEditing(false);
-    setShowMapButton(true);
+    setShowMapButton(place?.name !== undefined);
     setLocationPossibilities([]);
     setHoveredIndex(null);
     setArrowedIndex(-1);
   };
 
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleInputKeyDown = async(e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      if (e.currentTarget.value) {
+        const locale = await geoNameSearch(e.currentTarget.value);
+        placeNameSelected(locale?.[0]);
+      }
+      setIsEditing(false);
+    } else
     if (e.key === "ArrowDown" && locationPossibilities.length > 0) {
       setHoveredIndex(0);
       setArrowedIndex(0);
@@ -234,6 +244,7 @@ export const LocationPicker = ({setActiveStations, setStatus}: IProps) => {
     if (target.value !== "") {
       getLocationList();
       setCandidateLocation(target.value);
+      setState(draft => {draft.location = location;});
     } else {
       setIsEditing(false);
       setCandidateLocation(location?.name || "");

diff --git a/src/utils/geonameSearch.ts b/src/utils/geonameSearch.ts
@@ -36,8 +36,7 @@ export const geoNameSearch = async (searchString: string, maxRows?: number): Pro
   }
 };
 
-export const autoComplete = async(inputEl: HTMLInputElement) => {
-  let thisQuery = inputEl.value;
+export const autoComplete = async(thisQuery: string) => {
   try {
     let placeList = await geoNameSearch(thisQuery);
     placeList = placeList || [];