From bb6cd818ebb3b9963c67da198870e8ca5350d19b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 11 Oct 2023 16:17:31 +0200 Subject: [PATCH 1/5] migrate useReportScrollManager and ReportScreenContext to TypeScript --- .../{index.native.js => index.native.ts} | 17 ++++++++++------- .../{index.js => index.ts} | 18 ++++++++++-------- src/pages/home/ReportScreenContext.js | 6 ------ src/pages/home/ReportScreenContext.ts | 17 +++++++++++++++++ 4 files changed, 37 insertions(+), 21 deletions(-) rename src/hooks/useReportScrollManager/{index.native.js => index.native.ts} (56%) rename src/hooks/useReportScrollManager/{index.js => index.ts} (58%) delete mode 100644 src/pages/home/ReportScreenContext.js create mode 100644 src/pages/home/ReportScreenContext.ts diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.ts similarity index 56% rename from src/hooks/useReportScrollManager/index.native.js rename to src/hooks/useReportScrollManager/index.native.ts index d44a40222ca5..e40ff049ca12 100644 --- a/src/hooks/useReportScrollManager/index.native.js +++ b/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; } diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.ts similarity index 58% rename from src/hooks/useReportScrollManager/index.js rename to src/hooks/useReportScrollManager/index.ts index 9a3303504b92..c466b4050266 100644 --- a/src/hooks/useReportScrollManager/index.js +++ b/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; } diff --git a/src/pages/home/ReportScreenContext.js b/src/pages/home/ReportScreenContext.js deleted file mode 100644 index 1e8d30cf7585..000000000000 --- a/src/pages/home/ReportScreenContext.js +++ /dev/null @@ -1,6 +0,0 @@ -import {createContext} from 'react'; - -const ActionListContext = createContext(); -const ReactionListContext = createContext(); - -export {ActionListContext, ReactionListContext}; diff --git a/src/pages/home/ReportScreenContext.ts b/src/pages/home/ReportScreenContext.ts new file mode 100644 index 000000000000..a74c6d9797ff --- /dev/null +++ b/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> | null; +type ReactionListContextType = RefObject | null; + +const ActionListContext = createContext(null); +const ReactionListContext = createContext(null); + +export {ActionListContext, ReactionListContext}; +export type {ReactionListRefType, ActionListContextType, ReactionListContextType}; From 56b46a12f5b79a0fbf221f4ace4cf2e85c5a1a64 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 12 Oct 2023 10:55:58 +0200 Subject: [PATCH 2/5] extract return values to a separate type --- src/hooks/useReportScrollManager/index.native.ts | 6 ++++-- src/hooks/useReportScrollManager/index.ts | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts index e40ff049ca12..bda8d1cbdee5 100644 --- a/src/hooks/useReportScrollManager/index.native.ts +++ b/src/hooks/useReportScrollManager/index.native.ts @@ -1,11 +1,13 @@ import {useContext, useCallback} from 'react'; import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext'; -function useReportScrollManager(): { +type ReportScrollManagerData = { ref: ActionListContextType; scrollToIndex: (index: number) => void; scrollToBottom: () => void; -} { +}; + +function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); /** diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index c466b4050266..2cf3d1733360 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/src/hooks/useReportScrollManager/index.ts @@ -1,11 +1,13 @@ import {useContext, useCallback} from 'react'; import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext'; -function useReportScrollManager(): { +type ReportScrollManagerData = { ref: ActionListContextType; scrollToIndex: (index: number, isEditing: boolean) => void; scrollToBottom: () => void; -} { +}; + +function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); /** From 68a0ee71c8795e6a536d98c2874b29a15c692705 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 16 Oct 2023 14:26:08 +0200 Subject: [PATCH 3/5] add platform specific types --- src/hooks/useReportScrollManager/types.native.ts | 10 ++++++++++ src/hooks/useReportScrollManager/types.ts | 10 ++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/hooks/useReportScrollManager/types.native.ts create mode 100644 src/hooks/useReportScrollManager/types.ts diff --git a/src/hooks/useReportScrollManager/types.native.ts b/src/hooks/useReportScrollManager/types.native.ts new file mode 100644 index 000000000000..c09f4ba659cf --- /dev/null +++ b/src/hooks/useReportScrollManager/types.native.ts @@ -0,0 +1,10 @@ +import {ActionListContextType} from '../../pages/home/ReportScreenContext'; + +type ReportScrollManagerData = { + ref: ActionListContextType; + scrollToIndex: (index: number) => void; + scrollToBottom: () => void; +}; + +// eslint-disable-next-line import/prefer-default-export +export type {ReportScrollManagerData}; diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts new file mode 100644 index 000000000000..19f99d267484 --- /dev/null +++ b/src/hooks/useReportScrollManager/types.ts @@ -0,0 +1,10 @@ +import {ActionListContextType} from '../../pages/home/ReportScreenContext'; + +type ReportScrollManagerData = { + ref: ActionListContextType; + scrollToIndex: (index: number, isEditing: boolean) => void; + scrollToBottom: () => void; +}; + +// eslint-disable-next-line import/prefer-default-export +export type {ReportScrollManagerData}; From 1ccbae3710411b9f0449f4df940b0a073ba7e447 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 16 Oct 2023 15:27:33 +0200 Subject: [PATCH 4/5] improve scrolling to index, minor fixes --- src/hooks/useReportScrollManager/index.native.ts | 10 ++-------- src/hooks/useReportScrollManager/index.ts | 12 +++--------- src/pages/home/ReportScreenContext.ts | 6 +++--- src/pages/home/report/ReportActionItemMessageEdit.js | 4 ++-- 4 files changed, 10 insertions(+), 22 deletions(-) diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts index bda8d1cbdee5..4b8d949b216a 100644 --- a/src/hooks/useReportScrollManager/index.native.ts +++ b/src/hooks/useReportScrollManager/index.native.ts @@ -1,18 +1,12 @@ import {useContext, useCallback} from 'react'; -import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext'; - -type ReportScrollManagerData = { - ref: ActionListContextType; - scrollToIndex: (index: number) => void; - scrollToBottom: () => void; -}; +import {ActionListContext} from '../../pages/home/ReportScreenContext'; +import {ReportScrollManagerData} from './types'; function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); /** * Scroll to the provided index. - * */ const scrollToIndex = (index: number) => { if (!flatListRef?.current) { diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index 2cf3d1733360..5e1ead1995a6 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/src/hooks/useReportScrollManager/index.ts @@ -1,11 +1,6 @@ import {useContext, useCallback} from 'react'; -import {ActionListContext, ActionListContextType} from '../../pages/home/ReportScreenContext'; - -type ReportScrollManagerData = { - ref: ActionListContextType; - scrollToIndex: (index: number, isEditing: boolean) => void; - scrollToBottom: () => void; -}; +import {ActionListContext} from '../../pages/home/ReportScreenContext'; +import {ReportScrollManagerData} from './types'; function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); @@ -13,14 +8,13 @@ function useReportScrollManager(): ReportScrollManagerData { /** * 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. - * */ const scrollToIndex = (index: number, isEditing: boolean) => { if (!flatListRef?.current || isEditing) { return; } - flatListRef.current.scrollToIndex({index}); + flatListRef.current.scrollToIndex({index, animated: true}); }; /** diff --git a/src/pages/home/ReportScreenContext.ts b/src/pages/home/ReportScreenContext.ts index a74c6d9797ff..83f76d8d8e2f 100644 --- a/src/pages/home/ReportScreenContext.ts +++ b/src/pages/home/ReportScreenContext.ts @@ -1,17 +1,17 @@ import {RefObject, createContext} from 'react'; import {FlatList, GestureResponderEvent} from 'react-native'; -type ReactionListRefType = { +type ReactionListRef = { showReactionList: (event: GestureResponderEvent | undefined, reactionListAnchor: Element, emojiName: string, reportActionID: string) => void; hideReactionList: () => void; isActiveReportAction: (actionID: number | string) => boolean; }; type ActionListContextType = RefObject> | null; -type ReactionListContextType = RefObject | null; +type ReactionListContextType = RefObject | null; const ActionListContext = createContext(null); const ReactionListContext = createContext(null); export {ActionListContext, ReactionListContext}; -export type {ReactionListRefType, ActionListContextType, ReactionListContextType}; +export type {ReactionListRef, ActionListContextType, ReactionListContextType}; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index cb756ee40491..73c34f12ecf6 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -249,7 +249,7 @@ function ReportActionItemMessageEdit(props) { // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report. if (props.index === 0) { const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { - reportScrollManager.scrollToIndex({animated: true, index: props.index}, false); + reportScrollManager.scrollToIndex(props.index, false); keyboardDidHideListener.remove(); }); } @@ -364,7 +364,7 @@ function ReportActionItemMessageEdit(props) { style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]} onFocus={() => { setIsFocused(true); - reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); + reportScrollManager.scrollToIndex(props.index, true); setShouldShowComposeInputKeyboardAware(false); // Clear active report action when another action gets focused From f467ac252b417f8357667072fbd6ad2e9fe31bbb Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 17 Oct 2023 15:48:55 +0200 Subject: [PATCH 5/5] remove platform specific type file, add default export --- src/hooks/useReportScrollManager/index.native.ts | 2 +- src/hooks/useReportScrollManager/index.ts | 4 ++-- src/hooks/useReportScrollManager/types.native.ts | 10 ---------- src/hooks/useReportScrollManager/types.ts | 5 ++--- 4 files changed, 5 insertions(+), 16 deletions(-) delete mode 100644 src/hooks/useReportScrollManager/types.native.ts diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts index 4b8d949b216a..ed9b7968636c 100644 --- a/src/hooks/useReportScrollManager/index.native.ts +++ b/src/hooks/useReportScrollManager/index.native.ts @@ -1,6 +1,6 @@ import {useContext, useCallback} from 'react'; import {ActionListContext} from '../../pages/home/ReportScreenContext'; -import {ReportScrollManagerData} from './types'; +import ReportScrollManagerData from './types'; function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index 5e1ead1995a6..fd2c884e5b4c 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/src/hooks/useReportScrollManager/index.ts @@ -1,6 +1,6 @@ import {useContext, useCallback} from 'react'; import {ActionListContext} from '../../pages/home/ReportScreenContext'; -import {ReportScrollManagerData} from './types'; +import ReportScrollManagerData from './types'; function useReportScrollManager(): ReportScrollManagerData { const flatListRef = useContext(ActionListContext); @@ -9,7 +9,7 @@ function useReportScrollManager(): ReportScrollManagerData { * 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. */ - const scrollToIndex = (index: number, isEditing: boolean) => { + const scrollToIndex = (index: number, isEditing?: boolean) => { if (!flatListRef?.current || isEditing) { return; } diff --git a/src/hooks/useReportScrollManager/types.native.ts b/src/hooks/useReportScrollManager/types.native.ts deleted file mode 100644 index c09f4ba659cf..000000000000 --- a/src/hooks/useReportScrollManager/types.native.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {ActionListContextType} from '../../pages/home/ReportScreenContext'; - -type ReportScrollManagerData = { - ref: ActionListContextType; - scrollToIndex: (index: number) => void; - scrollToBottom: () => void; -}; - -// eslint-disable-next-line import/prefer-default-export -export type {ReportScrollManagerData}; diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts index 19f99d267484..f5ff9b2f35cd 100644 --- a/src/hooks/useReportScrollManager/types.ts +++ b/src/hooks/useReportScrollManager/types.ts @@ -2,9 +2,8 @@ import {ActionListContextType} from '../../pages/home/ReportScreenContext'; type ReportScrollManagerData = { ref: ActionListContextType; - scrollToIndex: (index: number, isEditing: boolean) => void; + scrollToIndex: (index: number, isEditing?: boolean) => void; scrollToBottom: () => void; }; -// eslint-disable-next-line import/prefer-default-export -export type {ReportScrollManagerData}; +export default ReportScrollManagerData;