igorkamyshev · igorkamyshev · Aug 1, 2024 · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/.changeset/dry-cats-wash.md b/.changeset/dry-cats-wash.md
@@ -0,0 +1,5 @@
+---
+'@withease/web-api': minor
+---
+
+Add `trackGeolocation` integration
diff --git a/apps/web-api-demo/geolocation.html b/apps/web-api-demo/geolocation.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>web-api demo</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <section>
+      <h2>Geolocation</h2>
+
+      <p>latitude: <span id="latitude" /></p>
+      <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>
+</html>
diff --git a/apps/web-api-demo/index.html b/apps/web-api-demo/index.html
@@ -16,6 +16,7 @@ <h1>@withease/web-api</h1>
       <li><a href="/page-visibility.html">page-visibility</a></li>
       <li><a href="/screen-orientation.html">screen-orientation</a></li>
       <li><a href="/preferred-languages.html">preferred-languages</a></li>
+      <li><a href="/geolocation.html">geolocation</a></li>
     </ul>
   </body>
 </html>
diff --git a/apps/web-api-demo/src/geolocation.ts b/apps/web-api-demo/src/geolocation.ts
@@ -0,0 +1,22 @@
+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, watching } = trackGeolocation({});
+
+$latitude.watch((latitude) => {
+  console.log('latitude', latitude);
+  latitudeElement.textContent = JSON.stringify(latitude);
+});
+$longitude.watch((longitude) => {
+  console.log('longitude', longitude);
+  longitudeElement.textContent = JSON.stringify(longitude);
+});
+
+getLocationButton.addEventListener('click', () => request());
+startWatchingButton.addEventListener('click', () => watching.start());
+stopWatchingButton.addEventListener('click', () => watching.stop());
diff --git a/apps/web-api-demo/test/geolocation.spec.ts b/apps/web-api-demo/test/geolocation.spec.ts
@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+const GEOLOCATION_PAGE = '/geolocation.html';
+
+test.use({
+  geolocation: { longitude: 41.890221, latitude: 12.492348 },
+  permissions: ['geolocation'],
+});
+
+test('request', async ({ page, context }) => {
+  await page.goto(GEOLOCATION_PAGE);
+
+  const latitudeContainer = await page.$('#latitude');
+  const longitudeContainer = await page.$('#longitude');
+  const getLocationButton = await page.$('#get-location');
+
+  // By default it should be null
+  expect(await latitudeContainer!.textContent()).toBe('null');
+  expect(await longitudeContainer!.textContent()).toBe('null');
+
+  // After requesting the location, it should be updated
+  await getLocationButton!.click();
+  expect(await latitudeContainer!.textContent()).toBe('12.492348');
+  expect(await longitudeContainer!.textContent()).toBe('41.890221');
+
+  // Change geolocation, values should NOT be updated
+  await context.setGeolocation({ longitude: 22.492348, latitude: 32.890221 });
+  expect(await latitudeContainer!.textContent()).toBe('12.492348');
+  expect(await longitudeContainer!.textContent()).toBe('41.890221');
+  // Request the location again, values should be updated
+  await getLocationButton!.click();
+  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');
+});
diff --git a/apps/website/docs/.vitepress/config.mjs b/apps/website/docs/.vitepress/config.mjs
@@ -107,6 +107,10 @@ export default defineConfig({
               text: 'Preferred languages',
               link: '/web-api/preferred_languages',
             },
+            {
+              text: 'Geolocation',
+              link: '/web-api/geolocation',
+            },
           ],
         },
       ]),

diff --git a/apps/website/docs/web-api/geolocation.live.vue b/apps/website/docs/web-api/geolocation.live.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { trackGeolocation } from '@withease/web-api';
+import { useUnit } from 'effector-vue/composition';
+
+const geo = trackGeolocation();
+
+const { latitude, longitude, request } = useUnit({
+  latitude: geo.$latitude,
+  longitude: geo.$longitude,
+  request: geo.request,
+});
+</script>
+
+<template>
+  <p>latitude: {{ latitude }}</p>
+  <p>longitude: {{ longitude }}</p>
+
+  <button v-on:click="request">Request geolocation</button>
+</template>