images cache

src/constants/constants.ts

@@ -6,5 +6,5 @@ export const statusBarHeight =
   Platform.OS === 'ios' ? StatusBar.currentHeight || NOTCH_HEIGHT : StatusBar.currentHeight || 0;
 
 export const CACHED_ATTACHMENTS_DIR = `${FileSystem.documentDirectory}nomadmania-attachments/`;
-export const CACHE_EXPIRATION_DAYS = 14;
-export const CACHE_MAX_SIZE_MB = 200;
+export const CACHE_EXPIRATION_DAYS = 30;
+export const CACHE_MAX_SIZE_MB = 500;

src/screens/InAppScreens/MessagesScreen/ChatScreen/index.tsx

@@ -1461,19 +1461,43 @@ const ChatScreen = ({ route }: { route: any }) => {
     }
   }, [replyMessage]);
 
+  const handleOpenImage = async (uri: string, fileName: string) => {
+    const dirExist = await FileSystem.getInfoAsync(CACHED_ATTACHMENTS_DIR);
+    if (!dirExist.exists) {
+      await FileSystem.makeDirectoryAsync(CACHED_ATTACHMENTS_DIR, { intermediates: true });
+    }
+
+    const fileUri = `${CACHED_ATTACHMENTS_DIR}${fileName}`;
+
+    const fileExists = await FileSystem.getInfoAsync(fileUri);
+    if (fileExists.exists) {
+      setSelectedMedia(fileUri);
+
+      return;
+    }
+    setSelectedMedia(uri);
+
+    const { uri: localUri } = await FileSystem.downloadAsync(uri, fileUri, {
+      headers: { Nmtoken: token }
+    });
+  };
+
   const renderMessageImage = (props: any) => {
     const { currentMessage } = props;
     const leftMessage = currentMessage?.user?._id !== +currentUserId;
 
     return (
       <TouchableOpacity
-        onPress={() =>
-          setSelectedMedia(
-            currentMessage.attachment.attachment_full_url?.startsWith('/')
-              ? API_HOST + currentMessage.attachment.attachment_full_url
-              : currentMessage.attachment.attachment_full_url
-          )
-        }
+        onPress={() => {
+          if (!currentMessage.attachment.attachment_full_url?.startsWith('/')) {
+            setSelectedMedia(currentMessage.attachment.attachment_full_url);
+            return;
+          }
+          handleOpenImage(
+            API_HOST + currentMessage.attachment.attachment_full_url,
+            currentMessage.attachment?.filename
+          );
+        }}
         onLongPress={() => handleLongPress(currentMessage, props)}
         style={styles.imageContainer}
         disabled={currentMessage.isSending}

src/screens/InAppScreens/MessagesScreen/GroupChatScreen/index.tsx

@@ -1527,19 +1527,43 @@ const GroupChatScreen = ({ route }: { route: any }) => {
     }
   }, [replyMessage]);
 
+  const handleOpenImage = async (uri: string, fileName: string) => {
+    const dirExist = await FileSystem.getInfoAsync(CACHED_ATTACHMENTS_DIR);
+    if (!dirExist.exists) {
+      await FileSystem.makeDirectoryAsync(CACHED_ATTACHMENTS_DIR, { intermediates: true });
+    }
+
+    const fileUri = `${CACHED_ATTACHMENTS_DIR}${fileName}`;
+
+    const fileExists = await FileSystem.getInfoAsync(fileUri);
+    if (fileExists.exists) {
+      setSelectedMedia(fileUri);
+
+      return;
+    }
+    setSelectedMedia(uri);
+
+    const { uri: localUri } = await FileSystem.downloadAsync(uri, fileUri, {
+      headers: { Nmtoken: token }
+    });
+  };
+
   const renderMessageImage = (props: any) => {
     const { currentMessage } = props;
     const leftMessage = currentMessage?.user?._id !== +currentUserId;
 
     return (
       <TouchableOpacity
-        onPress={() =>
-          setSelectedMedia(
-            currentMessage.attachment.attachment_full_url?.startsWith('/')
-              ? API_HOST + currentMessage.attachment.attachment_full_url
-              : currentMessage.attachment.attachment_full_url
-          )
-        }
+        onPress={() => {
+          if (!currentMessage.attachment.attachment_full_url?.startsWith('/')) {
+            setSelectedMedia(currentMessage.attachment.attachment_full_url);
+            return;
+          }
+          handleOpenImage(
+            API_HOST + currentMessage.attachment.attachment_full_url,
+            currentMessage.attachment?.filename
+          );
+        }}
         onLongPress={() => handleLongPress(currentMessage, props)}
         style={styles.imageContainer}
         disabled={currentMessage.isSending}