asking for user permission for location

package.json

@@ -64,7 +64,6 @@
 	"dependencies": {
 		"@kossnocorp/desvg": "^0.2.0",
 		"@rocket.chat/sdk": "^1.0.0-alpha.28",
-		"axios": "^0.18.0",
 		"date-fns": "^1.29.0",
 		"desvg": "^1.0.2",
 		"fast-async": "^6.3.8",

src/components/App/index.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-lonely-if */
+/* eslint-disable no-alert */
 import { Component } from 'preact';
 import { Router, route } from 'preact-router';
 import queryString from 'query-string';
-import axios from 'axios';
 import { Livechat } from '../../api';
 import history from '../../history';
 import { loadConfig, clearConnectionAlerts, getToken } from '../../lib/main';
@@ -17,7 +18,7 @@ import ChatFinished from '../../routes/ChatFinished';
 import SwitchDepartment from '../../routes/SwitchDepartment';
 import GDPRAgreement from '../../routes/GDPRAgreement';
 import Register from '../../routes/Register';
-import { Provider as StoreProvider, Consumer as StoreConsumer } from '../../store';
+import store, { Provider as StoreProvider, Consumer as StoreConsumer } from '../../store';
 import { visibility } from '../helpers';
 import constants from '../../lib/constants';
 import { loadMessages } from '../../lib/room';
@@ -156,31 +157,84 @@ export class App extends Component {
 		I18n.on('change', this.handleLanguageChange);
 	}
 
-	location = async() => {
-		const { ip } = await axios.get(`${ 'https://cors-anywhere.herokuapp.com/' }https://api.ipify.org?format=json`)
-			.then((res) => res.data)
-			.catch((err) => err);
-
-		const location = await axios.get(`${ 'https://cors-anywhere.herokuapp.com/' }https://geoip-db.com/json/${ ip }`)
-			.then((res) => res.data)
-			.catch((err) => err);
+	permissionLocation = () => {
+		navigator.geolocation.getCurrentPosition((position) => ({
+			accessGranted: true,
+			position,
+		}), (err) => ({
+			accessGranted: false,
+			err,
+		}));
+	}
 
+	locationBackup = async() => {
+		const { ip } = await fetch(`${ 'https://cors-anywhere.herokuapp.com/' }https://api.ipify.org?format=json`, {
+			mode: 'cors',
+			headers: {
+				'Access-Control-Allow-Origin': '*',
+			},
+		}).then((res) => (res.json()));
+
+		const location = await fetch(`${ 'https://cors-anywhere.herokuapp.com/' }https://geoip-db.com/json/${ ip }`, {
+			mode: 'cors',
+			headers: {
+				'Access-Control-Allow-Origin': '*',
+			},
+		}).then((res) => (res.json()));
+
 		const token = getToken();
 		return {
 			location,
 			token,
 		};
 	}
+
+	locationPrimary = async(latitude, longitude) => {
+		const location = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${ latitude }&lon=${ longitude }`, {
+			mode: 'cors',
+			headers: {
+				'Access-Control-Allow-Origin': '*',
+			},
+		}).then((res) => (res.json()));
+
+		const token = getToken();
+		return {
+			location: location.address,
+			token,
+		};
+	}
 
 	async initialize() {
 		// TODO: split these behaviors into composable components
 		// Call loadConfig before calling Livechat.connect
 		await loadConfig();
 		await Livechat.connect();
 		const checkLocationUser = await Livechat.checkLocationUser(getToken());
+		// check user location all ready there or not
 		if (checkLocationUser && !checkLocationUser._id) {
-			const locationUser = await this.location();
-			await Livechat.sendLocationData(locationUser);
+			// Ask for permission for location
+			if (navigator.geolocation) {
+				navigator.geolocation.getCurrentPosition(async(position) => {
+					const locationUser = await this.locationPrimary(position.coords.latitude, position.coords.longitude);
+					await Livechat.sendLocationData(locationUser);
+				}, (err) => {
+					// This means user has denied location access
+					// We need then to confirm location before starting the chat
+					// Save state of location access inside store.
+					if (err) {
+						store.setState({
+							locationAccess: false,
+						});
+					}
+				});
+			} else {
+				// It means navigator is not supported in the browser, so ask
+				// for location access by backup API.
+				if (confirm('Please allow to access your location, for better assistance')) {
+					const locationUser = await this.locationBackup();
+					await Livechat.sendLocationData(locationUser);
+				}
+			}
 		}
 		this.handleTriggers();
 		CustomFields.init();