From f13c83c78943daf64f0e9afacaa7f911c51f08d5 Mon Sep 17 00:00:00 2001 From: dominictb Date: Tue, 13 Aug 2024 18:24:04 +0700 Subject: [PATCH 1/3] fix: default the selected tab to scan in iou request start page --- src/CONST.ts | 4 ++ src/libs/Navigation/OnyxTabNavigator.tsx | 66 +++++++++---------- src/pages/iou/request/IOURequestStartPage.tsx | 1 + 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 84b393a1f5ae..9db98b52d537 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -243,6 +243,10 @@ const CONST = { OLD_DOT_ANDROID: 'https://play.google.com/store/apps/details?id=org.me.mobiexpensifyg&hl=en_US&pli=1', OLD_DOT_IOS: 'https://apps.apple.com/us/app/expensify-expense-tracker/id471713959', }, + ONYX_FETCH_STATUS: { + LOADING: 'loading', + LOADED: 'loaded', + }, DATE: { SQL_DATE_TIME: 'YYYY-MM-DD HH:mm:ss', FNS_FORMAT_STRING: 'yyyy-MM-dd', diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index a1d9d1786dd2..001cd795f376 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -3,50 +3,45 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useContext, useEffect, useState} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement'; import type {TabSelectorProps} from '@components/TabSelector/TabSelector'; import useThemeStyles from '@hooks/useThemeStyles'; import type {IOURequestType} from '@libs/actions/IOU'; import Tab from '@userActions/Tab'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {SelectedTabRequest} from '@src/types/onyx'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {defaultScreenOptions} from './OnyxTabNavigatorConfig'; -type OnyxTabNavigatorOnyxProps = { - selectedTab: OnyxEntry; -}; - -type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps & - ChildrenProps & { - /** ID of the tab component to be saved in onyx */ - id: string; +type OnyxTabNavigatorProps = ChildrenProps & { + /** ID of the tab component to be saved in onyx */ + id: string; - /** Name of the selected tab */ - selectedTab?: SelectedTabRequest; + /** Name of the selected tab */ + defaultSelectedTab?: SelectedTabRequest; - /** A function triggered when a tab has been selected */ - onTabSelected?: (newIouType: IOURequestType) => void; + /** A function triggered when a tab has been selected */ + onTabSelected?: (newIouType: IOURequestType) => void; - tabBar: (props: TabSelectorProps) => React.ReactNode; + tabBar: (props: TabSelectorProps) => React.ReactNode; - screenListeners?: ScreenListeners; + screenListeners?: ScreenListeners; - /** Callback to register the focus trap container elements of the current active tab. - * Use this in the parent component to get the focus trap container element of the active tab, - * then pass it to the ScreenWrapper so that only focusable elements of the active tab are included in the focus trap - * Check the `IOURequestStartPage.tsx` and `NewChatSelectorPage.tsx` components for example usage - */ - onActiveTabFocusTrapContainerElementChanged?: (containerElement: HTMLElement | null) => void; + /** Callback to register the focus trap container elements of the current active tab. + * Use this in the parent component to get the focus trap container element of the active tab, + * then pass it to the ScreenWrapper so that only focusable elements of the active tab are included in the focus trap + * Check the `IOURequestStartPage.tsx` and `NewChatSelectorPage.tsx` components for example usage + */ + onActiveTabFocusTrapContainerElementChanged?: (containerElement: HTMLElement | null) => void; - /** Callback to register the focus trap container elements of the tab bar. - * This callback is useful when the custom-rendered tab bar is supporting the focus trap container element registration (which is the case of `TabSelector.tsx` component). - * Together, with the `onActiveTabFocusTrapContainerElementChanged` callback, we can manage the focus trap of the tab navigator in the parent component. - */ - onTabBarFocusTrapContainerElementChanged?: (containerElement: HTMLElement | null) => void; - }; + /** Callback to register the focus trap container elements of the tab bar. + * This callback is useful when the custom-rendered tab bar is supporting the focus trap container element registration (which is the case of `TabSelector.tsx` component). + * Together, with the `onActiveTabFocusTrapContainerElementChanged` callback, we can manage the focus trap of the tab navigator in the parent component. + */ + onTabBarFocusTrapContainerElementChanged?: (containerElement: HTMLElement | null) => void; +}; // eslint-disable-next-line rulesdir/no-inline-named-export const TopTab = createMaterialTopTabNavigator(); @@ -60,7 +55,7 @@ const TabFocusTrapContext = React.createContext<(tabName: string, containerEleme // It also takes 2 more optional callbacks to manage the focus trap container elements of the tab bar and the active tab function OnyxTabNavigator({ id, - selectedTab, + defaultSelectedTab, tabBar: TabBar, children, onTabBarFocusTrapContainerElementChanged, @@ -71,6 +66,7 @@ function OnyxTabNavigator({ }: OnyxTabNavigatorProps) { // Mapping of tab name to focus trap container element const [focusTrapContainerElementMapping, setFocusTrapContainerElementMapping] = useState>({}); + const [selectedTab, {status: onyxFetchStatus}] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`); // This callback is used to register the focus trap container element of each avaiable tab screen const setTabFocusTrapContainerElement = useCallback((tabName: string, containerElement: HTMLElement | null) => { @@ -107,13 +103,17 @@ function OnyxTabNavigator({ onActiveTabFocusTrapContainerElementChanged?.(selectedTab ? focusTrapContainerElementMapping[selectedTab] : null); }, [selectedTab, focusTrapContainerElementMapping, onActiveTabFocusTrapContainerElementChanged]); + if (onyxFetchStatus === CONST.ONYX_FETCH_STATUS.LOADING) { + return null; + } + return ( ({ - selectedTab: { - key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`, - }, -})(OnyxTabNavigator); +export default OnyxTabNavigator; export {TabScreenWithFocusTrapWrapper, TopTab}; diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx index dd5f4676eb6b..eac30b8839d2 100644 --- a/src/pages/iou/request/IOURequestStartPage.tsx +++ b/src/pages/iou/request/IOURequestStartPage.tsx @@ -134,6 +134,7 @@ function IOURequestStartPage({ {iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY && iouType !== CONST.IOU.TYPE.INVOICE ? ( Date: Fri, 16 Aug 2024 12:17:59 +0700 Subject: [PATCH 2/3] fix: remove onyx fetching status const --- src/CONST.ts | 4 ---- src/libs/Navigation/OnyxTabNavigator.tsx | 6 +++--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 9db98b52d537..84b393a1f5ae 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -243,10 +243,6 @@ const CONST = { OLD_DOT_ANDROID: 'https://play.google.com/store/apps/details?id=org.me.mobiexpensifyg&hl=en_US&pli=1', OLD_DOT_IOS: 'https://apps.apple.com/us/app/expensify-expense-tracker/id471713959', }, - ONYX_FETCH_STATUS: { - LOADING: 'loading', - LOADED: 'loaded', - }, DATE: { SQL_DATE_TIME: 'YYYY-MM-DD HH:mm:ss', FNS_FORMAT_STRING: 'yyyy-MM-dd', diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 001cd795f376..c691f740fd56 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -9,10 +9,10 @@ import type {TabSelectorProps} from '@components/TabSelector/TabSelector'; import useThemeStyles from '@hooks/useThemeStyles'; import type {IOURequestType} from '@libs/actions/IOU'; import Tab from '@userActions/Tab'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {SelectedTabRequest} from '@src/types/onyx'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import {defaultScreenOptions} from './OnyxTabNavigatorConfig'; type OnyxTabNavigatorProps = ChildrenProps & { @@ -66,7 +66,7 @@ function OnyxTabNavigator({ }: OnyxTabNavigatorProps) { // Mapping of tab name to focus trap container element const [focusTrapContainerElementMapping, setFocusTrapContainerElementMapping] = useState>({}); - const [selectedTab, {status: onyxFetchStatus}] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`); + const [selectedTab, onyxFetchMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`); // This callback is used to register the focus trap container element of each avaiable tab screen const setTabFocusTrapContainerElement = useCallback((tabName: string, containerElement: HTMLElement | null) => { @@ -103,7 +103,7 @@ function OnyxTabNavigator({ onActiveTabFocusTrapContainerElementChanged?.(selectedTab ? focusTrapContainerElementMapping[selectedTab] : null); }, [selectedTab, focusTrapContainerElementMapping, onActiveTabFocusTrapContainerElementChanged]); - if (onyxFetchStatus === CONST.ONYX_FETCH_STATUS.LOADING) { + if (isLoadingOnyxValue(onyxFetchMetadata)) { return null; } From 1ea06e83ec9106b14fe1d25747e38e0431e75f4e Mon Sep 17 00:00:00 2001 From: dominictb Date: Fri, 16 Aug 2024 14:46:02 +0700 Subject: [PATCH 3/3] fix: update variable name --- src/libs/Navigation/OnyxTabNavigator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index c691f740fd56..5c5bbe201ab4 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -66,7 +66,7 @@ function OnyxTabNavigator({ }: OnyxTabNavigatorProps) { // Mapping of tab name to focus trap container element const [focusTrapContainerElementMapping, setFocusTrapContainerElementMapping] = useState>({}); - const [selectedTab, onyxFetchMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`); + const [selectedTab, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`); // This callback is used to register the focus trap container element of each avaiable tab screen const setTabFocusTrapContainerElement = useCallback((tabName: string, containerElement: HTMLElement | null) => { @@ -103,7 +103,7 @@ function OnyxTabNavigator({ onActiveTabFocusTrapContainerElementChanged?.(selectedTab ? focusTrapContainerElementMapping[selectedTab] : null); }, [selectedTab, focusTrapContainerElementMapping, onActiveTabFocusTrapContainerElementChanged]); - if (isLoadingOnyxValue(onyxFetchMetadata)) { + if (isLoadingOnyxValue(selectedTabResult)) { return null; }