From 3604028d87b9073e2ce2c48de561b8082a539f5c Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Tue, 19 Mar 2024 22:46:13 +0530 Subject: [PATCH] added success failure call back --- .../LiveLocationTracking.js | 100 ++++++++++++------ __app/component/LocateMe/LocateMe.js | 8 +- __app/component/services/handlerService.js | 2 +- 3 files changed, 74 insertions(+), 36 deletions(-) diff --git a/__app/component/LiveLocationTracking/LiveLocationTracking.js b/__app/component/LiveLocationTracking/LiveLocationTracking.js index 3d22d9f..af800ac 100644 --- a/__app/component/LiveLocationTracking/LiveLocationTracking.js +++ b/__app/component/LiveLocationTracking/LiveLocationTracking.js @@ -1,8 +1,14 @@ import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import dependentService from '../services/dependentJsService'; +import { handleError, handleSuccess } from '../services/handlerService'; function LiveLocationTracking({ + disbaleToast, + successCb, + failureCb, + successMsg, + failureMsg, googleKey, isProdKey, zoom, @@ -30,49 +36,53 @@ function LiveLocationTracking({ .route({ origin: currentLocations, destination: destinationLatLng, - travelMode: google.maps.TravelMode.TWO_WHEELER, + travelMode: google.maps.TravelMode.DRIVING, }) .then((response) => { directionsRenderer.setDirections(response); - }).catch((e) => console.warn(`Directions request failed due to ${e}`)); + handleSuccess({ disbaleToast, msgType: 'SUCCESS', msg: successMsg, successCb, data: currentLocations }); + }).catch(() => handleError({ disbaleToast, msgType: 'UNABLE_TO_LOCATE_DIRECTION', msg: failureMsg.unableToLocateDirection || 'Unable To get Updated Location', failureCb })); } }; - // WALKING - bike - // TWO_WHEELER - Walking - // DRIVING - Car + const locationError = (error) => { if (error) { if (error.code === 1 && error.message === 'User denied Geolocation') { - console.warn('User denied Geolocation'); - } else { - console.warn('Location loading failed'); + handleError({ disbaleToast, msgType: 'PERMISSION_DENIED', msg: failureMsg.permissionDenied || 'Permission Denied', failureCb }); } + handleError({ disbaleToast, msgType: 'LOCATION_NOT_FOUND', msg: failureMsg.locationNotFound || 'Unable To get Updated Location', failureCb }); } }; useEffect(() => { - const googleMapUrl = `https://maps.googleapis.com/maps/api/js?${isProdKey ? 'client' : 'key'}=${googleKey}`; - dependentService(googleMapUrl, 'googleMapLocationAPI') - .then(async () => { - directionsService = new google.maps.DirectionsService(); - directionsRenderer = new google.maps.DirectionsRenderer(); - createMap(originLatLng); + if (LiveLocationTracking.isBrowserSupport()) { + const googleMapUrl = `https://maps.googleapis.com/maps/api/js?${isProdKey ? 'client' : 'key'}=${googleKey}`; + dependentService(googleMapUrl, 'googleMapLocationAPI') + .then(async () => { + try { + directionsService = new google.maps.DirectionsService(); + directionsRenderer = new google.maps.DirectionsRenderer(); + createMap(originLatLng); + + // Adding a watch when user cordinates changes to replot the direction + watchID = navigator.geolocation.watchPosition( + (newPosition) => { + const lat = newPosition.coords.latitude; + const lng = newPosition.coords.longitude; + plotDirection({ lat, lng }); + }, + locationError(), + { enableHighAccuracy: true, timeout: 30000, maximumAge: 2000, distanceFilter: 100 }, + ); + } catch (error) { + console.log(error); + } + }) + .catch(() => handleError({ disbaleToast, msgType: 'SCRIPT_NOT_LOADED', msg: failureMsg.scriptNotLoaded || 'Unable to load script properly', failureCb })); + } else { + return handleError({ disbaleToast, msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); + } - // Adding a watch when user cordinates changes to replot the direction - watchID = navigator.geolocation.watchPosition( - (newPosition) => { - const lat = newPosition.coords.latitude; - const lng = newPosition.coords.longitude; - console.log(lat, lng); - plotDirection({ lat, lng }); - }, - locationError(), - { enableHighAccuracy: true, timeout: 30000, maximumAge: 2000, distanceFilter: 100 }, - ); - }) - .catch((error) => { - console.warn(error); - }); return () => { if (watchID) { navigator.geolocation.clearWatch(watchID); @@ -85,17 +95,45 @@ function LiveLocationTracking({ ); } +LiveLocationTracking.isBrowserSupport = () => navigator?.geolocation?.watchPosition; + LiveLocationTracking.propTypes = { + disbaleToast: PropTypes.bool, + successCb: PropTypes.func, + failureCb: PropTypes.func, + successMsg: PropTypes.string, + failureMsg: PropTypes.object, + isProdKey: PropTypes.bool, + googleKey: PropTypes.string.isRequired, destinationLatLng: PropTypes.object.isRequired, zoom: PropTypes.number, mapTypeControl: PropTypes.bool, - googleKey: PropTypes.string.isRequired, - isProdKey: PropTypes.bool.isRequired, }; LiveLocationTracking.defaultProps = { + disbaleToast: false, + successCb: () => {}, + failureCb: () => {}, + successMsg: '', + failureMsg: { + unSupported: '', + permissionDenied: '', + unableToLocateDirection: '', + browserPermissionCheckFailed: '', + unableToLoadGoogleAPI: '', + locationNotFound: '', + scriptNotLoaded: '', + invalidLatLng: '', + googleAPIKeyMissing: '', + error: '', + }, + isProdKey: true, zoom: 13, mapTypeControl: false, }; export default LiveLocationTracking; + +// WALKING - bike +// TWO_WHEELER - Walking +// DRIVING - Car diff --git a/__app/component/LocateMe/LocateMe.js b/__app/component/LocateMe/LocateMe.js index 808ce01..463e0eb 100644 --- a/__app/component/LocateMe/LocateMe.js +++ b/__app/component/LocateMe/LocateMe.js @@ -11,14 +11,14 @@ const checkBrowserPermit = async (disbaleToast, failureMsg, failureCb) => { return handleError({ disbaleToast, msgType: 'PERMISSION_DENIED', msg: failureMsg.permissionDenied || 'Permission Denied', failureCb }); } } catch (error) { - return handleError({ disbaleToast, msgType: 'BROWSER_PERMISION_CHECK_FAILED', msg: failureMsg.browserPermissionCheckFailed || 'Unable to check browser permission', failureCb }); + return handleError({ disbaleToast, msgType: 'BROWSER_PERMISION_API_FAILED', msg: failureMsg.browserPermissionAPIFailed || 'Unable to check browser permission', failureCb }); } return true; }; const checkScriptInBrowser = async (disbaleToast, failureMsg, failureCb, isProdKey, googleKey) => { if (!googleKey) { - return handleError({ disbaleToast, msgType: 'GOOGLE_API_KEY_MISSING', msg: failureMsg.browserPermissionCheckFailed || 'Unable to check browser permission', failureCb }); + return handleError({ disbaleToast, msgType: 'GOOGLE_API_KEY_MISSING', msg: failureMsg.googleAPIKeyMissing || 'Unable to check browser permission', failureCb }); } const googleApiUrl = `https://maps.googleapis.com/maps/api/js?${isProdKey ? 'client' : 'key'}=${googleKey}&libraries=places&loading=async`; @@ -152,10 +152,10 @@ LocateMe.defaultProps = { failureMsg: { unSupported: '', permissionDenied: '', - browserPermissionCheckFailed: '', + browserPermissionAPIFailed: '', + googleAPIKeyMissing: '', unableToLoadGoogleAPI: '', invalidLatLng: '', - googleAPIKeyMissing: '', error: '', }, isProdKey: true, diff --git a/__app/component/services/handlerService.js b/__app/component/services/handlerService.js index e603ee0..a29534b 100644 --- a/__app/component/services/handlerService.js +++ b/__app/component/services/handlerService.js @@ -1,5 +1,5 @@ export const handleSuccess = ({ disbaleToast, msg, msgType, successCb, data }) => { - console.log(`%c${msgType} : %c${data}`, 'color: green; font-size: 20px', 'color: #4a004e; font-size: 20px'); + console.log(`%c${msgType} : %s`, 'color: green; font-size: 20px', '', data); if (!disbaleToast && msg) console.log(`%c${msgType} : %c${data}`, 'color: green; font-size: 20px', 'color: #4a004e; font-size: 20px'); successCb({ msgType,