Add basic geolocation watching

Author: igorkamyshev

apps/web-api-demo/geolocation.html

@@ -16,6 +16,9 @@ <h2>Geolocation</h2>
       <p>longitude: <span id="longitude" /></p>
 
       <button id="get-location">Get Location</button>
+
+      <button id="start-watching">Start Watching</button>
+      <button id="stop-watching">Stop Watching</button>
     </section>
     <script type="module" src="/src/geolocation.ts"></script>
   </body>

apps/web-api-demo/src/geolocation.ts

@@ -3,8 +3,10 @@ import { trackGeolocation } from '@withease/web-api';
 const latitudeElement = document.querySelector('#latitude')!;
 const longitudeElement = document.querySelector('#longitude')!;
 const getLocationButton = document.querySelector('#get-location')!;
+const startWatchingButton = document.querySelector('#start-watching')!;
+const stopWatchingButton = document.querySelector('#stop-watching')!;
 
-const { $latitude, $longitude, request } = trackGeolocation({});
+const { $latitude, $longitude, request, watching } = trackGeolocation({});
 
 $latitude.watch((latitude) => {
   console.log('latitude', latitude);
@@ -16,3 +18,5 @@ $longitude.watch((longitude) => {
 });
 
 getLocationButton.addEventListener('click', () => request());
+startWatchingButton.addEventListener('click', () => watching.start());
+stopWatchingButton.addEventListener('click', () => watching.stop());

apps/web-api-demo/test/geolocation.spec.ts

@@ -7,7 +7,7 @@ test.use({
   permissions: ['geolocation'],
 });
 
-test('should show geolocation', async ({ page, context }) => {
+test('request', async ({ page, context }) => {
   await page.goto(GEOLOCATION_PAGE);
 
   const latitudeContainer = await page.$('#latitude');
@@ -32,3 +32,32 @@ test('should show geolocation', async ({ page, context }) => {
   expect(await latitudeContainer!.textContent()).toBe('32.890221');
   expect(await longitudeContainer!.textContent()).toBe('22.492348');
 });
+
+test('watch', async ({ page, context }) => {
+  await page.goto(GEOLOCATION_PAGE);
+
+  const latitudeContainer = await page.$('#latitude');
+  const longitudeContainer = await page.$('#longitude');
+  const startWatchingButton = await page.$('#start-watching');
+  const stopWatchingButton = await page.$('#stop-watching');
+
+  // By default it should be null
+  expect(await latitudeContainer!.textContent()).toBe('null');
+  expect(await longitudeContainer!.textContent()).toBe('null');
+
+  // After watching the location, it should be updated immediately
+  await startWatchingButton!.click();
+  expect(await latitudeContainer!.textContent()).toBe('12.492348');
+  expect(await longitudeContainer!.textContent()).toBe('41.890221');
+
+  // Change geolocation, values should be updated immediately
+  await context.setGeolocation({ longitude: 22.492348, latitude: 32.890221 });
+  expect(await latitudeContainer!.textContent()).toBe('32.890221');
+  expect(await longitudeContainer!.textContent()).toBe('22.492348');
+
+  // Stop watching and change geolocation, values should NOT be updated
+  await stopWatchingButton!.click();
+  await context.setGeolocation({ longitude: 42.492348, latitude: 52.890221 });
+  expect(await latitudeContainer!.textContent()).toBe('32.890221');
+  expect(await longitudeContainer!.textContent()).toBe('22.492348');
+});

packages/web-api/src/geolocation.ts

@@ -9,6 +9,7 @@ import {
   sample,
   restore,
   attach,
+  scopeBind,
 } from 'effector';
 
 import { readonly } from './shared';
@@ -172,10 +173,30 @@ export function trackGeolocation(
   const $unsubscribe = restore(saveUnsubscribe, null);
 
   const watchPositionFx = createEffect(() => {
-    // TODO: real code
-    newPosition({} as any);
-    failed({} as any);
-    saveUnsubscribe(() => null);
+    const boundNewPosition = scopeBind(newPosition, { safe: true });
+    const boundFailed = scopeBind(failed, { safe: true });
+    const boundSaveUnsubscribe = scopeBind(saveUnsubscribe, { safe: true });
+
+    const unwatchMap = new Map<(id: number) => void, number>();
+
+    for (const provider of providres) {
+      if (isDefaultProvider(provider)) {
+        const watchId = provider.watchPosition(
+          boundNewPosition,
+          boundFailed,
+          params
+        );
+
+        unwatchMap.set((id: number) => provider.clearWatch(id), watchId);
+      }
+    }
+
+    boundSaveUnsubscribe(() => {
+      for (const [unwatch, id] of unwatchMap) {
+        unwatch(id);
+        unwatchMap.delete(unwatch);
+      }
+    });
   });
 
   const unwatchPositionFx = attach({