From 71f4258c2da95b38e6e517539bdc95b2b9d9befe Mon Sep 17 00:00:00 2001 From: Yauheni Date: Wed, 16 Oct 2024 17:21:15 +0200 Subject: [PATCH 1/9] refactor RequireQuickBooksDesktopModal to use FullPageOfflineBlockingView --- .../qbd/QuickBooksDesktopSetupPage.tsx | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx index abc98f1c4d42..e309bdc7c28a 100644 --- a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx +++ b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx @@ -2,6 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import Computer from '@assets/images/laptop-with-second-screen-sync.svg'; +import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import Button from '@components/Button'; import CopyTextToClipboard from '@components/CopyTextToClipboard'; import FixedFooter from '@components/FixedFooter'; @@ -10,6 +11,7 @@ import ImageSVG from '@components/ImageSVG'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import * as QuickbooksDesktop from '@libs/actions/connections/QuickbooksDesktop'; import Navigation from '@libs/Navigation/Navigation'; @@ -27,20 +29,32 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro const [isLoading, setIsLoading] = useState(true); const [codatSetupLink, setCodatSetupLink] = useState(''); - useEffect(() => { - const fetchSetupLink = () => { - // eslint-disable-next-line rulesdir/no-thenable-actions-in-views - QuickbooksDesktop.getQuickbooksDesktopCodatSetupLink(policyID).then((response) => { - setCodatSetupLink(String(response?.setupUrl ?? '')); - setIsLoading(false); - }); - }; + const FullPageView = codatSetupLink ? ({children}: React.PropsWithChildren) => {children} : FullPageOfflineBlockingView; + + const fetchSetupLink = () => { + setIsLoading(true); + // eslint-disable-next-line rulesdir/no-thenable-actions-in-views + QuickbooksDesktop.getQuickbooksDesktopCodatSetupLink(policyID).then((response) => { + setCodatSetupLink(String(response?.setupUrl ?? '')); + setIsLoading(false); + }); + }; + useEffect(() => { fetchSetupLink(); // disabling this rule, as we want this to run only on the first render // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); + useNetwork({ + onReconnect: () => { + if (codatSetupLink) { + return; + } + fetchSetupLink(); + }, + }); + if (isLoading) { return ; } @@ -56,7 +70,7 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro shouldShowBackButton onBackButtonPress={() => Navigation.dismissModal()} /> - + @@ -78,7 +92,7 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro large /> - + ); } From 0054c861f88386c4f4aef2be8aabedf5a6483864 Mon Sep 17 00:00:00 2001 From: Yauheni Date: Wed, 16 Oct 2024 19:05:20 +0200 Subject: [PATCH 2/9] refactor screen --- .../qbd/QuickBooksDesktopSetupPage.tsx | 52 ++++++++++--------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx index e309bdc7c28a..71b8f50d6751 100644 --- a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx +++ b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import Computer from '@assets/images/laptop-with-second-screen-sync.svg'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; @@ -29,16 +29,16 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro const [isLoading, setIsLoading] = useState(true); const [codatSetupLink, setCodatSetupLink] = useState(''); - const FullPageView = codatSetupLink ? ({children}: React.PropsWithChildren) => {children} : FullPageOfflineBlockingView; + const ContentWrapper = codatSetupLink ? ({children}: React.PropsWithChildren) => children : FullPageOfflineBlockingView; - const fetchSetupLink = () => { + const fetchSetupLink = useCallback(() => { setIsLoading(true); // eslint-disable-next-line rulesdir/no-thenable-actions-in-views QuickbooksDesktop.getQuickbooksDesktopCodatSetupLink(policyID).then((response) => { setCodatSetupLink(String(response?.setupUrl ?? '')); setIsLoading(false); }); - }; + }, [policyID]); useEffect(() => { fetchSetupLink(); @@ -70,29 +70,31 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro shouldShowBackButton onBackButtonPress={() => Navigation.dismissModal()} /> - - - - + + + + + - {translate('workspace.qbd.setupPage.title')} - {translate('workspace.qbd.setupPage.body')} - - + {translate('workspace.qbd.setupPage.title')} + {translate('workspace.qbd.setupPage.body')} + + + + +