Merge pull request #49918 from kacper-mikolajczak/feat/useOnyx-collec…

…tion-mapper

Adjust `useOnyx` selector for collections

package.json

@@ -149,7 +149,7 @@
     "react-native-launch-arguments": "^4.0.2",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "2.0.71",
+    "react-native-onyx": "2.0.73",
     "react-native-pager-view": "6.4.1",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",

src/hooks/useReportIDs.tsx

@@ -8,6 +8,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {Message} from '@src/types/onyx/ReportAction';
+import mapOnyxCollectionItems from '@src/utils/mapOnyxCollectionItems';
 import useActiveWorkspace from './useActiveWorkspace';
 import useCurrentReportID from './useCurrentReportID';
 import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
@@ -42,7 +43,8 @@ const reportActionsSelector = (reportActions: OnyxEntry<OnyxTypes.ReportActions>
         Object.values(reportActions)
             .filter(Boolean)
             .map((reportAction) => {
-                const {reportActionID, actionName, errors = [], originalMessage} = reportAction;
+                const {reportActionID, actionName, errors = []} = reportAction;
+                const originalMessage = ReportActionsUtils.getOriginalMessage(reportAction);
                 const message = ReportActionsUtils.getReportActionMessage(reportAction);
                 const decision = message?.moderationDecision?.decision;
 
@@ -81,8 +83,8 @@ function ReportIDsContextProvider({
 }: ReportIDsContextProviderProps) {
     const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE, {initialValue: CONST.PRIORITY_MODE.DEFAULT});
     const [chatReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
-    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: policySelector});
-    const [allReportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS, {selector: reportActionsSelector});
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: (c) => mapOnyxCollectionItems(c, policySelector)});
+    const [allReportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS, {selector: (c) => mapOnyxCollectionItems(c, reportActionsSelector)});
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
     const [reportsDrafts] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
     const [betas] = useOnyx(ONYXKEYS.BETAS);

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -22,11 +22,22 @@ import type {TOnboardingRef} from '@libs/OnboardingRefManager';
 import variables from '@styles/variables';
 import * as Welcome from '@userActions/Welcome';
 import CONST from '@src/CONST';
+import type {OnboardingPurposeType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type {BaseOnboardingPurposeProps} from './types';
 
+const selectableOnboardingChoices = Object.values(CONST.SELECTABLE_ONBOARDING_CHOICES);
+
+function getOnboardingChoices(customChoices: OnboardingPurposeType[]) {
+    if (customChoices.length === 0) {
+        return selectableOnboardingChoices;
+    }
+
+    return selectableOnboardingChoices.filter((choice) => customChoices.includes(choice));
+}
+
 const menuIcons = {
     [CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload,
     [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: Illustrations.Abacus,
@@ -51,8 +62,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
 
     const [customChoices = []] = useOnyx(ONYXKEYS.ONBOARDING_CUSTOM_CHOICES);
 
-    const onboardingChoices =
-        customChoices.length > 0 ? Object.values(CONST.SELECTABLE_ONBOARDING_CHOICES).filter((choice) => customChoices.includes(choice)) : Object.values(CONST.SELECTABLE_ONBOARDING_CHOICES);
+    const onboardingChoices = getOnboardingChoices(customChoices);
 
     const menuItems: MenuItemProps[] = onboardingChoices.map((choice) => {
         const translationKey = `onboarding.purpose.${choice}` as const;

src/pages/ProfilePage.tsx

@@ -41,6 +41,7 @@ import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {PersonalDetails, Report} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import mapOnyxCollectionItems from '@src/utils/mapOnyxCollectionItems';
 
 type ProfilePageProps = StackScreenProps<ProfileNavigatorParamList, typeof SCREENS.PROFILE_ROOT>;
 
@@ -76,7 +77,7 @@ const chatReportSelector = (report: OnyxEntry<Report>): OnyxEntry<Report> =>
     };
 
 function ProfilePage({route}: ProfilePageProps) {
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: chatReportSelector});
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (c) => mapOnyxCollectionItems(c, chatReportSelector)});
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
     const [session] = useOnyx(ONYXKEYS.SESSION);

src/utils/mapOnyxCollectionItems.ts

@@ -0,0 +1,12 @@
+import type {KeyValueMapping, OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollectionKey} from '@src/ONYXKEYS';
+
+export default function mapOnyxCollectionItems<TKey extends OnyxCollectionKey, TReturn, TEntryData = KeyValueMapping[TKey]>(
+    collection: OnyxCollection<TEntryData>,
+    mapper: (entry: OnyxEntry<TEntryData>) => TReturn,
+): NonNullable<OnyxCollection<TReturn>> {
+    return Object.entries(collection ?? {}).reduce((acc: NonNullable<OnyxCollection<TReturn>>, [key, entry]) => {
+        acc[key] = mapper(entry);
+        return acc;
+    }, {});
+}