RU-T49 PR#232 fixes

Author: ucswift

jest-setup.ts

@@ -1,5 +1,21 @@
 import '@testing-library/react-native/extend-expect';
 
+// Mock @sentry/react-native — native module (RNSentry) is unavailable in Jest
+jest.mock('@sentry/react-native', () => ({
+  captureException: jest.fn(),
+  captureMessage: jest.fn(),
+  init: jest.fn(),
+  wrap: jest.fn((fn: any) => fn),
+  withScope: jest.fn((cb: any) => cb({ setExtra: jest.fn(), setTag: jest.fn() })),
+  setUser: jest.fn(),
+  setTag: jest.fn(),
+  setExtra: jest.fn(),
+  addBreadcrumb: jest.fn(),
+  configureScope: jest.fn(),
+  ReactNavigationInstrumentation: jest.fn(),
+  ReactNativeTracing: jest.fn(),
+}));
+
 // react-hook form setup for testing
 // @ts-ignore
 global.window = {};

src/api/mapping/mapping.ts

@@ -1,9 +1,11 @@
 import { type FeatureCollection } from 'geojson';
 
+import { getBaseApiUrl } from '@/lib/storage/app';
 import { type GetMapDataAndMarkersResult } from '@/models/v4/mapping/getMapDataAndMarkersResult';
 import { type GetMapLayersResult } from '@/models/v4/mapping/getMapLayersResult';
 import {
   type GetAllActiveLayersResult,
+  type GetCustomMapLayerResult,
   type GetCustomMapResult,
   type GetCustomMapsResult,
   type GetGeoJSONResult,
@@ -132,7 +134,7 @@ export const getCustomMap = async (mapId: string) => {
 };
 
 export const getCustomMapLayer = async (layerId: string) => {
-  const response = await getCustomMapLayerApi.get<GetGeoJSONResult>({
+  const response = await getCustomMapLayerApi.get<GetCustomMapLayerResult>({
     layerId: encodeURIComponent(layerId),
   });
   return response.data;
@@ -180,13 +182,13 @@ export const searchAllMapFeatures = async (term: string, type?: 'all' | 'indoor'
 // --- URL Helpers (no fetch needed, constructs URLs for components) ---
 
 export const getFloorImageUrl = (floorId: string): string => {
-  return `/api/v4/Mapping/GetIndoorMapFloorImage/${encodeURIComponent(floorId)}`;
+  return `${getBaseApiUrl()}/Mapping/GetIndoorMapFloorImage/${encodeURIComponent(floorId)}`;
 };
 
 export const getCustomMapLayerImageUrl = (layerId: string): string => {
-  return `/api/v4/Mapping/GetCustomMapLayerImage/${encodeURIComponent(layerId)}`;
+  return `${getBaseApiUrl()}/Mapping/GetCustomMapLayerImage/${encodeURIComponent(layerId)}`;
 };
 
 export const getCustomMapTileUrl = (layerId: string): string => {
-  return `/api/v4/Mapping/GetCustomMapTile/${encodeURIComponent(layerId)}/{z}/{x}/{y}`;
+  return `${getBaseApiUrl()}/Mapping/GetCustomMapTile/${encodeURIComponent(layerId)}/{z}/{x}/{y}`;
 };

src/api/routes/routes.ts

@@ -19,8 +19,8 @@ import {
   type GetDirectionsResult,
   type GetRouteDeviationsResult,
   type GetRouteInstanceResult,
-  type GetRouteInstanceStopsResult,
   type GetRouteInstancesResult,
+  type GetRouteInstanceStopsResult,
   type GetRoutePlanResult,
   type GetRoutePlansResult,
   type GetRouteProgressResult,

src/app/(app)/_layout.tsx

@@ -53,8 +53,7 @@ export default function TabLayout() {
   useEffect(() => {
     if (status === 'signedIn' && userId) {
       try {
-        Countly.userProfile.setUserProperties({ id: userId });
-        Countly.userProfile.save();
+        Countly.setUserData({ custom: { id: userId } });
       } catch {
         // Countly may not be initialized (e.g., no app key configured) — ignore
       }
@@ -68,7 +67,6 @@ export default function TabLayout() {
   useEffect(() => {
     if (Platform.OS !== 'android') return;
     NavigationBar.setVisibilityAsync('hidden');
-    NavigationBar.setBehaviorAsync('overlay-swipe');
     const subscription = NavigationBar.addVisibilityListener(({ visibility }) => {
       if (visibility === 'visible') {
         NavigationBar.setVisibilityAsync('hidden');

src/app/(app)/index.tsx

@@ -146,10 +146,7 @@ function MapContent() {
     const radiusDeg = nextStop.GeofenceRadiusMeters / 111320;
     for (let i = 0; i <= points; i++) {
       const angle = (i / points) * 2 * Math.PI;
-      coords.push([
-        nextStop.Longitude + radiusDeg * Math.cos(angle),
-        nextStop.Latitude + radiusDeg * Math.sin(angle),
-      ]);
+      coords.push([nextStop.Longitude + radiusDeg * Math.cos(angle), nextStop.Latitude + radiusDeg * Math.sin(angle)]);
     }
     return {
       type: 'Feature',
@@ -549,11 +546,7 @@ function MapContent() {
           {showRouteOverlay
             ? remainingStops.map((stop) =>
                 stop.Latitude && stop.Longitude ? (
-                  <Mapbox.PointAnnotation
-                    key={`route-stop-${stop.RouteInstanceStopId}`}
-                    id={`route-stop-${stop.RouteInstanceStopId}`}
-                    coordinate={[stop.Longitude, stop.Latitude]}
-                  >
+                  <Mapbox.PointAnnotation key={`route-stop-${stop.RouteInstanceStopId}`} id={`route-stop-${stop.RouteInstanceStopId}`} coordinate={[stop.Longitude, stop.Latitude]}>
                     <StopMarker stopOrder={stop.StopOrder} status={stop.Status} />
                   </Mapbox.PointAnnotation>
                 ) : null

src/app/(app)/routes.tsx

@@ -4,9 +4,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Pressable, RefreshControl, View } from 'react-native';
 
-import { RouteCard } from '@/components/routes/route-card';
 import { Loading } from '@/components/common/loading';
 import ZeroState from '@/components/common/zero-state';
+import { RouteCard } from '@/components/routes/route-card';
 import { Badge, BadgeText } from '@/components/ui/badge';
 import { Box } from '@/components/ui/box';
 import { Fab, FabIcon } from '@/components/ui/fab';
@@ -33,10 +33,7 @@ export default function Routes() {
   const fetchUnits = useUnitsStore((state) => state.fetchUnits);
   const [searchQuery, setSearchQuery] = useState('');
 
-  const unitMap = useMemo(
-    () => Object.fromEntries(units.map((u) => [u.UnitId, u.Name])),
-    [units]
-  );
+  const unitMap = useMemo(() => Object.fromEntries(units.map((u) => [u.UnitId, u.Name])), [units]);
 
   useEffect(() => {
     fetchAllRoutePlans();
@@ -58,9 +55,7 @@ export default function Routes() {
   const handleRoutePress = (route: RoutePlanResultData) => {
     if (activeInstance && activeInstance.RoutePlanId === route.RoutePlanId) {
       const iid = activeInstance.RouteInstanceId;
-      const url = iid && iid !== 'undefined'
-        ? `/routes/active?planId=${route.RoutePlanId}&instanceId=${iid}`
-        : `/routes/active?planId=${route.RoutePlanId}`;
+      const url = iid && iid !== 'undefined' ? `/routes/active?planId=${route.RoutePlanId}&instanceId=${iid}` : `/routes/active?planId=${route.RoutePlanId}`;
       router.push(url as any);
     } else {
       router.push(`/routes/start?planId=${route.RoutePlanId}` as any);
@@ -73,12 +68,8 @@ export default function Routes() {
     const q = searchQuery.toLowerCase();
     return active.filter((route) => {
       const isRouteMyUnit = route.UnitId != null && String(route.UnitId) === String(activeUnitId);
-      const unitName = route.UnitId != null ? (unitMap[route.UnitId] || (isRouteMyUnit ? (activeUnit?.Name ?? '') : '')) : '';
-      return (
-        route.Name.toLowerCase().includes(q) ||
-        (route.Description?.toLowerCase() || '').includes(q) ||
-        unitName.toLowerCase().includes(q)
-      );
+      const unitName = route.UnitId != null ? unitMap[route.UnitId] || (isRouteMyUnit ? (activeUnit?.Name ?? '') : '') : '';
+      return route.Name.toLowerCase().includes(q) || (route.Description?.toLowerCase() || '').includes(q) || unitName.toLowerCase().includes(q);
     });
   }, [routePlans, searchQuery, unitMap, activeUnitId, activeUnit]);
 
@@ -100,29 +91,23 @@ export default function Routes() {
             <Pressable
               onPress={() => {
                 const iid = activeInstance.RouteInstanceId;
-                const url = iid && iid !== 'undefined'
-                  ? `/routes/active?planId=${activeInstance.RoutePlanId}&instanceId=${iid}`
-                  : `/routes/active?planId=${activeInstance.RoutePlanId}`;
+                const url = iid && iid !== 'undefined' ? `/routes/active?planId=${activeInstance.RoutePlanId}&instanceId=${iid}` : `/routes/active?planId=${activeInstance.RoutePlanId}`;
                 router.push(url as any);
               }}
             >
               <Box className="mb-3 rounded-xl border-2 border-green-500 bg-green-50 p-4 dark:bg-green-900/20">
                 <HStack className="items-center justify-between">
                   <HStack className="items-center space-x-2">
                     <Navigation size={20} color="#22c55e" />
-                    <Text className="text-base font-bold text-green-800 dark:text-green-200">
-                      {activeInstance.RoutePlanName || t('routes.active_route')}
-                    </Text>
+                    <Text className="text-base font-bold text-green-800 dark:text-green-200">{activeInstance.RoutePlanName || t('routes.active_route')}</Text>
                   </HStack>
                   <Badge className="bg-green-500">
                     <BadgeText className="text-white">{t('routes.active')}</BadgeText>
                   </Badge>
                 </HStack>
                 <Text className="mt-1 text-sm text-green-700 dark:text-green-300">
                   {t('routes.progress', {
-                    percent: activeInstance.StopsTotal
-                      ? Math.round(((activeInstance.StopsCompleted ?? 0) / activeInstance.StopsTotal) * 100)
-                      : 0,
+                    percent: activeInstance.StopsTotal ? Math.round(((activeInstance.StopsCompleted ?? 0) / activeInstance.StopsTotal) * 100) : 0,
                   })}
                 </Text>
               </Box>
@@ -131,29 +116,16 @@ export default function Routes() {
         }
         renderItem={({ item }: { item: RoutePlanResultData }) => {
           const isMyUnit = item.UnitId != null && String(item.UnitId) === String(activeUnitId);
-          const unitName = item.UnitId != null
-            ? (unitMap[item.UnitId] || (isMyUnit ? (activeUnit?.Name ?? '') : ''))
-            : '';
+          const unitName = item.UnitId != null ? unitMap[item.UnitId] || (isMyUnit ? (activeUnit?.Name ?? '') : '') : '';
           return (
             <Pressable onPress={() => handleRoutePress(item)}>
-              <RouteCard
-                route={item}
-                isActive={!!activeInstance && activeInstance.RoutePlanId === item.RoutePlanId}
-                unitName={unitName || undefined}
-                isMyUnit={isMyUnit}
-              />
+              <RouteCard route={item} isActive={!!activeInstance && activeInstance.RoutePlanId === item.RoutePlanId} unitName={unitName || undefined} isMyUnit={isMyUnit} />
             </Pressable>
           );
         }}
         keyExtractor={(item: RoutePlanResultData) => item.RoutePlanId}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={handleRefresh} />}
-        ListEmptyComponent={
-          <ZeroState
-            heading={t('routes.no_routes')}
-            description={t('routes.no_routes_description_all')}
-            icon={RefreshCcwDotIcon}
-          />
-        }
+        ListEmptyComponent={<ZeroState heading={t('routes.no_routes')} description={t('routes.no_routes_description_all')} icon={RefreshCcwDotIcon} />}
         contentContainerStyle={{ paddingBottom: 20 }}
       />
     );

src/app/login/index.tsx

@@ -54,13 +54,7 @@ export default function Login() {
   return (
     <>
       <FocusAwareStatusBar />
-      <LoginForm
-        onSubmit={onSubmit}
-        isLoading={status === 'loading'}
-        error={error ?? undefined}
-        onServerUrlPress={() => setShowServerUrl(true)}
-        onSsoPress={() => router.push('/login/sso')}
-      />
+      <LoginForm onSubmit={onSubmit} isLoading={status === 'loading'} error={error ?? undefined} onServerUrlPress={() => setShowServerUrl(true)} onSsoPress={() => router.push('/login/sso')} />
 
       <Modal
         isOpen={isErrorModalVisible}

src/app/login/login-form.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AlertTriangle, EyeIcon, EyeOffIcon, Globe, LogIn, ShieldCheck } from 'lucide-react-native';
+import { ChevronDownIcon } from 'lucide-react-native';
 import { useColorScheme } from 'nativewind';
 import React, { useState } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -18,7 +19,6 @@ import { Text } from '@/components/ui/text';
 import colors from '@/constants/colors';
 import { translate, useSelectedLanguage } from '@/lib';
 import type { Language } from '@/lib/i18n/resources';
-import { ChevronDownIcon } from 'lucide-react-native';
 
 // Function to create schema - makes it easier to mock for testing
 const createLoginFormSchema = () =>
@@ -48,7 +48,7 @@ export type LoginFormProps = {
   onSsoPress?: () => void;
 };
 
-export const LoginForm = ({ onSubmit = () => { }, isLoading = false, error = undefined, onServerUrlPress, onSsoPress }: LoginFormProps) => {
+export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = undefined, onServerUrlPress, onSsoPress }: LoginFormProps) => {
   const { colorScheme } = useColorScheme();
   const { t, i18n: i18nInstance } = useTranslation();
   const { language, setLanguage } = useSelectedLanguage();
@@ -215,10 +215,7 @@ export const LoginForm = ({ onSubmit = () => { }, isLoading = false, error = und
         {/* Language selector */}
         <View className="mt-4 flex-row items-center justify-center gap-x-2">
           <Globe size={16} className="text-gray-400" />
-          <Select
-            onValueChange={(val) => setLanguage(val as Language)}
-            selectedValue={language ?? i18nInstance.language}
-          >
+          <Select onValueChange={(val) => setLanguage(val as Language)} selectedValue={language ?? i18nInstance.language}>
             <SelectTrigger size="sm" variant="outline" className="min-w-[160px]">
               <SelectInput placeholder={t('settings.language')} />
               <SelectIcon as={ChevronDownIcon} className="mr-2" />