Initial implementation with ACTION_SET_NAVIGATION_DESTINATION action …

…and navigationDestination prop

src/actions/history.js

@@ -1,6 +1,6 @@
 import { LOCATION_CHANGE } from 'connected-react-router';
-import { getDongleID, getZoom, getPrimeNav, getClipsNav } from '../url';
-import { primeNav, selectDevice, selectRange } from './index';
+import { getDongleID, getZoom, getPrimeNav, getClipsNav, getNavigationNav } from '../url';
+import { primeNav, selectDevice, selectRange, navigateToDestination } from './index';
 import { clipsExit, fetchClipsDetails, fetchClipsList } from './clips';
 
 export const onHistoryMiddleware = ({ dispatch, getState }) => (next) => (action) => {
@@ -24,6 +24,11 @@ export const onHistoryMiddleware = ({ dispatch, getState }) => (next) => (action
       dispatch(primeNav(pathPrimeNav));
     }
 
+    const pathNavigationNav = getNavigationNav(action.payload.location.pathname, action.payload.location.search);
+    if (pathNavigationNav && pathNavigationNav != state.navigationNav) {
+      dispatch(navigateToDestination(pathNavigationNav.lat, pathNavigationNav.long));
+    }
+
     const pathClipsNav = getClipsNav(action.payload.location.pathname);
     if (pathClipsNav === null && state.clips) {
       dispatch(clipsExit());

src/actions/index.js

@@ -132,6 +132,26 @@ export function primeNav(nav, allowPathChange = true) {
   };
 }
 
+export function navigateToDestination(lat, long) {
+  return (dispatch, getState) => {
+    const state = getState();
+    if (!state.dongleId) {
+      return;
+    }
+
+    let destination = {
+      latitude: lat,
+      longitude: long,
+    };
+    if (state.navigationDestination !== destination) {
+      dispatch({
+        type: Types.ACTION_SET_NAVIGATION_DESTINATION,
+        navigationDestination: destination,
+      });
+    }
+  };
+}
+
 export function fetchSharedDevice(dongleId) {
   return async (dispatch) => {
     try {

src/actions/types.js

@@ -18,6 +18,9 @@ export const ACTION_PRIME_NAV = 'ACTION_PRIME_NAV';
 export const ACTION_PRIME_SUBSCRIPTION = 'ACTION_PRIME_SUBSCRIPTION';
 export const ACTION_PRIME_SUBSCRIBE_INFO = 'ACTION_PRIME_SUBSCRIBE_INFO';
 
+// map
+export const ACTION_SET_NAVIGATION_DESTINATION = 'ACTION_SET_NAVIGATION_DESTINATION';
+
 // playback
 export const ACTION_SEEK = 'action_seek';
 export const ACTION_PAUSE = 'action_pause';

src/components/Dashboard/index.jsx

@@ -18,7 +18,7 @@ const DashboardLoading = () => (
   </Grid>
 );
 
-const Dashboard = ({ primeNav, device, dongleId }) => {
+const Dashboard = ({ primeNav, device, dongleId, navigationDestination }) => {
   if (!device || !dongleId) {
     return null;
   }
@@ -30,7 +30,7 @@ const Dashboard = ({ primeNav, device, dongleId }) => {
           ? <Prime />
           : (
             <>
-              <Navigation hasNav={device.prime && device.eligible_features?.nav} />
+              <Navigation hasNav={device.prime && device.eligible_features?.nav} navigationDestination={navigationDestination} />
               <DeviceInfo />
               <DriveList />
             </>
@@ -44,6 +44,7 @@ const stateToProps = Obstruction({
   dongleId: 'dongleId',
   primeNav: 'primeNav',
   device: 'device',
+  navigationDestination: 'navigationDestination',
 });
 
 export default connect(stateToProps)(Dashboard);

src/components/Navigation/index.jsx

@@ -350,7 +350,7 @@ class Navigation extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { dongleId, device } = this.props;
+    const { dongleId, device, navigationDestination } = this.props;
     const { geoLocateCoords, search, carLastLocation, carNetworkLocation, searchSelect, favoriteLocations } = this.state;
 
     if ((carLastLocation && !prevState.carLastLocation) || (carNetworkLocation && !prevState.carNetworkLocation)
@@ -359,6 +359,12 @@ class Navigation extends Component {
       this.flyToMarkers();
     }
 
+    if (prevProps.navigationDestination !== navigationDestination) {
+      this.getDeviceLastLocation().then(() => {
+        this.setDestination(navigationDestination.latitude, navigationDestination.longitude);
+      })
+    }
+
     if (prevProps.dongleId !== dongleId) {
       this.setState({
         ...initialState,
@@ -399,6 +405,40 @@ class Navigation extends Component {
     }
   }
 
+  setDestination(latitude, longitude) {
+    this.focus();
+
+    const item = {
+      favoriteId: null,
+      favoriteIcon: null,
+      address: {
+        label: '',
+      },
+      title: '',
+      resultType: 'place',
+      position: {
+        lat: latitude,
+        lng: longitude,
+      },
+    };
+    this.onSearchSelect(item, 'pin');
+    reverseLookup([longitude, latitude], false).then((location) => {
+      if (!location) {
+        return;
+      }
+
+      this.setState((prevState) => ({
+        searchSelect: {
+          ...prevState.searchSelect,
+          address: {
+            label: location.details,
+          },
+          title: location.place,
+        },
+      }));
+    });
+  }
+
   updateDevice() {
     if (Demo.isDemo()) {
       return;

src/reducers/globalState.js

@@ -431,6 +431,9 @@ export default function reducer(_state, action) {
         end: action.end,
       };
       break;
+    case Types.ACTION_SET_NAVIGATION_DESTINATION:
+      state.navigationDestination = action.navigationDestination
+      break;
     default:
       return state;
   }

src/url.js

@@ -48,3 +48,20 @@ export function getClipsNav(pathname) {
   }
   return null;
 }
+
+export function getNavigationNav(pathname, search) {
+  let parts = pathname.split('/');
+  parts = parts.filter((m) => m.length);
+
+  if (parts.length >= 2 && parts[0] !== 'auth' && parts[1] == 'navigate') {
+    let params = new URLSearchParams(search);
+    if (params.has('lat') && params.has('long')) {
+      return {
+        lat: parseFloat(params.get('lat')),
+        long: parseFloat(params.get('long')),
+      };
+    }
+    return {};
+  }
+  return null;
+}