diff --git a/src/components/App.tsx b/src/components/App.tsx index cb16fa6..a99b9c3 100755 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -82,12 +82,15 @@ export const App = () => { if (myCase) { const station = myCase.values; const {latitude, longitude} = station; - const locationName = await geoLocSearch(latitude, longitude); + const locationInfo = await geoLocSearch(latitude, longitude); + const locale = `${locationInfo.split(",")[0]}, ${locationInfo.split(",")[1]}`; + const distance = Number(locationInfo.split(",")[2]); setState((draft) => { draft.weatherStation = station; - draft.location = {name: locationName, latitude, longitude}; - draft.weatherStationDistance = 0; + draft.location = {name: locale, latitude, longitude}; + draft.weatherStationDistance = distance; draft.zoomMap = false; + draft.didUserSelectStationFromMap = true; }); } } diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx index be7e429..bc1d8d6 100644 --- a/src/components/location-picker.tsx +++ b/src/components/location-picker.tsx @@ -14,7 +14,7 @@ import "./location-picker.scss"; export const LocationPicker = () => { const {state, setState} = useStateContext(); - const {units, location, weatherStation, weatherStationDistance, startDate, endDate} = state; + const {units, location, weatherStation, weatherStationDistance, startDate, endDate, didUserSelectStationFromMap} = state; const [showMapButton, setShowMapButton] = useState(false); const [isEditing, setIsEditing] = useState(false); const [locationPossibilities, setLocationPossibilities] = useState([]); @@ -71,7 +71,7 @@ export const LocationPicker = () => { useEffect(() => { const _startDate = startDate ? startDate : new Date( -5364662060); // 1/1/1750 const _endDate = endDate ? endDate : new Date(Date.now()); - if (location) { + if (location && !didUserSelectStationFromMap) { findNearestActiveStations(location.latitude, location.longitude, _startDate, _endDate) .then((stationList: IStation[]) => { if (stationList) { @@ -110,7 +110,7 @@ export const LocationPicker = () => { }); } // eslint-disable-next-line react-hooks/exhaustive-deps - },[endDate, isEditing, location, startDate]); + },[endDate, isEditing, location, startDate, didUserSelectStationFromMap]); useEffect(() => { if (showStationSelectionList) { @@ -137,6 +137,7 @@ export const LocationPicker = () => { const placeNameSelected = (place: IPlace | undefined) => { setState(draft => { draft.location = place; + draft.didUserSelectStationFromMap = false; }); setShowSelectionList(false); setIsEditing(false); @@ -149,6 +150,7 @@ export const LocationPicker = () => { const stationSelected = (station: IWeatherStation | undefined) => { setState(draft => { draft.weatherStation = station; + draft.didUserSelectStationFromMap = false; }); setShowStationSelectionList(false); setStationHoveredIndex(null); @@ -218,6 +220,7 @@ export const LocationPicker = () => { setState(draft=>{ draft.location = locationPossibilities[selectedLocIdx]; draft.zoomMap = true; + draft.didUserSelectStationFromMap = false; }); } } @@ -240,6 +243,7 @@ export const LocationPicker = () => { const selectedStation = stationPossibilities[selectedLocIdx].station; stationSelected(selectedStation); setState(draft => { + draft.didUserSelectStationFromMap = false; draft.weatherStation = selectedStation; draft.weatherStationDistance = stationPossibilities[selectedLocIdx].distance; }); @@ -273,6 +277,7 @@ export const LocationPicker = () => { geoLocSearch(lat, long).then((currPosName) => { setState(draft => { draft.location = {name: currPosName, latitude: lat, longitude: long}; + draft.didUserSelectStationFromMap = false; }); setShowMapButton(true); setIsEditing(false); diff --git a/src/types.ts b/src/types.ts index d6b5b84..04cdb9d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -124,6 +124,7 @@ export interface IState { didUserSelectDate: boolean; isMapOpen: boolean; zoomMap: boolean; + didUserSelectStationFromMap?: boolean; } export const unitMap: UnitMap = { diff --git a/src/utils/geonameSearch.ts b/src/utils/geonameSearch.ts index 4fd8abd..009427f 100644 --- a/src/utils/geonameSearch.ts +++ b/src/utils/geonameSearch.ts @@ -7,7 +7,7 @@ const kDefaultMaxRows = 4; const kGeonamesUser = "codap"; -async function geoNameSearch(searchString: string, maxRows?: number): Promise { +export const geoNameSearch = async (searchString: string, maxRows?: number): Promise =>{ const userClause = `username=${kGeonamesUser}`; const countryClause = "country=US"; const maxRowsClause = `maxRows=${maxRows || kDefaultMaxRows}`; @@ -34,7 +34,7 @@ async function geoNameSearch(searchString: string, maxRows?: number): Promise { let thisQuery = inputEl.value; @@ -57,7 +57,7 @@ export const geoLocSearch = async (lat: number, long: number) => { const response = await fetch(url); if (response.ok) { const data = await response.json(); - return `${data?.geonames?.[0]?.name}, ${data?.geonames?.[0]?.adminCode1}` || "Unknown Location"; + return `${data?.geonames?.[0]?.name}, ${data?.geonames?.[0]?.adminCode1}, ${data?.geonames?.[0]?.distance}` || "Unknown Location"; } else { return Promise.reject(response.statusText); }