Merge pull request #40197 from ikevin127/fix/39928

Workspace switcher: Expensify is no longer bolded and missing RBR after refreshing the page
Expensify · Apr 18, 2024 · ab7f7ae · ab7f7ae
2 parents 9033ccb + c39c100
commit ab7f7ae
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 31 deletions.
diff --git a/src/libs/WorkspacesSettingsUtils.ts b/src/libs/WorkspacesSettingsUtils.ts
@@ -54,11 +54,11 @@ Onyx.connect({
 });
 
 /**
- * @param report
- * @returns BrickRoad for the policy passed as a param
+ * @param altReportActions Replaces (local) allReportActions used within (local) function getWorkspacesBrickRoads
+ * @returns BrickRoad for the policy passed as a param and optionally actionsByReport (if passed)
  */
-const getBrickRoadForPolicy = (report: Report): BrickRoad => {
-    const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`] ?? {};
+const getBrickRoadForPolicy = (report: Report, altReportActions?: OnyxCollection<ReportActions>): BrickRoad => {
+    const reportActions = (altReportActions ?? allReportActions)?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`] ?? {};
     const reportErrors = OptionsListUtils.getAllReportErrors(report, reportActions);
     const doesReportContainErrors = Object.keys(reportErrors ?? {}).length !== 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined;
     if (doesReportContainErrors) {
@@ -144,14 +144,14 @@ function checkIfWorkspaceSettingsTabHasRBR(policyID?: string) {
 /**
  * @returns a map where the keys are policyIDs and the values are BrickRoads for each policy
  */
-function getWorkspacesBrickRoads(): Record<string, BrickRoad> {
-    if (!allReports) {
+function getWorkspacesBrickRoads(reports: OnyxCollection<Report>, policies: OnyxCollection<Policy>, reportActions: OnyxCollection<ReportActions>): Record<string, BrickRoad> {
+    if (!reports) {
         return {};
     }
 
     // The key in this map is the workspace id
     const workspacesBrickRoadsMap: Record<string, BrickRoad> = {};
-    Object.values(allPolicies ?? {}).forEach((policy) => {
+    Object.values(policies ?? {}).forEach((policy) => {
         // Only policies which user has access to on the list should be checked. Policies that don't have an ID and contain only information about the errors aren't displayed anywhere.
         if (!policy?.id) {
             return;
@@ -162,12 +162,12 @@ function getWorkspacesBrickRoads(): Record<string, BrickRoad> {
         }
     });
 
-    Object.values(allReports).forEach((report) => {
+    Object.values(reports).forEach((report) => {
         const policyID = report?.policyID ?? CONST.POLICY.EMPTY;
         if (!report || workspacesBrickRoadsMap[policyID] === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR) {
             return;
         }
-        const workspaceBrickRoad = getBrickRoadForPolicy(report);
+        const workspaceBrickRoad = getBrickRoadForPolicy(report, reportActions);
 
         if (!workspaceBrickRoad && !!workspacesBrickRoadsMap[policyID]) {
             return;
@@ -182,14 +182,14 @@ function getWorkspacesBrickRoads(): Record<string, BrickRoad> {
 /**
  * @returns a map where the keys are policyIDs and the values are truthy booleans if policy has unread content
  */
-function getWorkspacesUnreadStatuses(): Record<string, boolean> {
-    if (!allReports) {
+function getWorkspacesUnreadStatuses(reports: OnyxCollection<Report>): Record<string, boolean> {
+    if (!reports) {
         return {};
     }
 
     const workspacesUnreadStatuses: Record<string, boolean> = {};
 
-    Object.values(allReports).forEach((report) => {
+    Object.values(reports).forEach((report) => {
         const policyID = report?.policyID;
         if (!policyID || workspacesUnreadStatuses[policyID]) {
             return;

diff --git a/src/pages/WorkspaceSwitcherPage/index.tsx b/src/pages/WorkspaceSwitcherPage/index.tsx
@@ -1,6 +1,5 @@
 import React, {useCallback, useMemo} from 'react';
-import type {OnyxCollection} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -19,7 +18,6 @@ import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 import WorkspaceCardCreateAWorkspace from '@pages/workspace/card/WorkspaceCardCreateAWorkspace';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Policy} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import WorkspacesSectionHeader from './WorkspacesSectionHeader';
 
@@ -40,23 +38,20 @@ const sortWorkspacesBySelected = (workspace1: WorkspaceListItem, workspace2: Wor
     return workspace1.text?.toLowerCase().localeCompare(workspace2.text?.toLowerCase() ?? '') ?? 0;
 };
 
-type WorkspaceSwitcherPageOnyxProps = {
-    /** The list of this user's policies */
-    policies: OnyxCollection<Policy>;
-};
-
-type WorkspaceSwitcherPageProps = WorkspaceSwitcherPageOnyxProps;
-
 const WorkspaceCardCreateAWorkspaceInstance = <WorkspaceCardCreateAWorkspace />;
 
-function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
+function WorkspaceSwitcherPage() {
     const {isOffline} = useNetwork();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const {translate} = useLocalize();
     const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace();
 
-    const brickRoadsForPolicies = useMemo(() => getWorkspacesBrickRoads(), []);
-    const unreadStatusesForPolicies = useMemo(() => getWorkspacesUnreadStatuses(), []);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+
+    const brickRoadsForPolicies = useMemo(() => getWorkspacesBrickRoads(reports, policies, reportActions), [reports, policies, reportActions]);
+    const unreadStatusesForPolicies = useMemo(() => getWorkspacesUnreadStatuses(reports), [reports]);
 
     const getIndicatorTypeForPolicy = useCallback(
         (policyId?: string) => {
@@ -125,7 +120,7 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
                         type: CONST.ICON_TYPE_WORKSPACE,
                     },
                 ],
-                boldStyle: hasUnreadData(policy?.id),
+                isBold: hasUnreadData(policy?.id),
                 keyForList: policy?.id,
                 isPolicyAdmin: PolicyUtils.isPolicyAdmin(policy),
                 isSelected: activeWorkspaceID === policy?.id,
@@ -201,8 +196,4 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
 
 WorkspaceSwitcherPage.displayName = 'WorkspaceSwitcherPage';
 
-export default withOnyx<WorkspaceSwitcherPageProps, WorkspaceSwitcherPageOnyxProps>({
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-})(WorkspaceSwitcherPage);
+export default WorkspaceSwitcherPage;