From 0705ceed3a258cda1fb33e819b662b56539fd78a Mon Sep 17 00:00:00 2001 From: Ugo Giordano <144606237+ugogiordano@users.noreply.github.com> Date: Wed, 30 Oct 2024 14:02:41 +0100 Subject: [PATCH 1/3] Fixing duplicate Concierge chat Addressing the issue of duplicate Concierge chats appearing in the Left Hand Navigation (LHN) when deep linking to Concierge. --- src/pages/ConciergePage.tsx | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/pages/ConciergePage.tsx b/src/pages/ConciergePage.tsx index 46f17e76c083..7ab8deef1bef 100644 --- a/src/pages/ConciergePage.tsx +++ b/src/pages/ConciergePage.tsx @@ -1,9 +1,8 @@ import {useFocusEffect} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useEffect, useRef} from 'react'; +import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, useOnyx,withOnyx} from 'react-native-onyx'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -33,21 +32,23 @@ function ConciergePage({session}: ConciergePageProps) { const styles = useThemeStyles(); const isUnmounted = useRef(false); const {shouldUseNarrowLayout} = useResponsiveLayout(); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); - useFocusEffect(() => { - if (session && 'authToken' in session) { - App.confirmReadyToOpenApp(); - // Pop the concierge loading page before opening the concierge report. - Navigation.isNavigationReady().then(() => { - if (isUnmounted.current) { - return; - } - Report.navigateToConciergeChat(true, () => !isUnmounted.current); - }); - } else { - Navigation.navigate(); - } - }); + useFocusEffect( + useCallback(() => { + if (session && 'authToken' in session) { + App.confirmReadyToOpenApp(); + Navigation.isNavigationReady().then(() => { + if (isUnmounted.current || isLoadingReportData === undefined || !!isLoadingReportData) { + return; + } + Report.navigateToConciergeChat(true, () => !isUnmounted.current); + }); + } else { + Navigation.navigate(); + } + }, [session, isLoadingReportData]), + ); useEffect(() => { isUnmounted.current = false; From 14002f325322650532011c5e5f970dfdf4f77854 Mon Sep 17 00:00:00 2001 From: Ugo Giordano <144606237+ugogiordano@users.noreply.github.com> Date: Tue, 19 Nov 2024 01:40:33 +0100 Subject: [PATCH 2/3] Update ConciergePage.tsx fixing linter checks --- src/pages/ConciergePage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ConciergePage.tsx b/src/pages/ConciergePage.tsx index 7ab8deef1bef..514e43638a0e 100644 --- a/src/pages/ConciergePage.tsx +++ b/src/pages/ConciergePage.tsx @@ -2,7 +2,8 @@ import {useFocusEffect} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; -import {OnyxEntry, useOnyx,withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView'; import ScreenWrapper from '@components/ScreenWrapper'; From b6f73fe2eb2cc9a8e18822826de2b95b3c55c3f3 Mon Sep 17 00:00:00 2001 From: Ugo Giordano <144606237+ugogiordano@users.noreply.github.com> Date: Wed, 20 Nov 2024 00:52:20 +0100 Subject: [PATCH 3/3] Update ConciergePage.tsx Migrating from `withOnyx` to `useOnyx`. --- src/pages/ConciergePage.tsx | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/src/pages/ConciergePage.tsx b/src/pages/ConciergePage.tsx index 514e43638a0e..40e2a6094ac7 100644 --- a/src/pages/ConciergePage.tsx +++ b/src/pages/ConciergePage.tsx @@ -1,38 +1,27 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView'; import ScreenWrapper from '@components/ScreenWrapper'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; -import type SCREENS from '@src/SCREENS'; -import type {Session} from '@src/types/onyx'; - -type ConciergePageOnyxProps = { - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - -type ConciergePageProps = ConciergePageOnyxProps & StackScreenProps; /* * This is a "utility page", that does this: * - If the user is authenticated, find their concierge chat and re-route to it * - Else re-route to the login page */ -function ConciergePage({session}: ConciergePageProps) { +function ConciergePage() { const styles = useThemeStyles(); const isUnmounted = useRef(false); const {shouldUseNarrowLayout} = useResponsiveLayout(); + const [session] = useOnyx(ONYXKEYS.SESSION); const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); useFocusEffect( @@ -70,8 +59,4 @@ function ConciergePage({session}: ConciergePageProps) { ConciergePage.displayName = 'ConciergePage'; -export default withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, -})(ConciergePage); +export default ConciergePage;