fix: clear local state immediately when a file is deleted in FileGallery

packages/react/src/views/FileMessage/FileMessage.js

@@ -2,8 +2,6 @@ import React, {
   useState,
   useCallback,
   memo,
-  useContext,
-  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -26,18 +24,16 @@ import FilePreviewHeader from './FilePreviewHeader';
 import { MessageBody as FileBody } from '../Message/MessageBody';
 import { FileMetrics } from './FileMetrics';
 import { useRCContext } from '../../context/RCInstance';
-import { useChannelStore, useMessageStore } from '../../store';
+import { useMessageStore } from '../../store';
 import { fileDisplayStyles as styles } from './Files.styles';
 
 const FileMessage = ({ fileMessage, onDeleteFile }) => {
   const { classNames, styleOverrides } = useComponentOverrides('FileMessage');
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
-  const [files, setFiles] = useState([]);
+  const removeMessage = useMessageStore((state) => state.removeMessage);
   const theme = useTheme();
-  const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
-  const [isFetching, setIsFetching] = useState(true);
   const { mode } = theme;
   const messageStyles = styles.message;
 
@@ -63,39 +59,44 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
 
   const deleteFile = useCallback(
     async (file) => {
-      messages.forEach(async (message) => {
-        if (message.file?._id === file._id) {
-          const res = await RCInstance.deleteMessage(message._id);
-          setFileToDelete({});
-          if (res.success) {
-            dispatchToastMessage({
-              type: 'success',
-              message: 'File deleted',
-            });
-          } else {
-            dispatchToastMessage({
-              type: 'error',
-              message: 'Error in deleting file',
-            });
-          }
-        }
-      });
+      const messageToDelete = messages.find(
+        (message) => message.file?._id === file._id
+      );
+
+      if (!messageToDelete) {
+        setFileToDelete({});
+        dispatchToastMessage({
+          type: 'error',
+          message: 'Unable to find the file message to delete',
+        });
+        return;
+      }
+
+      const res = await RCInstance.deleteMessage(messageToDelete._id);
+      setFileToDelete({});
+
+      if (res?.success) {
+        removeMessage(messageToDelete._id);
+        onDeleteFile?.(file._id);
+        dispatchToastMessage({
+          type: 'success',
+          message: 'File deleted',
+        });
+      } else {
+        dispatchToastMessage({
+          type: 'error',
+          message: 'Error in deleting file',
+        });
+      }
     },
-    [messages, RCInstance, dispatchToastMessage]
+    [
+      messages,
+      RCInstance,
+      dispatchToastMessage,
+      removeMessage,
+      onDeleteFile,
+    ]
   );
-  useEffect(() => {
-    const fetchAllFiles = async () => {
-      const res = await RCInstance.getAllFiles(isChannelPrivate, '');
-      if (res?.files) {
-        const sortedFiles = res.files.sort(
-          (a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt)
-        );
-        setFiles(sortedFiles);
-        setIsFetching(false);
-      }
-    };
-    fetchAllFiles();
-  }, [RCInstance, isChannelPrivate, messages, fileToDelete]);
 
   const handleOnClose = () => {
     setFileToDelete({});

packages/react/src/views/MessageAggregators/FileGallery.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { useChannelStore, useMessageStore } from '../../store';
 import { useRCContext } from '../../context/RCInstance';
@@ -68,6 +68,10 @@ const FileGallery = () => {
     }
   };
 
+  const handleFileDelete = useCallback((fileId) => {
+    setFiles((prevFiles) => prevFiles.filter((file) => file._id !== fileId));
+  }, []);
+
   return (
     <MessageAggregator
       title="Files"
@@ -89,6 +93,7 @@ const FileGallery = () => {
       type="file"
       searchFiltered={filteredFiles}
       viewType={viewType}
+      onDeleteFile={handleFileDelete}
     />
   );
 };

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -33,6 +33,7 @@ export const MessageAggregator = ({
   fetching,
   type = 'message',
   viewType = 'Sidebar',
+  onDeleteFile,
 }) => {
   const { theme } = useTheme();
   const { mode } = useTheme();
@@ -185,6 +186,7 @@ export const MessageAggregator = ({
                     <FileDisplay
                       key={`${msg._id}-aggregated`}
                       fileMessage={msg}
+                      onDeleteFile={onDeleteFile}
                     />
                   ) : (
                     <Box