create location selectors

src/components/RunMap/RunMap.tsx

@@ -8,7 +8,7 @@ import {
 import { DragEndEvent, Icon, LeafletMouseEvent } from 'leaflet';
 import { useTheme } from '@material-ui/core';
 import Polyline from 'react-leaflet-arrowheads';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import 'leaflet/dist/leaflet.css';
 
@@ -18,11 +18,13 @@ import {
 } from '../../state/location';
 import { LatLng } from '../../server/types';
 import { safeStoredLocation, storeLocation } from '../../utils/localStorage';
-import { flippedSelector, routeSelector } from '../../store/route/selectors';
+import { flippedSelector, locationSelector, routeSelector } from '../../store/route/selectors';
 
 import iconUrl from './Marker.png';
 
 import './RunMap.css';
+import { findLocationByLatLng } from '../../store/location/actions';
+import { locationByKeySelector } from '../../store/location/selectors';
 
 const MarkerIcon = new Icon({
   iconUrl,
@@ -32,11 +34,13 @@ const MarkerIcon = new Icon({
 
 const RunMap: React.FC = () => {
   const theme = useTheme();
+  const dispatch = useDispatch();
 
   const route = useSelector(routeSelector);
+  const location = useSelector(locationSelector);
   const flipped = useSelector(flippedSelector);
 
-  const startLocation = useRecoilValueLoadable(locationByRouteLocation);
+  const startLocation = useSelector(locationByKeySelector(location));
 
   const defaultCenter: LatLng = safeStoredLocation()?.coordinates || [52.132633, 5.291266];
 
@@ -57,12 +61,12 @@ const RunMap: React.FC = () => {
   const bounds = coordinates.length > 0 ? coordinates : undefined;
 
   const handleClick = ({ latlng }: LeafletMouseEvent): void => {
-    // setLocationSearch([latlng.lat, latlng.lng]);
+    dispatch(findLocationByLatLng([latlng.lat, latlng.lng]));
   };
 
   const onDragend = (e: DragEndEvent): void => {
     const latLng = e.target.getLatLng();
-    // setLocationSearch([latLng.lat, latLng.lng]);
+    dispatch(findLocationByLatLng(latLng));
   };
 
   return (
@@ -77,11 +81,10 @@ const RunMap: React.FC = () => {
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      {startLocation.state === 'hasValue'
-        && startLocation.contents?.coordinates
+      {startLocation
         && (
           <Marker
-            position={startLocation.contents?.coordinates}
+            position={startLocation.coordinates}
             icon={MarkerIcon}
             title="Starting Point"
             alt="Starting Point"

src/state/location.ts

@@ -12,14 +12,6 @@ export const locationSearchState = atom<string | LatLng>({
   default: safeStoredLocation()?.name || '',
 });
 
-type onCompleteLocation = (locations: LocationResponse[]) => void;
-
-let onCompleteLocation: onCompleteLocation = (): void => undefined;
-
-export function setOnCompleteLocation(newOnCompleteLocation: onCompleteLocation): void {
-  onCompleteLocation = newOnCompleteLocation;
-}
-
 export const locationsState = atom<Locations>({
   key: 'Locations',
   default: {},
@@ -55,13 +47,7 @@ export const locationsDataQuery = selectorFamily<LocationResponse[], string | La
 
     return fetch(url)
       .then((res) => res.json() as Promise<LocationsResponse>)
-      .then((res) => {
-        if (isLatLng) {
-          onCompleteLocation(res.locations);
-        }
-
-        return res;
-      })
+      .then((res) => res)
       .then((res) => res.locations)
       .catch(() => {
         alertError('Something went from looking for a location.');

src/store/location/selectors.ts

@@ -1,10 +1,16 @@
 import { createSelector } from 'reselect';
 
 import { LocationState, StoreState } from '../types';
+import { LocationResponse } from '../../server/types';
 
 const locationState = (state: StoreState): LocationState => state.location;
 
 export const searchSelector = createSelector(locationState, (state) => state.search);
 export const locationsSelector = createSelector(locationState, (state) => state.locations);
 export const locationsStateSelector = createSelector(locationState, (state) => state.state);
 export const locationsBySearchSelector = createSelector(locationState, (state) => state.bySearch);
+
+export const locationByKeySelector = (key: string | undefined) => createSelector(
+  locationsSelector,
+  (state): LocationResponse | undefined => (key ? state[key] : undefined),
+);

src/store/route/selectors.ts

@@ -22,7 +22,7 @@ const getRouteValueSelector = createSelector(routeSelector, getValue);
 
 const distanceSelector = createSelector(routeState, (state) => state.distance);
 const routeTypeSelector = createSelector(routeState, (state) => state.routeType);
-const locationSelector = createSelector(routeState, (state) => state.location);
+export const locationSelector = createSelector(routeState, (state) => state.location);
 const randomSeedSelector = createSelector(routeState, (state) => state.randomSeed);
 export const flippedSelector = createSelector(routeState, (state) => state.flipped);