RU-T46 Watchdog Term fix

Author: ucswift

src/components/calls/__tests__/call-files-modal.test.tsx

@@ -7,6 +7,7 @@ import { CallFilesModal } from '../call-files-modal';
 
 // Mock the zustand store
 const mockFetchCallFiles = jest.fn();
+const mockClearFiles = jest.fn();
 const defaultMockFiles = [
   {
     Id: 'file-1',
@@ -41,6 +42,7 @@ let mockStoreState: any = {
   isLoadingFiles: false,
   errorFiles: null,
   fetchCallFiles: mockFetchCallFiles,
+  clearFiles: mockClearFiles,
 };
 
 jest.mock('@/stores/calls/detail-store', () => ({
@@ -304,6 +306,7 @@ describe('CallFilesModal', () => {
       isLoadingFiles: false,
       errorFiles: null,
       fetchCallFiles: mockFetchCallFiles,
+      clearFiles: mockClearFiles,
     };
   });
 
@@ -423,6 +426,7 @@ describe('CallFilesModal', () => {
         isLoadingFiles: true,
         errorFiles: null,
         fetchCallFiles: mockFetchCallFiles,
+        clearFiles: mockClearFiles,
       };
     });
 
@@ -444,6 +448,7 @@ describe('CallFilesModal', () => {
         isLoadingFiles: false,
         errorFiles: 'Network error occurred',
         fetchCallFiles: mockFetchCallFiles,
+        clearFiles: mockClearFiles,
       };
     });
 
@@ -476,6 +481,7 @@ describe('CallFilesModal', () => {
         isLoadingFiles: false,
         errorFiles: null,
         fetchCallFiles: mockFetchCallFiles,
+        clearFiles: mockClearFiles,
       };
     });
 
@@ -590,6 +596,7 @@ describe('CallFilesModal', () => {
         isLoadingFiles: false,
         errorFiles: null,
         fetchCallFiles: mockFetchCallFiles,
+        clearFiles: mockClearFiles,
       };
     });
 
@@ -623,6 +630,7 @@ describe('CallFilesModal', () => {
         isLoadingFiles: false,
         errorFiles: null,
         fetchCallFiles: mockFetchCallFiles,
+        clearFiles: mockClearFiles,
       };
     });
 

src/components/calls/call-files-modal.tsx

@@ -31,7 +31,7 @@ interface CallFilesModalProps {
 export const CallFilesModal: React.FC<CallFilesModalProps> = ({ isOpen, onClose, callId }) => {
   const { t } = useTranslation();
   const { trackEvent } = useAnalytics();
-  const { callFiles, isLoadingFiles, errorFiles, fetchCallFiles } = useCallDetailStore();
+  const { callFiles, isLoadingFiles, errorFiles, fetchCallFiles, clearFiles } = useCallDetailStore();
   const [downloadingFiles, setDownloadingFiles] = useState<Record<string, number>>({});
 
   // Bottom sheet ref and snap points
@@ -46,7 +46,16 @@ export const CallFilesModal: React.FC<CallFilesModalProps> = ({ isOpen, onClose,
     } else {
       bottomSheetRef.current?.close();
     }
-  }, [isOpen, callId, fetchCallFiles]);
+
+    // Cleanup when modal closes to free memory
+    return () => {
+      if (!isOpen) {
+        setDownloadingFiles({});
+        // Clear files from store to free memory
+        clearFiles();
+      }
+    };
+  }, [isOpen, callId, fetchCallFiles, clearFiles]);
 
   // Track when call files modal is opened/rendered
   useEffect(() => {

src/components/calls/call-images-modal.tsx

@@ -3,7 +3,7 @@ import { Image } from 'expo-image';
 import * as ImageManipulator from 'expo-image-manipulator';
 import * as ImagePicker from 'expo-image-picker';
 import { CameraIcon, ChevronLeftIcon, ChevronRightIcon, ImageIcon, PlusIcon, XIcon } from 'lucide-react-native';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Dimensions, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
@@ -61,7 +61,7 @@ const CallImagesModal: React.FC<CallImagesModalProps> = ({ isOpen, onClose, call
   const [fullScreenImage, setFullScreenImage] = useState<{ source: any; name?: string } | null>(null);
   const flatListRef = useRef<any>(null); // FlashList ref type
 
-  const { callImages, isLoadingImages, errorImages, fetchCallImages, uploadCallImage } = useCallDetailStore();
+  const { callImages, isLoadingImages, errorImages, fetchCallImages, uploadCallImage, clearImages } = useCallDetailStore();
 
   // Filter out images without proper data or URL
   const validImages = useMemo(() => {
@@ -82,7 +82,18 @@ const CallImagesModal: React.FC<CallImagesModalProps> = ({ isOpen, onClose, call
       setActiveIndex(0); // Reset active index when opening
       setImageErrors(new Set()); // Reset image errors
     }
-  }, [isOpen, callId, fetchCallImages]);
+
+    // Cleanup when modal closes to free memory
+    return () => {
+      if (!isOpen) {
+        setFullScreenImage(null);
+        setSelectedImageInfo(null);
+        setImageErrors(new Set());
+        // Clear images from store to free memory
+        clearImages();
+      }
+    };
+  }, [isOpen, callId, fetchCallImages, clearImages]);
 
   // Track when call images modal is opened/rendered
   useEffect(() => {
@@ -244,6 +255,8 @@ const CallImagesModal: React.FC<CallImagesModalProps> = ({ isOpen, onClose, call
             contentFit="contain"
             transition={200}
             pointerEvents="none"
+            cachePolicy="memory-disk"
+            recyclingKey={item.Id}
             onError={() => {
               handleImageError(item.Id, 'expo-image load error');
             }}
@@ -341,7 +354,7 @@ const CallImagesModal: React.FC<CallImagesModalProps> = ({ isOpen, onClose, call
 
         {selectedImageInfo ? (
           <Box className="flex-1 items-center justify-center">
-            <Image source={{ uri: selectedImageInfo.uri }} style={styles.previewImage} contentFit="contain" transition={200} />
+            <Image source={{ uri: selectedImageInfo.uri }} style={styles.previewImage} contentFit="contain" transition={200} cachePolicy="memory-disk" />
           </Box>
         ) : (
           <VStack className="flex-1 justify-center space-y-4">

src/components/calls/full-screen-image-modal.tsx

@@ -161,6 +161,7 @@ const FullScreenImageModal: React.FC<FullScreenImageModalProps> = ({ isOpen, onC
                 maxHeight: screenHeight * 0.8,
               }}
               contentFit="contain"
+              cachePolicy="memory-disk"
               alt={imageName || t('callImages.image_alt')}
               testID="full-screen-image"
             />

src/stores/calls/detail-store.ts

@@ -21,6 +21,8 @@ interface CallDetailState {
   isNotesLoading: boolean;
   fetchCallDetail: (callId: string) => Promise<void>;
   reset: () => void;
+  clearImages: () => void;
+  clearFiles: () => void;
   fetchCallNotes: (callId: string) => Promise<void>;
   addNote: (callId: string, note: string, userId: string, latitude: number | null, longitude: number | null) => Promise<void>;
   searchNotes: (query: string) => CallNoteResultData[];
@@ -56,9 +58,30 @@ export const useCallDetailStore = create<CallDetailState>((set, get) => ({
       call: null,
       callExtraData: null,
       callPriority: null,
+      callNotes: [],
+      callImages: null,
+      callFiles: null,
       isLoading: false,
       isNotesLoading: false,
+      isLoadingImages: false,
+      isLoadingFiles: false,
       error: null,
+      errorImages: null,
+      errorFiles: null,
+    }),
+  // Clear images data to free memory
+  clearImages: () =>
+    set({
+      callImages: null,
+      isLoadingImages: false,
+      errorImages: null,
+    }),
+  // Clear files data to free memory
+  clearFiles: () =>
+    set({
+      callFiles: null,
+      isLoadingFiles: false,
+      errorFiles: null,
     }),
   fetchCallDetail: async (callId: string) => {
     set({ isLoading: true, error: null });