feat: use accuracyRadius

fingerprintjs · Jul 1, 2024 · eee5a08 · eee5a08
1 parent 4cbedb1
commit eee5a08
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/src/app/playground/Playground.tsx b/src/app/playground/Playground.tsx
@@ -31,6 +31,7 @@ import {
   MyCollapsibleContent,
 } from '../../client/components/common/Collapsible/Collapsible';
 import { ChevronSvg } from '../../client/img/chevronSvg';
+import { getZoomLevel } from './components/Map';
 
 const PLAYGROUND_COPY = {
   androidOnly: 'Applicable only to Android devices',
@@ -84,7 +85,8 @@ function Playground() {
 
   const usedIdentificationEvent = identificationEvent ?? cachedEvent;
   const { ipLocation, ...displayedAgentResponse } = agentResponse ?? {};
-  const { latitude, longitude } = ipLocation ?? {};
+  const { latitude, longitude, accuracyRadius } = ipLocation ?? {};
+  const zoom = getZoomLevel(accuracyRadius);
 
   const identificationSignals: TableCellData[][] = [
     [
@@ -140,7 +142,12 @@ function Playground() {
           <>
             {latitude && longitude && (
               <div>
-                <Map key={[latitude, longitude].toString()} position={[latitude, longitude]} height='95px' />
+                <Map
+                  key={[latitude, longitude].toString()}
+                  position={[latitude, longitude]}
+                  zoom={zoom}
+                  height='95px'
+                />
               </div>
             )}
           </>

diff --git a/src/app/playground/components/Map.tsx b/src/app/playground/components/Map.tsx
@@ -7,6 +7,19 @@ import React from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
+export const getZoomLevel = (accuracyRadius?: number) => {
+  if (!accuracyRadius || accuracyRadius > 500) {
+    // Continent level zoon
+    return 2;
+  }
+  if (accuracyRadius > 100) {
+    // Country level zoom
+    return 5;
+  }
+  // City level zoom
+  return 9;
+};
+
 // This is a workaround for the marker icon not showing up out of the box
 const DefaultIcon = L.divIcon({
   html: `<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
@@ -24,13 +37,15 @@ type MapProps = {
   position: [number, number];
   height?: string;
   width?: string;
+  zoom?: number;
 };
 
 const Map: FunctionComponent<MapProps> = (props) => {
+  const defaultZoom = 9; // Shows you rougly inside a specific city
   return (
     <MapContainer
       center={props.position}
-      zoom={9}
+      zoom={props.zoom ?? defaultZoom}
       style={{
         height: props.height ?? '200px',
         width: props.width ?? '100%',

diff --git a/src/shared/utils/locationUtils.test.ts b/src/shared/utils/locationUtils.test.ts
@@ -10,15 +10,51 @@ describe('getLocationName test', () => {
     expect(getLocationName({})).toBe(UNKNOWN_LOCATION);
   });
 
+  it('Should return only country in case of high accuracyRadius', () => {
+    expect(
+      getLocationName({
+        city: { name: 'Columbus' },
+        country: { code: 'US', name: 'United States' },
+        accuracyRadius: 1000,
+      }),
+    ).toBe('United States');
+  });
+
+  it('Should return only subdivision in case of medium accuracyRadius', () => {
+    expect(
+      getLocationName({
+        accuracyRadius: 100,
+        city: {
+          name: 'Guimarães',
+        },
+        country: {
+          code: 'PT',
+          name: 'Portugal',
+        },
+        continent: {
+          code: 'EU',
+          name: 'Europe',
+        },
+        subdivisions: [
+          {
+            isoCode: '13',
+            name: 'Porto',
+          },
+        ],
+      }),
+    ).toBe('Porto, Portugal');
+  });
+
   it('Should return only city in case of other empty params', () => {
-    expect(getLocationName({ city: { name: 'Berlin' } })).toBe('Berlin');
+    expect(getLocationName({ city: { name: 'Berlin' }, accuracyRadius: 20 })).toBe('Berlin');
   });
 
   it('Should return city and country in case of empty subdivisions', () => {
     expect(
       getLocationName({
         city: { name: 'Columbus' },
         country: { code: 'US', name: 'United States' },
+        accuracyRadius: 20,
       }),
     ).toBe('Columbus, United States');
   });
@@ -29,6 +65,7 @@ describe('getLocationName test', () => {
         city: { name: 'Columbus' },
         country: { code: 'US', name: 'United States' },
         subdivisions: [{ isoCode: 'OH', name: 'Ohio' }],
+        accuracyRadius: 20,
       }),
     ).toBe('Columbus, Ohio, United States');
   });
@@ -38,6 +75,7 @@ describe('getLocationName test', () => {
       getLocationName({
         city: { name: 'Columbus' },
         country: { code: 'US', name: 'United States' },
+        accuracyRadius: 20,
         subdivisions: [
           { isoCode: 'OH', name: 'Ohio' },
           // @ts-ignore Mock test object

diff --git a/src/shared/utils/locationUtils.ts b/src/shared/utils/locationUtils.ts
@@ -8,11 +8,11 @@ export function getLocationName(ipLocation?: EventResponseIpInfoV4Geolocation, i
     return UNKNOWN_LOCATION;
   }
   const { city, country, subdivisions } = ipLocation;
-  if (city?.name) {
+  if (city?.name && ipLocation.accuracyRadius && ipLocation?.accuracyRadius <= 50) {
     addressParts.push(city.name);
   }
 
-  if (subdivisions?.[0]?.name && includeSubdivision) {
+  if (subdivisions?.[0]?.name && ipLocation.accuracyRadius && ipLocation?.accuracyRadius <= 100 && includeSubdivision) {
     addressParts.push(subdivisions[0].name);
   }