From 3b6e4951dd3c9ccf26fa23364ff174887a50118e Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 11 Oct 2023 08:39:19 +0200
Subject: [PATCH 1/2] [TS migration] Migrate 'useDragAndDrop.js' hook

---
 .../{useDragAndDrop.js => useDragAndDrop.ts}  | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)
 rename src/hooks/{useDragAndDrop.js => useDragAndDrop.ts} (82%)

diff --git a/src/hooks/useDragAndDrop.js b/src/hooks/useDragAndDrop.ts
similarity index 82%
rename from src/hooks/useDragAndDrop.js
rename to src/hooks/useDragAndDrop.ts
index fb1d158e4063..f759ae7a25cf 100644
--- a/src/hooks/useDragAndDrop.js
+++ b/src/hooks/useDragAndDrop.ts
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState, useCallback} from 'react';
+import React, {useEffect, useRef, useState, useCallback} from 'react';
 import {useIsFocused} from '@react-navigation/native';
 
 const COPY_DROP_EFFECT = 'copy';
@@ -8,15 +8,22 @@ const DRAG_OVER_EVENT = 'dragover';
 const DRAG_LEAVE_EVENT = 'dragleave';
 const DROP_EVENT = 'drop';
 
+type DragAndDropParams = {
+    dropZone: React.MutableRefObject<HTMLDivElement | null>;
+    onDrop?: (event?: DragEvent) => void;
+    shouldAllowDrop?: boolean;
+    isDisabled?: boolean;
+    shouldAcceptDrop?: (event?: DragEvent) => boolean;
+};
+
+type DragAndDropOptions = {
+    isDraggingOver: boolean;
+};
+
 /**
- * @param {Object} dropZone – ref to the dropZone component
- * @param {Function} [onDrop]
- * @param {Boolean} [shouldAllowDrop]
- * @param {Boolean} [isDisabled]
- * @param {Function} [shouldAcceptDrop]
- * @returns {{isDraggingOver: Boolean}}
+ * @param dropZone – ref to the dropZone component
  */
-export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}) {
+export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}: DragAndDropParams): DragAndDropOptions {
     const isFocused = useIsFocused();
     const [isDraggingOver, setIsDraggingOver] = useState(false);
 
@@ -24,7 +31,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
     // This is necessary because dragging over children will cause dragleave to execute on the parent.
     // You can think of this counter as a stack. When a child is hovered over we push an element onto the stack.
     // Then we only process the dragleave event if the count is 0, because it means that the last element (the parent) has been popped off the stack.
-    const dragCounter = useRef(0);
+    const dragCounter = useRef<number>(0);
 
     // If this component is out of focus or disabled, reset the drag state back to the default
     useEffect(() => {
@@ -36,23 +43,24 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
     }, [isFocused, isDisabled]);
 
     const setDropEffect = useCallback(
-        (event) => {
+        (event: DragEvent) => {
             const effect = shouldAllowDrop && shouldAcceptDrop(event) ? COPY_DROP_EFFECT : NONE_DROP_EFFECT;
-            // eslint-disable-next-line no-param-reassign
-            event.dataTransfer.dropEffect = effect;
-            // eslint-disable-next-line no-param-reassign
-            event.dataTransfer.effectAllowed = effect;
+
+            if (event.dataTransfer) {
+                // eslint-disable-next-line no-param-reassign
+                event.dataTransfer.dropEffect = effect;
+                // eslint-disable-next-line no-param-reassign
+                event.dataTransfer.effectAllowed = effect;
+            }
         },
         [shouldAllowDrop, shouldAcceptDrop],
     );
 
     /**
      * Handles all types of drag-N-drop events on the drop zone associated with composer
-     *
-     * @param {Object} event native Event
      */
     const dropZoneDragHandler = useCallback(
-        (event) => {
+        (event: DragEvent) => {
             if (!isFocused || isDisabled || !shouldAcceptDrop(event)) {
                 return;
             }

From fa155df670f1a6f68d42d23015bf9badb06102d4 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 11 Oct 2023 23:18:47 +0200
Subject: [PATCH 2/2] Remove extra typing

---
 src/hooks/useDragAndDrop.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useDragAndDrop.ts b/src/hooks/useDragAndDrop.ts
index f759ae7a25cf..27230dd94679 100644
--- a/src/hooks/useDragAndDrop.ts
+++ b/src/hooks/useDragAndDrop.ts
@@ -31,7 +31,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
     // This is necessary because dragging over children will cause dragleave to execute on the parent.
     // You can think of this counter as a stack. When a child is hovered over we push an element onto the stack.
     // Then we only process the dragleave event if the count is 0, because it means that the last element (the parent) has been popped off the stack.
-    const dragCounter = useRef<number>(0);
+    const dragCounter = useRef(0);
 
     // If this component is out of focus or disabled, reset the drag state back to the default
     useEffect(() => {