refactor: simplify WithDragAndDropUpload API (#2691)

### 🎯 Goal

Yesterday evening I reconsidered how the wrapper should work - this way
it's much more simpler and allows multiple `MessageInput` components to
work under one wrapper without any clashing.

Since the previous feature has not been released yet, we can change the
context API without any worry and thus `refactor`.

Author: arnautov-anton

src/components/MessageInput/MessageInput.tsx

@@ -26,7 +26,7 @@ import type {
 } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
-import { useHandleDragAndDropQueuedFiles } from './WithDragAndDropUpload';
+import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 
 export type EmojiSearchIndexResult = {
   id: string;
@@ -153,7 +153,7 @@ const MessageInputProvider = <
   });
 
   // @ts-expect-error generics to be removed
-  useHandleDragAndDropQueuedFiles(messageInputContextValue);
+  useRegisterDropHandlers(messageInputContextValue);
 
   return (
     <MessageInputContextProvider<StreamChatGenerics, V> value={messageInputContextValue}>

src/components/MessageInput/WithDragAndDropUpload.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   useEffect,
   useMemo,
-  useState,
+  useRef,
 } from 'react';
 import {
   MessageInputContextValue,
@@ -18,34 +18,27 @@ import { useDropzone } from 'react-dropzone';
 import clsx from 'clsx';
 
 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 = ({
-  uploadNewFiles,
-}: MessageInputContextValue) => {
-  const { fileQueue, removeFilesFromQueue } = useDragAndDropUploadContext();
+export const useRegisterDropHandlers = ({ uploadNewFiles }: MessageInputContextValue) => {
+  const { subscribeToDrop } = useDragAndDropUploadContext();
 
   useEffect(() => {
-    if (!removeFilesFromQueue) return;
+    const unsubscribe = subscribeToDrop?.(uploadNewFiles);
 
-    uploadNewFiles(fileQueue);
-
-    removeFilesFromQueue(fileQueue);
-  }, [fileQueue, removeFilesFromQueue, uploadNewFiles]);
+    return unsubscribe;
+  }, [subscribeToDrop, uploadNewFiles]);
 };
 
 /**
@@ -78,7 +71,7 @@ export const WithDragAndDropUpload = ({
   className?: string;
   style?: CSSProperties;
 }>) => {
-  const [files, setFiles] = useState<File[]>([]);
+  const dropHandlersRef = useRef<Set<(f: File[]) => void>>(new Set());
   const { acceptedFiles = [], multipleUploads } = useChannelStateContext();
   const { t } = useTranslationContext();
 
@@ -98,13 +91,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 { getRootProps, isDragActive, isDragReject } = useDropzone({
@@ -116,20 +112,20 @@ export const WithDragAndDropUpload = ({
       : false,
     multiple: multipleUploads,
     noClick: true,
-    onDrop: isWithinMessageInputContext
-      ? messageInputContext.uploadNewFiles
-      : addFilesToQueue,
+    onDrop: isWithinMessageInputContext ? messageInputContext.uploadNewFiles : 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 */}