From bb4033e6eeec6278a6029a7b312022283b49bab2 Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Mon, 6 Dec 2021 16:58:55 +0100
Subject: [PATCH] Fixed map markers unicity Improved clustering radius Renamed
 cluster component class

---
 src/components/map/ClusterMap.tsx                 | 15 ++++++++++++---
 .../{MapCluster.tsx => ClusterComponent.tsx}      |  6 +++---
 ...ClusterStyle.tsx => ClusterComponentStyle.tsx} |  4 ++++
 src/provider/CentralServerProvider.tsx            |  2 +-
 .../charging-stations/list/ChargingStations.tsx   |  4 ++--
 5 files changed, 22 insertions(+), 9 deletions(-)
 rename src/components/map/cluster/{MapCluster.tsx => ClusterComponent.tsx} (69%)
 rename src/components/map/cluster/{MapClusterStyle.tsx => ClusterComponentStyle.tsx} (92%)

diff --git a/src/components/map/ClusterMap.tsx b/src/components/map/ClusterMap.tsx
index f215a8f95..a1135262c 100644
--- a/src/components/map/ClusterMap.tsx
+++ b/src/components/map/ClusterMap.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import MapView from 'react-native-map-clustering';
-import MapCluster from './cluster/MapCluster';
+import ClusterComponent from './cluster/ClusterComponent';
 import { Region } from 'react-native-maps';
 import ChargingStation from '../../types/ChargingStation';
 import Site from '../../types/Site';
@@ -48,11 +48,11 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
             showsCompass={false}
             showsUserLocation={true}
             zoomControlEnabled={false}
+            radius={this.computeRadius(initialRegion.latitudeDelta)}
             toolbarEnabled={false}
             spiralEnabled={true}
-            radius={5}
             tracksViewChanges={false}
-            renderCluster={(cluster) => <MapCluster cluster={cluster} />}
+            renderCluster={(cluster) => <ClusterComponent key={cluster.id} cluster={cluster} />}
             spiderLineColor={commonColors.textColor}
             mapType={satelliteMap ? 'satellite' : 'standard'}
             initialRegion={initialRegion}
@@ -66,4 +66,13 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
       </View>
     )
   }
+
+  private computeRadius(latitudeDelta: number): number {
+    if(latitudeDelta <= 0.0005) {
+      return 5
+    } else if(latitudeDelta <= 0.001 ) {
+      return 20
+    }
+    return 30
+  }
 }
diff --git a/src/components/map/cluster/MapCluster.tsx b/src/components/map/cluster/ClusterComponent.tsx
similarity index 69%
rename from src/components/map/cluster/MapCluster.tsx
rename to src/components/map/cluster/ClusterComponent.tsx
index 793c74207..7581492a1 100644
--- a/src/components/map/cluster/MapCluster.tsx
+++ b/src/components/map/cluster/ClusterComponent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Marker } from 'react-native-maps';
 import { View } from 'native-base';
 import { Text } from 'react-native';
-import computeStyleSheet from './MapClusterStyle';
+import computeStyleSheet from './ClusterComponentStyle';
 
 export interface Props {
   cluster: any;
@@ -10,14 +10,14 @@ export interface Props {
 
 interface State {}
 
-export default class MapCluster extends React.Component<Props, State> {
+export default class ClusterComponent extends React.Component<Props, State> {
 
   public render() {
     const style = computeStyleSheet();
     const { geometry, onPress, id, properties } = this.props?.cluster;
     return (
       <Marker onPress={onPress} tracksViewChanges={false} key={id} coordinate={{longitude: geometry.coordinates[0], latitude: geometry.coordinates[1]}}>
-        <View style={style.cluster}><Text>{properties?.point_count}</Text></View>
+        <View style={style.cluster}><Text style={style.text}>{properties?.point_count}</Text></View>
       </Marker>
     );
   }
diff --git a/src/components/map/cluster/MapClusterStyle.tsx b/src/components/map/cluster/ClusterComponentStyle.tsx
similarity index 92%
rename from src/components/map/cluster/MapClusterStyle.tsx
rename to src/components/map/cluster/ClusterComponentStyle.tsx
index 1d5da6436..887c6a4a0 100644
--- a/src/components/map/cluster/MapClusterStyle.tsx
+++ b/src/components/map/cluster/ClusterComponentStyle.tsx
@@ -19,6 +19,10 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       borderWidth: 2,
       borderColor: commonColor.mapClusterBorder,
       zIndex: 1
+    },
+    text: {
+      fontSize: '15@s',
+      color: commonColor.textColor
     }
   });
   const portraitStyles = {};
diff --git a/src/provider/CentralServerProvider.tsx b/src/provider/CentralServerProvider.tsx
index a6dba4d73..ea84b3f69 100644
--- a/src/provider/CentralServerProvider.tsx
+++ b/src/provider/CentralServerProvider.tsx
@@ -498,7 +498,7 @@ export default class CentralServerProvider {
       headers: this.buildSecuredHeaders(),
       params
     });
-    return result.data;
+    return result?.data;
   }
 
   public async saveUserMobileToken(params: { id: string; mobileToken: string; mobileOS: string }): Promise<ActionResponse> {
diff --git a/src/screens/charging-stations/list/ChargingStations.tsx b/src/screens/charging-stations/list/ChargingStations.tsx
index 9e63c5e38..0dafc6133 100644
--- a/src/screens/charging-stations/list/ChargingStations.tsx
+++ b/src/screens/charging-stations/list/ChargingStations.tsx
@@ -3,7 +3,6 @@ import { Container, Icon, Spinner, View } from 'native-base';
 import React from 'react';
 import {
   BackHandler, Image, ImageStyle,
-  NativeEventSubscription,
   Platform,
   ScrollView, TouchableOpacity,
 } from 'react-native';
@@ -475,7 +474,8 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
           satelliteMap={satelliteMap}
           renderMarker={(chargingStation, index) => (
             <Marker
-              key={`${chargingStation.id}${index}${chargingStation.chargingStationURL}`}
+              key={chargingStation.id}
+              identifier={chargingStation.id}
               tracksViewChanges={false}
               coordinate={{ longitude: chargingStation.coordinates[0], latitude: chargingStation.coordinates[1] }}
               title={chargingStation.id}