NTP-55956 (#1161)

src/reducer/nearbyCasesSlice.ts

@@ -8,6 +8,7 @@ const initialState = {
   locationNearbyCasesListUpdated: {} as IGeolocationCoordinate,
   isPullToRefreshNearbyCasesVisible: false as boolean,
   caseReferenceIdToDistanceMap: new Map() as Map<string, number>,
+  addressToDistanceMap: new Map() as Map<string, number>,
   sortTabSelected: TABS_KEYS.HIGHEST_OD as string,
 };
 
@@ -30,6 +31,9 @@ export const nearbyCasesListSlice = createSlice({
     setSortTabSelected: (state, action) => {
       state.sortTabSelected = action.payload;
     },
+    setAddressToDistanceMap: (state, action) => {
+      state.addressToDistanceMap = action.payload;
+    },
     resetNearbyCasesData: () => initialState,
   },
 });
@@ -40,6 +44,7 @@ export const {
   setIsPullToRefreshNearbyCasesVisible,
   setCaseReferenceIdToDistanceMap,
   setSortTabSelected,
+  setAddressToDistanceMap,
   resetNearbyCasesData,
 } = nearbyCasesListSlice.actions;
 

src/screens/addresses/actions.ts

@@ -9,30 +9,76 @@ import {
 } from '@reducers/topAddressesSlice';
 import { AppDispatch } from '@store';
 import { PAGE_END } from './constants';
+import { ICaseItemLatLongData } from '@screens/allCases/interface';
+import store from '@store';
+import { getGeolocationDistance } from '@screens/allCases/allCasesActions';
+import { getDistanceFromLatLonInKm } from '@components/utlis/commonFunctions';
+import { setAddressToDistanceMap } from '@reducers/nearbyCasesSlice';
+import { ILocationData } from '@screens/addresses/interfaces';
 
-export const getTopAddresses = (caseId: string, start: number) => (dispatch: AppDispatch) => {
+export const getTopAddresses = (caseId: string, start: number) => async (dispatch: AppDispatch) => {
   dispatch(setTopAddressesLoading({ caseId, isLoading: true }));
   const url = getApiUrl(ApiKeys.GET_TOP_ADDRESSES);
-  axiosInstance
-    .get(url, {
+
+  try {
+    const response = await axiosInstance.get(url, {
       params: { caseReferenceId: caseId, startingRank: start },
-    })
-    .then((res) => {
-      if (res?.data) {
-        const { unifiedLocations = [], totalLocationEntities = 0 } = res?.data || {};
-        dispatch(
-          setTopAddresses({
-            caseId,
-            addresses: unifiedLocations,
-            totalLocationEntities,
-          })
-        );
-      }
-    })
-    .catch((error) => {})
-    .finally(() => {
-      dispatch(setTopAddressesLoading({ caseId, isLoading: false }));
     });
+
+    if (response?.data) {
+      const { unifiedLocations = [], totalLocationEntities = 0 } = response.data || {};
+      dispatch(
+        setTopAddresses({
+          caseId,
+          addresses: unifiedLocations,
+          totalLocationEntities,
+        })
+      );
+
+      const deviceGeolocationCoordinate =
+        store?.getState()?.foregroundService?.deviceGeolocationCoordinate || {};
+      const agentId = store?.getState()?.user?.user?.referenceId!;
+      const source = {
+        id: agentId,
+        latitude: deviceGeolocationCoordinate?.latitude,
+        longitude: deviceGeolocationCoordinate?.longitude,
+      };
+
+      const destinations: ICaseItemLatLongData[] = [];
+      unifiedLocations?.forEach((location: ILocationData) => {
+        destinations.push({
+          id: location?.referenceId,
+          latitude: location?.latitude,
+          longitude: location?.longitude,
+        });
+      });
+
+      let addressDistanceMap: Map<string, number> = new Map();
+      if (destinations.length > 0) {
+        addressDistanceMap = await getGeolocationDistance({
+          source,
+          destinations,
+        });
+
+        if (!addressDistanceMap || addressDistanceMap?.size === 0) {
+          destinations?.forEach((destination) => {
+            const distanceInKm = getDistanceFromLatLonInKm(
+              destination,
+              deviceGeolocationCoordinate
+            );
+            if (distanceInKm) {
+              addressDistanceMap?.set(destination?.id, distanceInKm);
+            }
+          });
+        }
+        store.dispatch(setAddressToDistanceMap(addressDistanceMap));
+      }
+    }
+  } catch (error) {
+    console.error('Error fetching top addresses:', error);
+  } finally {
+    dispatch(setTopAddressesLoading({ caseId, isLoading: false }));
+  }
 };
 
 export const getOtherAddresses = (caseId: string) => (dispatch: AppDispatch) => {

src/screens/addresses/common/AddressItemHeader.tsx

@@ -33,17 +33,11 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
 
   const { pinCode, city, latitude, longitude, rank, visited, locationSubType } =
     locationDetails || {};
-  const deviceGeolocationCoordinate = useAppSelector(
-    (state) => state.foregroundService?.deviceGeolocationCoordinate
+  const addressToDistanceMap = useAppSelector(
+    (state) => state.nearbyCasesSlice?.addressToDistanceMap
   );
+  const distanceOfAddress = addressToDistanceMap?.get(locationDetails?.referenceId);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const relativeDistanceBwLatLong = useMemo(() => {
-    const distance = getDistanceFromLatLonInKm(deviceGeolocationCoordinate, {
-      latitude,
-      longitude,
-    });
-    return `${relativeDistanceFormatter(distance)} km`;
-  }, [deviceGeolocationCoordinate]);
 
   const addressString = useMemo(() => {
     return [pinCode, city].filter(Boolean).join(', ');
@@ -91,14 +85,14 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
           latitude={latitude}
           longitude={longitude}
           handleOpenMapForAddresses={handleOpenMapForAddresses}
-          relativeDistanceBwLatLong={relativeDistanceBwLatLong}
+          relativeDistanceBwLatLong={`${Number(distanceOfAddress?.toFixed(1))} km`}
           style={GenericStyles.pr16}
           isSimilarAddressPage={isSimilarAddressPage}
         />
       ) : (
         <Button
           onPress={handleOpenLocation}
-          title={relativeDistanceBwLatLong}
+          title={`${Number(distanceOfAddress?.toFixed(1))} km`}
           variant="primaryText"
           textStyle={[GenericStyles.fontSize12, GenericStyles.fw500, GenericStyles.mr2]}
           underlayColor="transparent"

src/screens/caseDetails/AllocatedAddressDetails.tsx

@@ -1,11 +1,6 @@
 import MapDirectionIcon from '@assets/icons/MapDirectionIcon';
-import { CLICKSTREAM_EVENT_NAMES, LocalStorageKeys } from '@common/Constants';
-import {
-  getAsyncStorageItem,
-  getDistanceFromLatLonInKm,
-  getGoogleMapUrl,
-  getGoogleMapUrlForAddressText,
-} from '@components/utlis/commonFunctions';
+import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
+import { getGoogleMapUrl, getGoogleMapUrlForAddressText } from '@components/utlis/commonFunctions';
 import { useAppSelector } from '@hooks';
 import { IGeolocationCoordinate } from '@interfaces/addressGeolocation.types';
 import { COLORS } from '@rn-ui-lib/colors';
@@ -16,11 +11,12 @@ import { GenericStyles } from '@rn-ui-lib/styles';
 import OpenMapOptionsPopUp from '@screens/addresses/common/OpenMapOptionsPopUp';
 import Tooltip from '@screens/addresses/common/Tooltip';
 import { AddressTabType } from '@screens/addressGeolocation/constant';
-import relativeDistanceFormatter from '@screens/addressGeolocation/utils/relativeDistanceFormatter';
 import { addClickstreamEvent } from '@services/clickstreamEventService';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
 import OpenMapButtonForAddresses from './OpenMapButtonForAddresses';
+import { updateNearbyCasesListAndLocation } from '@screens/allCases/utils';
+import { RootState } from '@store';
 
 interface IAllocatedAddressDetails {
   isCasePaused: boolean;
@@ -41,17 +37,12 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
     addressItemRef,
   } = props;
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const deviceGeolocationCoordinate = useAppSelector(
-    (state) => state.foregroundService?.deviceGeolocationCoordinate
-  );
+  const allCasesList = useAppSelector((state: RootState) => state?.allCases?.casesList) || [];
+  const caseDetails = useAppSelector((state: RootState) => state?.allCases?.caseDetails);
 
-  const relativeDistanceBwLatLong = useMemo(() => {
-    const distance = getDistanceFromLatLonInKm(deviceGeolocationCoordinate, {
-      latitude: addressLocation?.latitude,
-      longitude: addressLocation?.longitude,
-    });
-    return `${relativeDistanceFormatter(distance)} km`;
-  }, [deviceGeolocationCoordinate]);
+  const distanceMapOfNearbyCases =
+    useAppSelector((state) => state?.nearbyCasesSlice?.caseReferenceIdToDistanceMap) || new Map();
+  const distanceOfCaseItem = distanceMapOfNearbyCases?.get(caseId);
 
   const isGeolocation = addressStringType === AddressTabType.GEO_LOCATION;
 
@@ -74,6 +65,11 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
   };
+  useEffect(() => {
+    if (!distanceMapOfNearbyCases?.size) {
+      updateNearbyCasesListAndLocation(allCasesList, caseDetails);
+    }
+  }, []);
 
   return (
     <View
@@ -89,13 +85,15 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
           latitude={addressLocation?.latitude}
           longitude={addressLocation?.longitude}
           handleOpenMapForAddresses={handleOpenMapForAddresses}
-          relativeDistanceBwLatLong={relativeDistanceBwLatLong}
+          relativeDistanceBwLatLong={`${
+            distanceOfCaseItem ? Number(distanceOfCaseItem?.toFixed(1)) : ''
+          } km`}
           isCasePaused={isCasePaused}
         />
       ) : (
         <Button
           onPress={openLocation}
-          title={relativeDistanceBwLatLong}
+          title={`${distanceOfCaseItem ? Number(distanceOfCaseItem?.toFixed(1)) : ''} km`}
           variant="primaryText"
           textStyle={[GenericStyles.fontSize12, GenericStyles.fw500, GenericStyles.mr2]}
           underlayColor="transparent"