Merge remote-tracking branch 'origin/feat/message-composer' into feat/message-composer

Author: MartinCupela

src/components/MessageInput/DropzoneProvider.tsx

@@ -22,7 +22,7 @@ import type {
 
 import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
-import { useHandleDragAndDropQueuedFiles } from './WithDragAndDropUpload';
+import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 
 export type EmojiSearchIndexResult = {
   id: string;
@@ -153,7 +153,7 @@ const MessageInputProvider = (props: PropsWithChildren<MessageInputProps>) => {
     });
   }, [messageComposer]);
 
-  useHandleDragAndDropQueuedFiles();
+  useRegisterDropHandlers();
 
   return (
     <MessageInputContextProvider value={messageInputContextValue}>

src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import clsx from 'clsx';
 import type { CSSProperties, ElementType, PropsWithChildren } from 'react';
@@ -13,34 +13,29 @@ import { useAttachmentManagerState, useMessageComposer } from './hooks';
 import { useStateStore } from '../../store';
 
 const DragAndDropUploadContext = React.createContext<{
-  fileQueue: File[];
-  addFilesToQueue: ((files: File[]) => void) | null;
-  removeFilesFromQueue: ((files: File[]) => void) | null;
+  subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
 }>({
-  addFilesToQueue: null,
-  fileQueue: [],
-  removeFilesFromQueue: null,
+  subscribeToDrop: null,
 });
 
 export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
 
 /**
- * @private To maintain top -> bottom data flow, the drag-and-drop functionality allows dragging any files to the queue - the closest
- * `MessageInputProvider` will be notified through `DragAndDropUploadContext.fileQueue` and starts the upload with `uploadNewAttachments`,
- * forwarded files are removed from the queue immediately after.
+ * @private This hook should be used only once directly in the `MessageInputProvider` to
+ * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
+ * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
+ * component.
  */
-export const useHandleDragAndDropQueuedFiles = () => {
-  const { fileQueue, removeFilesFromQueue } = useDragAndDropUploadContext();
+export const useRegisterDropHandlers = () => {
+  const { subscribeToDrop } = useDragAndDropUploadContext();
 
   const messageComposer = useMessageComposer();
 
   useEffect(() => {
-    if (!removeFilesFromQueue) return;
+    const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
 
-    messageComposer.attachmentManager.uploadFiles(fileQueue);
-
-    removeFilesFromQueue(fileQueue);
-  }, [fileQueue, removeFilesFromQueue, messageComposer]);
+    return unsubscribe;
+  }, [subscribeToDrop, messageComposer]);
 };
 
 const attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({
@@ -77,7 +72,7 @@ export const WithDragAndDropUpload = ({
   className?: string;
   style?: CSSProperties;
 }>) => {
-  const [files, setFiles] = useState<File[]>([]);
+  const dropHandlersRef = useRef<Set<(f: File[]) => void>>(new Set());
   const { acceptedFiles = [] } = useChannelStateContext();
   const { t } = useTranslationContext();
 
@@ -97,13 +92,16 @@ export const WithDragAndDropUpload = ({
     [acceptedFiles],
   );
 
-  const addFilesToQueue = useCallback((files: File[]) => {
-    setFiles((cv) => cv.concat(files));
+  const subscribeToDrop = useCallback((fn: (files: File[]) => void) => {
+    dropHandlersRef.current.add(fn);
+
+    return () => {
+      dropHandlersRef.current.delete(fn);
+    };
   }, []);
 
-  const removeFilesFromQueue = useCallback((files: File[]) => {
-    if (!files.length) return;
-    setFiles((cv) => cv.filter((f) => files.indexOf(f) === -1));
+  const handleDrop = useCallback((files: File[]) => {
+    dropHandlersRef.current.forEach((fn) => fn(files));
   }, []);
 
   const { isUploadEnabled } = useAttachmentManagerState();
@@ -123,18 +121,20 @@ export const WithDragAndDropUpload = ({
     noClick: true,
     onDrop: isWithinMessageInputContext
       ? messageComposer.attachmentManager.uploadFiles
-      : addFilesToQueue,
+      : handleDrop,
   });
 
   // nested WithDragAndDropUpload components render wrappers without functionality
   // (MessageInputFlat has a default WithDragAndDropUpload)
-  if (dragAndDropUploadContext.removeFilesFromQueue !== null) {
+  if (dragAndDropUploadContext.subscribeToDrop !== null) {
     return <Component className={className}>{children}</Component>;
   }
 
   return (
     <DragAndDropUploadContext.Provider
-      value={{ addFilesToQueue, fileQueue: files, removeFilesFromQueue }}
+      value={{
+        subscribeToDrop,
+      }}
     >
       <Component {...getRootProps({ className, style })}>
         {/* TODO: could be a replaceable component */}