[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};