Merge pull request Expensify#32267 from fabioh8010/ts/hook/remaining-…

…group-1

[TS migration] Migrate '[Remaining Group 1]' hook to TypeScript

src/hooks/useActiveElement/index.native.ts

@@ -0,0 +1,8 @@
+import UseActiveElement from './types';
+
+/**
+ * Native doesn't have the DOM, so we just return null.
+ */
+const useActiveElement: UseActiveElement = () => null;
+
+export default useActiveElement;

src/hooks/useActiveElement/index.js → src/hooks/useActiveElement/index.ts

@@ -1,12 +1,11 @@
 import {useEffect, useState} from 'react';
+import UseActiveElement from './types';
 
 /**
  * Listens for the focusin and focusout events and sets the DOM activeElement to the state.
  * On native, we just return null.
- *
- * @return {Element} the active element in the DOM
  */
-export default function useActiveElement() {
+const useActiveElement: UseActiveElement = () => {
     const [active, setActive] = useState(document.activeElement);
 
     const handleFocusIn = () => {
@@ -28,4 +27,6 @@ export default function useActiveElement() {
     }, []);
 
     return active;
-}
+};
+
+export default useActiveElement;

src/hooks/useActiveElement/types.ts

@@ -0,0 +1,3 @@
+type UseActiveElement = () => Element | null;
+
+export default UseActiveElement;

src/hooks/useDebounce.ts

@@ -0,0 +1,45 @@
+import {DebouncedFunc, DebounceSettings} from 'lodash';
+import lodashDebounce from 'lodash/debounce';
+import {useCallback, useEffect, useRef} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type GenericFunction = (...args: any[]) => void;
+
+/**
+ * Create and return a debounced function.
+ *
+ * Every time the identity of any of the arguments changes, the debounce operation will restart (canceling any ongoing debounce).
+ * This is especially important in the case of func. To prevent that, pass stable references.
+ *
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options The options object.
+ * @param options.leading Specify invoking on the leading edge of the timeout.
+ * @param options.maxWait The maximum time func is allowed to be delayed before it’s invoked.
+ * @param options.trailing Specify invoking on the trailing edge of the timeout.
+ * @returns Returns a function to call the debounced function.
+ */
+export default function useDebounce<T extends GenericFunction>(func: T, wait: number, options?: DebounceSettings): T {
+    const debouncedFnRef = useRef<DebouncedFunc<T>>();
+    const {leading, maxWait, trailing = true} = options ?? {};
+
+    useEffect(() => {
+        const debouncedFn = lodashDebounce(func, wait, {leading, maxWait, trailing});
+
+        debouncedFnRef.current = debouncedFn;
+
+        return () => {
+            debouncedFn.cancel();
+        };
+    }, [func, wait, leading, maxWait, trailing]);
+
+    const debounceCallback = useCallback((...args: Parameters<T>) => {
+        const debouncedFn = debouncedFnRef.current;
+
+        if (debouncedFn) {
+            debouncedFn(...args);
+        }
+    }, []);
+
+    return debounceCallback as T;
+}

src/hooks/useDefaultDragAndDrop/index.native.ts

@@ -0,0 +1,5 @@
+import UseDefaultDragAndDrop from './types';
+
+const useDefaultDragAndDrop: UseDefaultDragAndDrop = () => {};
+
+export default useDefaultDragAndDrop;

src/hooks/useDefaultDragAndDrop/index.js → src/hooks/useDefaultDragAndDrop/index.ts

@@ -1,21 +1,29 @@
 import {useEffect} from 'react';
+import UseDefaultDragAndDrop from './types';
 
-export default function useDefaultDragAndDrop() {
+const useDefaultDragAndDrop: UseDefaultDragAndDrop = () => {
     useEffect(() => {
-        const dropDragListener = (event) => {
+        const dropDragListener = (event: DragEvent) => {
             event.preventDefault();
-            // eslint-disable-next-line no-param-reassign
-            event.dataTransfer.dropEffect = 'none';
+
+            if (event.dataTransfer) {
+                // eslint-disable-next-line no-param-reassign
+                event.dataTransfer.dropEffect = 'none';
+            }
         };
+
         document.addEventListener('dragover', dropDragListener);
         document.addEventListener('dragenter', dropDragListener);
         document.addEventListener('dragleave', dropDragListener);
         document.addEventListener('drop', dropDragListener);
+
         return () => {
             document.removeEventListener('dragover', dropDragListener);
             document.removeEventListener('dragenter', dropDragListener);
             document.removeEventListener('dragleave', dropDragListener);
             document.removeEventListener('drop', dropDragListener);
         };
     }, []);
-}
+};
+
+export default useDefaultDragAndDrop;

src/hooks/useDefaultDragAndDrop/types.ts

@@ -0,0 +1,3 @@
+type UseDefaultDragAndDrop = () => void;
+
+export default UseDefaultDragAndDrop;

src/hooks/useWaitForNavigation.js → src/hooks/useWaitForNavigation.ts

@@ -1,15 +1,15 @@
 import {useNavigation} from '@react-navigation/native';
 import {useEffect, useRef} from 'react';
 
+type UseWaitForNavigation = (navigate: () => void) => () => Promise<void>;
+
 /**
  * Returns a promise that resolves when navigation finishes.
  * Only use when navigating by react-navigation
- *
- * @returns {function}
  */
-export default function useWaitForNavigation() {
+export default function useWaitForNavigation(): UseWaitForNavigation {
     const navigation = useNavigation();
-    const resolvePromises = useRef([]);
+    const resolvePromises = useRef<Array<() => void>>([]);
 
     useEffect(() => {
         const unsubscribeBlur = navigation.addListener('blur', () => {
@@ -24,9 +24,9 @@ export default function useWaitForNavigation() {
         };
     }, [navigation]);
 
-    return (navigate) => () => {
+    return (navigate: () => void) => () => {
         navigate();
-        return new Promise((resolve) => {
+        return new Promise<void>((resolve) => {
             resolvePromises.current.push(resolve);
         });
     };