[No QA] [TS Migration] Migrate useReportScrollManager and ReportScreenContext to TypeScript

src/hooks/useReportScrollManager/index.native.js → src/hooks/useReportScrollManager/index.native.ts

@@ -1,27 +1,30 @@
 import {useContext, useCallback} from 'react';
-import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext';
 
-function useReportScrollManager() {
+function useReportScrollManager(): {
+    ref: ActionListContextType;
+    scrollToIndex: (index: number) => void;
+    scrollToBottom: () => void;
+} {
     const flatListRef = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
      *
-     * @param {Object} index
      */
-    const scrollToIndex = (index) => {
-        if (!flatListRef.current) {
+    const scrollToIndex = (index: number) => {
+        if (!flatListRef?.current) {
             return;
         }
 
-        flatListRef.current.scrollToIndex(index);
+        flatListRef.current.scrollToIndex({index});
     };
 
     /**
      * Scroll to the bottom of the flatlist.
      */
     const scrollToBottom = useCallback(() => {
-        if (!flatListRef.current) {
+        if (!flatListRef?.current) {
             return;
         }
 

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

@@ -1,29 +1,31 @@
 import {useContext, useCallback} from 'react';
-import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext';
 
-function useReportScrollManager() {
+function useReportScrollManager(): {
+    ref: ActionListContextType;
+    scrollToIndex: (index: number, isEditing: boolean) => void;
+    scrollToBottom: () => void;
+} {
     const flatListRef = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
      * we are editing a comment.
      *
-     * @param {Object} index
-     * @param {Boolean} isEditing
      */
-    const scrollToIndex = (index, isEditing) => {
-        if (!flatListRef.current || isEditing) {
+    const scrollToIndex = (index: number, isEditing: boolean) => {
+        if (!flatListRef?.current || isEditing) {
             return;
         }
 
-        flatListRef.current.scrollToIndex(index);
+        flatListRef.current.scrollToIndex({index});
     };
 
     /**
      * Scroll to the bottom of the flatlist.
      */
     const scrollToBottom = useCallback(() => {
-        if (!flatListRef.current) {
+        if (!flatListRef?.current) {
             return;
         }
 

src/pages/home/ReportScreenContext.ts

@@ -0,0 +1,17 @@
+import {RefObject, createContext} from 'react';
+import {FlatList, GestureResponderEvent} from 'react-native';
+
+type ReactionListRefType = {
+    showReactionList: (event: GestureResponderEvent | undefined, reactionListAnchor: Element, emojiName: string, reportActionID: string) => void;
+    hideReactionList: () => void;
+    isActiveReportAction: (actionID: number | string) => boolean;
+};
+
+type ActionListContextType = RefObject<FlatList<unknown>> | null;
+type ReactionListContextType = RefObject<ReactionListRefType> | null;
+
+const ActionListContext = createContext<ActionListContextType>(null);
+const ReactionListContext = createContext<ReactionListContextType>(null);
+
+export {ActionListContext, ReactionListContext};
+export type {ReactionListRefType, ActionListContextType, ReactionListContextType};