feat: (sample) Add location permissions request (#21)

* feat: (sample) Add location permissions request

The SDK has added a new feature for requesting location permissions from the host app. The user is able to revoke permissions at any time, so 'requestLocationPermissions' must be called every time before using location

* docs: (sdk) Add info about permission revoking in user guide

js-miniapp-sample/src/hooks/useGeoLocation.js

@@ -1,26 +1,34 @@
 import { useState } from 'react';
 
+import MiniApp from 'js-miniapp-sdk';
+
 const useGeoLocation = () => {
   const [state, setState] = useState({
     isWatching: false,
   });
   const watch = () => {
-    navigator.geolocation.getCurrentPosition(
-      (pos) => {
-        const { longitude, latitude } = pos.coords;
-        setState({
-          isWatching: true,
-          location: {
-            latitude,
-            longitude,
+    return MiniApp.requestLocationPermission()
+      .then(() =>
+        navigator.geolocation.getCurrentPosition(
+          (pos) => {
+            const { longitude, latitude } = pos.coords;
+            setState({
+              isWatching: true,
+              location: {
+                latitude,
+                longitude,
+              },
+            });
+          },
+          (error) => {
+            throw error;
           },
-        });
-      },
-      (error) => console.error(error),
-      {
-        enableHighAccuracy: true,
-      }
-    );
+          {
+            enableHighAccuracy: true,
+          }
+        )
+      )
+      .catch((error) => console.error(error));
   };
 
   const unwatch = () => {

js-miniapp-sample/src/hooks/useGeoLocation.test.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { act, renderHook } from '@testing-library/react-hooks';
+import MiniApp from 'js-miniapp-sdk';
 
 import useGeoLocation from './useGeoLocation';
 
@@ -23,6 +24,7 @@ describe('useGeoLocation', () => {
   beforeEach(() => {
     result = renderHook(() => useGeoLocation()).result;
     navigator.geolocation = mockGeolocation;
+    MiniApp.requestLocationPermission = jest.fn().mockResolvedValue('');
   });
 
   test('should initialize location hook', () => {
@@ -31,17 +33,31 @@ describe('useGeoLocation', () => {
     expect(state.location).toBeUndefined();
   });
 
-  test('should watch location coordinates', () => {
+  test('should watch location coordinates when permission granted', async () => {
+    MiniApp.requestLocationPermission = jest.fn().mockResolvedValue('');
+
     let [state, watch] = result.current;
-    act(() => watch());
+    await act(() => watch());
     [state] = result.current;
+
     expect(state.isWatching).toEqual(true);
     expect(state.location).toEqual(dummyCoOridinates);
   });
 
-  test('should stop watching location coordinates', () => {
+  test('should not watch location when permission not granted', async () => {
+    MiniApp.requestLocationPermission = jest.fn().mockRejectedValue('');
+
+    let [state, watch] = result.current;
+    await act(() => watch());
+    [state] = result.current;
+
+    expect(state.isWatching).toEqual(false);
+    expect(state.location).not.toEqual(dummyCoOridinates);
+  });
+
+  test('should stop watching location coordinates', async () => {
     let [state, watch, unwatch] = result.current;
-    act(() => watch());
+    await act(() => watch());
     [state] = result.current;
     expect(state.isWatching).toEqual(true);
     expect(state.location).toEqual(dummyCoOridinates);

js-miniapp-sample/src/pages/tests/web_location.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import MiniApp from 'js-miniapp-sdk';
 
 import { wrapTheme } from '../../tests/test-utils';
 import WebLocation from './../web_location';
@@ -26,6 +27,7 @@ describe('web_location', () => {
   beforeEach(() => {
     render(wrapTheme(<WebLocation />));
     navigator.geolocation = mockGeolocation;
+    MiniApp.requestLocationPermission = jest.fn().mockResolvedValue('');
   });
 
   test('should load web_location component without location details', () => {
@@ -37,9 +39,9 @@ describe('web_location', () => {
     ).toBeTruthy();
   });
 
-  test('should fetch display location', () => {
+  test('should fetch display location', async() => {
     expect(screen.queryByTestId('location-container')).not.toBeInTheDocument();
-    userEvent.click(screen.getByTestId('turn-on'));
+    await userEvent.click(screen.getByTestId('turn-on'));
     expect(screen.queryByTestId('location-container')).toBeInTheDocument();
     expect(
       screen.getByText(`${dummyCoOridinates.latitude}`)
@@ -49,10 +51,10 @@ describe('web_location', () => {
     ).toBeInTheDocument();
   });
 
-  test('should turn off geo-location', () => {
-    userEvent.click(screen.getByTestId('turn-on'));
+  test('should turn off geo-location',async () => {
+    await userEvent.click(screen.getByTestId('turn-on'));
     expect(screen.queryByTestId('location-container')).toBeInTheDocument();
-    userEvent.click(screen.getByTestId('turn-off'));
+    await userEvent.click(screen.getByTestId('turn-off'));
     expect(screen.queryByTestId('location-container')).not.toBeInTheDocument();
   });
 });

js-miniapp-sdk/README.md

@@ -62,11 +62,11 @@ miniApp.getUniqueId()
 
 ### 3. Request Permissions
 
-There must be permission requests from miniapp to access some mobile components and data.
+There must be permission requests from miniapp to access some mobile components and data. Users can revoke a permission at any time, so you must always request the permission every time before you use the associated API.
 
 | Permission | Method | Description |
 | --- | --- | --- |
-| LOCATION | `requestLocationPermission()` | The current location of the device.<br>Data position can be accessible via geolocation request. |
+| LOCATION | `requestLocationPermission()` | The current location of the device.<br>Data position can be accessible via geolocation request (`navigator.geolocation`). |
 
 #### Usage example