Merge pull request Expensify#68181 from shubham1206agra/refactor-onyx-47

Removed Onyx.connect in WorkspaceSettingsUtils (part 2)

Author: tgolen

package.json

@@ -46,7 +46,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=217 --cache --cache-location=node_modules/.cache/eslint",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=216 --cache --cache-location=node_modules/.cache/eslint",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "lint-watch": "npx eslint-watch --watch --changed",
     "shellcheck": "./scripts/shellCheck.sh",

src/components/Navigation/DebugTabView.tsx

@@ -17,7 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import {getRouteForCurrentStep as getReimbursementAccountRouteForCurrentStep} from '@libs/ReimbursementAccountUtils';
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
-import {getChatTabBrickRoadReport} from '@libs/WorkspacesSettingsUtils';
+import {getChatTabBrickRoadReportID} from '@libs/WorkspacesSettingsUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -104,8 +104,9 @@ function DebugTabView({selectedTab, chatTabBrickRoad}: DebugTabViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: true});
+    const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {selector: (value) => value?.reports, canBeMissing: true});
     const {status, indicatorColor, policyIDWithErrors} = useIndicatorStatus();
-    const {orderedReports} = useSidebarOrderedReports();
+    const {orderedReportIDs} = useSidebarOrderedReports();
 
     const message = useMemo((): TranslationPaths | undefined => {
         if (selectedTab === NAVIGATION_TABS.HOME) {
@@ -139,10 +140,10 @@ function DebugTabView({selectedTab, chatTabBrickRoad}: DebugTabViewProps) {
 
     const navigateTo = useCallback(() => {
         if (selectedTab === NAVIGATION_TABS.HOME && !!chatTabBrickRoad) {
-            const report = getChatTabBrickRoadReport(orderedReports);
+            const reportID = getChatTabBrickRoadReportID(orderedReportIDs, reportAttributes);
 
-            if (report) {
-                Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(report.reportID));
+            if (reportID) {
+                Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(reportID));
             }
         }
         if (selectedTab === NAVIGATION_TABS.SETTINGS) {
@@ -152,7 +153,7 @@ function DebugTabView({selectedTab, chatTabBrickRoad}: DebugTabViewProps) {
                 Navigation.navigate(route);
             }
         }
-    }, [selectedTab, chatTabBrickRoad, orderedReports, status, reimbursementAccount, policyIDWithErrors]);
+    }, [selectedTab, chatTabBrickRoad, orderedReportIDs, reportAttributes, status, reimbursementAccount, policyIDWithErrors]);
 
     if (!([NAVIGATION_TABS.HOME, NAVIGATION_TABS.SETTINGS, NAVIGATION_TABS.WORKSPACES] as string[]).includes(selectedTab ?? '') || !indicator) {
         return null;

src/components/Navigation/NavigationTabBar/index.tsx

@@ -55,7 +55,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
     const {indicatorColor: workspacesTabIndicatorColor, status: workspacesTabIndicatorStatus} = useWorkspacesTabIndicatorStatus();
-    const {orderedReports} = useSidebarOrderedReports();
+    const {orderedReportIDs} = useSidebarOrderedReports();
     const subscriptionPlan = useSubscriptionPlan();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
     const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES, {canBeMissing: true});
@@ -108,10 +108,8 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
     const shouldRenderDebugTabViewOnWideLayout = !!account?.isDebugModeEnabled && !isTopLevelBar;
 
     useEffect(() => {
-        setChatTabBrickRoad(getChatTabBrickRoad(orderedReports));
-        // We need to get a new brick road state when report attributes are updated, otherwise we'll be showing an outdated brick road.
-        // That's why reportAttributes is added as a dependency here
-    }, [orderedReports, reportAttributes]);
+        setChatTabBrickRoad(getChatTabBrickRoad(orderedReportIDs, reportAttributes));
+    }, [orderedReportIDs, reportAttributes]);
 
     const navigateToChats = useCallback(() => {
         if (selectedTab === NAVIGATION_TABS.HOME) {

src/hooks/useSidebarOrderedReports.tsx

@@ -25,6 +25,7 @@ type SidebarOrderedReportsContextProviderProps = {
 
 type SidebarOrderedReportsContextValue = {
     orderedReports: OnyxTypes.Report[];
+    orderedReportIDs: string[];
     currentReportID: string | undefined;
     policyMemberAccountIDs: number[];
 };
@@ -33,6 +34,7 @@ type ReportsToDisplayInLHN = Record<string, OnyxTypes.Report & {hasErrorsOtherTh
 
 const SidebarOrderedReportsContext = createContext<SidebarOrderedReportsContextValue>({
     orderedReports: [],
+    orderedReportIDs: [],
     currentReportID: '',
     policyMemberAccountIDs: [],
 });
@@ -221,13 +223,15 @@ function SidebarOrderedReportsContextProvider({
             const updatedReports = getOrderedReports(updatedReportIDs);
             return {
                 orderedReports: updatedReports,
+                orderedReportIDs: updatedReportIDs,
                 currentReportID: derivedCurrentReportID,
                 policyMemberAccountIDs,
             };
         }
 
         return {
             orderedReports,
+            orderedReportIDs,
             currentReportID: derivedCurrentReportID,
             policyMemberAccountIDs,
         };

src/libs/WorkspacesSettingsUtils.ts

@@ -1,64 +1,44 @@
-import Onyx from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {Policy, Report, ReportAttributesDerivedValue} from '@src/types/onyx';
+import type {Policy, ReportAttributesDerivedValue} from '@src/types/onyx';
 import type {Unit} from '@src/types/onyx/Policy';
 import {convertToDisplayString} from './CurrencyUtils';
 
 type BrickRoad = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | undefined;
 
-let reportAttributes: ReportAttributesDerivedValue['reports'];
-Onyx.connect({
-    key: ONYXKEYS.DERIVED.REPORT_ATTRIBUTES,
-    callback: (value) => {
-        if (!value) {
-            return;
-        }
-        reportAttributes = value.reports;
-    },
-});
 /**
- * @param altReportActions Replaces (local) allReportActions used within (local) function getWorkspacesBrickRoads
- * @returns BrickRoad for the policy passed as a param and optionally actionsByReport (if passed)
+ * @returns BrickRoad for the given reportID using reportAttributes
  */
-const getBrickRoadForPolicy = (report: Report): BrickRoad => {
-    return reportAttributes?.[report.reportID]?.brickRoadStatus;
+const getBrickRoadForPolicy = (reportID: string, reportAttributes: ReportAttributesDerivedValue['reports'] | undefined): BrickRoad => {
+    return reportAttributes?.[reportID]?.brickRoadStatus;
 };
 
-function getChatTabBrickRoadReport(orderedReports: Array<OnyxEntry<Report>> = []): OnyxEntry<Report> {
-    if (!orderedReports.length) {
+function getChatTabBrickRoadReportID(orderedReportIDs: string[], reportAttributes: ReportAttributesDerivedValue['reports'] | undefined): string | undefined {
+    if (!orderedReportIDs.length) {
         return undefined;
     }
 
-    let reportWithGBR: OnyxEntry<Report>;
+    let reportIDWithGBR: string | undefined;
 
-    const reportWithRBR = orderedReports.find((report) => {
-        const brickRoad = report ? getBrickRoadForPolicy(report) : undefined;
-        if (!reportWithGBR && brickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) {
-            reportWithGBR = report;
-            return false;
+    for (const reportID of orderedReportIDs) {
+        const brickRoad = getBrickRoadForPolicy(reportID, reportAttributes);
+        if (brickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) {
+            reportIDWithGBR = reportID;
+        }
+        if (brickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR) {
+            return reportID;
         }
-        return brickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
-    });
-
-    if (reportWithRBR) {
-        return reportWithRBR;
-    }
-
-    if (reportWithGBR) {
-        return reportWithGBR;
     }
 
-    return undefined;
+    return reportIDWithGBR;
 }
 
-function getChatTabBrickRoad(orderedReports: Array<OnyxEntry<Report>>): BrickRoad | undefined {
-    const report = getChatTabBrickRoadReport(orderedReports);
-    return report ? getBrickRoadForPolicy(report) : undefined;
+function getChatTabBrickRoad(orderedReportIDs: string[], reportAttributes: ReportAttributesDerivedValue['reports'] | undefined): BrickRoad | undefined {
+    const reportID = getChatTabBrickRoadReportID(orderedReportIDs, reportAttributes);
+    return reportID ? getBrickRoadForPolicy(reportID, reportAttributes) : undefined;
 }
 
 /**
@@ -145,5 +125,5 @@ function getOwnershipChecksDisplayText(
     return {title, text, buttonText};
 }
 
-export {getChatTabBrickRoadReport, getBrickRoadForPolicy, getChatTabBrickRoad, getUnitTranslationKey, getOwnershipChecksDisplayText};
+export {getChatTabBrickRoadReportID, getBrickRoadForPolicy, getChatTabBrickRoad, getUnitTranslationKey, getOwnershipChecksDisplayText};
 export type {BrickRoad};