refactor(map): improve readability and fix errors

- added `setSelectedMarker(undefined)` to `onMapPress` function in `SueReportLocation` and `SueMapViewScreen` to remove callout text from the screen
- added `calculateBoundsToFitAllMarkers` helper to prevent the Map.tsx component from growing larger
- updated the name of the `calculateBounds` helper to `calculateBoundsToFitAllMarkers` for clarity
- added comment line to understand values in `bounds` array
- increased the `animationDuration` value from 0 to 1000 to solve the problem of the map updating itself according to the desired location after a certain period of time
- updated or deleted unnecessary codes

SVA-1365

src/components/SUE/report/SueReportLocation.tsx

@@ -184,6 +184,7 @@ export const SueReportLocation = ({
     nativeEvent: { action: string; coordinate: Location.LocationObjectCoords };
   }) => {
     if (nativeEvent.action !== 'marker-press' && nativeEvent.action !== 'callout-inside-press') {
+      setSelectedMarker(undefined);
       setSelectedPosition(nativeEvent.coordinate);
       setUpdatedRegion(false);
       setUpdateRegionFromImage(false);
@@ -250,7 +251,7 @@ export const SueReportLocation = ({
           mapCenterPosition={mapCenterPosition}
           mapStyle={styles.map}
           onMapPress={onMapPress}
-          onMarkerPress={(id) => setSelectedMarker(id)}
+          onMarkerPress={setSelectedMarker}
           onMyLocationButtonPress={onMyLocationButtonPress}
           onMaximizeButtonPress={() =>
             navigation.navigate(ScreenName.SueReportMapView, {

src/components/map/Map.tsx

@@ -12,7 +12,12 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
 import Supercluster from 'supercluster';
 
 import { colors, device, Icon, normalize } from '../../config';
-import { imageHeight, imageWidth, truncateText } from '../../helpers';
+import {
+  calculateBoundsToFitAllMarkers,
+  imageHeight,
+  imageWidth,
+  truncateText
+} from '../../helpers';
 import { useLocationSettings } from '../../hooks';
 import { MapMarker } from '../../types';
 import { LoadingSpinner } from '../LoadingSpinner';
@@ -106,24 +111,6 @@ const renderCluster = (cluster: TCluster) => {
 };
 
 /* eslint-disable complexity */
-// calculate the bounds of the map to fit all markers
-const calculateBounds = (coordinates) => {
-  const [minLng, minLat] = coordinates.reduce(
-    (prev, curr) => [Math.min(prev[0], curr[0]), Math.min(prev[1], curr[1])],
-    [Infinity, Infinity]
-  );
-
-  const [maxLng, maxLat] = coordinates.reduce(
-    (prev, curr) => [Math.max(prev[0], curr[0]), Math.max(prev[1], curr[1])],
-    [-Infinity, -Infinity]
-  );
-
-  const deltaLng = (maxLng - minLng) * 0.1;
-  const deltaLat = (maxLat - minLat) * 0.1;
-
-  return { minLng, minLat, maxLng, maxLat, deltaLng, deltaLat };
-};
-
 export const Map = ({
   calloutTextEnabled = false,
   clusterDistance = 50,
@@ -195,6 +182,15 @@ export const Map = ({
         radius: clusterDistance,
         maxZoom: MAX_ZOOM_LEVEL
       });
+      /**
+       * the values represent the maximum possible latitude and longitude values for the earth's
+       * coordinate system, defining a rectangular area that covers the entire world.
+       * The values are based on the following assumptions:
+       * Westernmost longitude: 2° E (covering parts of France and the Netherlands)
+       * Easternmost longitude: 18° E (covering parts of Poland and the Czech Republic)
+       * Northernmost latitude: 56° N (covering parts of Denmark)
+       * Southernmost latitude: 46° N (covering parts of Switzerland and Austria)
+       */
       const bounds = [2, 46, 18, 56];
       const points = mapLocations;
 
@@ -211,15 +207,16 @@ export const Map = ({
       if (locations.length === 1) {
         if (cameraRef.current) {
           cameraRef.current.setCamera({
-            animationDuration: 0,
+            animationDuration: 1000,
             centerCoordinate: coordinates[0],
             zoomLevel: ONE_MARKER_ZOOM_LEVEL
           });
           setIsLoading(false);
           setIsInitialFit(false);
         }
       } else if (coordinates && coordinates.length > 0) {
-        const { minLng, minLat, maxLng, maxLat, deltaLng, deltaLat } = calculateBounds(coordinates);
+        const { minLng, minLat, maxLng, maxLat, deltaLng, deltaLat } =
+          calculateBoundsToFitAllMarkers(coordinates);
 
         if (cameraRef.current) {
           cameraRef.current.fitBounds(
@@ -228,13 +225,8 @@ export const Map = ({
             0
           );
 
-          if (clusteringEnabled) {
-            setIsLoading(false);
-            setIsInitialFit(false);
-          } else {
-            setIsLoading(false);
-            setIsInitialFit(false);
-          }
+          setIsLoading(false);
+          setIsInitialFit(false);
         }
       }
     }
@@ -463,12 +455,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute'
   },
-  clusterMarker: {
-    alignItems: 'center',
-    height: normalize(60),
-    justifyContent: 'center',
-    width: normalize(60)
-  },
   hitBox: {
     alignItems: 'center',
     height: normalize(HIT_BOX_SIZE),

src/components/settings/LocationSettings.js

@@ -147,8 +147,5 @@ export const LocationSettings = () => {
 const styles = StyleSheet.create({
   containerStyle: {
     marginBottom: normalize(21)
-  },
-  mapContainer: {
-    height: normalize(200)
   }
 });

src/helpers/calculateBoundsToFitAllMarkers.ts

@@ -0,0 +1,16 @@
+export const calculateBoundsToFitAllMarkers = (coordinates: any) => {
+  const [minLng, minLat] = coordinates.reduce(
+    (prev, curr) => [Math.min(prev[0], curr[0]), Math.min(prev[1], curr[1])],
+    [Infinity, Infinity]
+  );
+
+  const [maxLng, maxLat] = coordinates.reduce(
+    (prev, curr) => [Math.max(prev[0], curr[0]), Math.max(prev[1], curr[1])],
+    [-Infinity, -Infinity]
+  );
+
+  const deltaLng = (maxLng - minLng) * 0.1;
+  const deltaLat = (maxLat - minLat) * 0.1;
+
+  return { minLng, minLat, maxLng, maxLat, deltaLng, deltaLat };
+};

src/helpers/index.js

@@ -5,6 +5,7 @@ export * from './parser';
 export * from './accessibilityListeners';
 export * from './addressHelper';
 export * from './bookmarkHelper';
+export * from './calculateBoundsToFitAllMarkers';
 export * from './calendarHelper';
 export * from './cameraHelper';
 export * from './colorHelper';

src/screens/SUE/SueMapViewScreen.tsx

@@ -65,12 +65,13 @@ export const SueMapViewScreen = ({ route }: { route: any }) => {
             setSelectedPosition(undefined);
           }
         }}
-        onMarkerPress={(id) => setSelectedMarker(id)}
+        onMarkerPress={setSelectedMarker}
         onMapPress={async ({ nativeEvent }) => {
           if (
             nativeEvent.action !== 'marker-press' &&
             nativeEvent.action !== 'callout-inside-press'
           ) {
+            setSelectedMarker(undefined);
             setSelectedPosition(nativeEvent.coordinate);
             setUpdatedRegion(false);