only display one error message for report action

yli121 · Feb 1, 2024 · e98f171 · e98f171
1 parent 07ef0ff
commit e98f171
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 25 deletions.
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
@@ -52,9 +52,13 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndica
         return null;
     }
 
-    // Fetch the keys, sort them, and reverse to get the last message
-    const lastKey = Object.keys(messages).sort().reverse()[0];
-    const message = messages[lastKey] as string;
+    // Fetch the keys, sort them, and map through each key to get the corresponding message
+    const sortedMessages = Object.keys(messages)
+        .sort()
+        .map((key) => messages[key]);
+
+    // Removing duplicates using Set and transforming the result into an array
+    const uniqueMessages = [...new Set(sortedMessages)].map((message) => Localize.translateIfPhraseKey(message));
 
     const isErrorMessage = type === 'error';
 
@@ -67,27 +71,34 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndica
                 />
             </View>
             <View style={styles.offlineFeedback.textContainer}>
-                {isReceiptError(message) ? (
-                    <PressableWithoutFeedback
-                        accessibilityLabel={Localize.translateLocal('iou.error.saveFileMessage')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
-                        onPress={() => {
-                            fileDownload(message.source, message.filename);
-                        }}
-                    >
-                        <Text style={styles.offlineFeedback.text}>
-                            <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.receiptFailureMessage')}</Text>
-                            <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), styles.link]}>{Localize.translateLocal('iou.error.saveFileMessage')}</Text>
-                            <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.loseFileMessage')}</Text>
+                {uniqueMessages.map((message, i) =>
+                    isReceiptError(message) ? (
+                        <PressableWithoutFeedback
+                            accessibilityLabel={Localize.translateLocal('iou.error.saveFileMessage')}
+                            key={i}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
+                            onPress={() => {
+                                fileDownload(message.source, message.filename);
+                            }}
+                        >
+                            <Text
+                                key={i}
+                                style={styles.offlineFeedback.text}
+                            >
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.receiptFailureMessage')}</Text>
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), styles.link]}>{Localize.translateLocal('iou.error.saveFileMessage')}</Text>
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.loseFileMessage')}</Text>
+                            </Text>
+                        </PressableWithoutFeedback>
+                    ) : (
+                        <Text
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={i}
+                            style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
+                        >
+                            {message}
                         </Text>
-                    </PressableWithoutFeedback>
-                ) : (
-                    <Text
-                        // eslint-disable-next-line react/no-array-index-key
-                        style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
-                    >
-                        {message}
-                    </Text>
+                    ),
                 )}
             </View>
         </View>

diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts
@@ -66,6 +66,18 @@ function getLatestErrorMessage<TOnyxData extends OnyxDataWithErrors>(onyxData: T
     return errors[key];
 }
 
+function getLatestErrorMessageField<TOnyxData extends OnyxDataWithErrors>(onyxData: TOnyxData): Record<string, string> {
+    const errors = onyxData.errors ?? {};
+
+    if (Object.keys(errors).length === 0) {
+        return {};
+    }
+
+    const key = Object.keys(errors).sort().reverse()[0];
+
+    return {key: errors[key]};
+}
+
 type OnyxDataWithErrorFields = {
     errorFields?: ErrorFields;
 };
@@ -119,4 +131,4 @@ function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inpu
     }
 }
 
-export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getMicroSecondOnyxErrorObject, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage};
+export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getMicroSecondOnyxErrorObject, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage, getLatestErrorMessageField};
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -40,6 +40,7 @@ import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation';
 import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import Navigation from '@libs/Navigation/Navigation';
@@ -733,7 +734,7 @@ function ReportActionItem(props) {
                                     !_.isUndefined(props.draftMessage) ? null : props.action.pendingAction || (props.action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : '')
                                 }
                                 shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(props.action, props.report.reportID)}
-                                errors={props.action.errors}
+                                errors={ErrorUtils.getLatestErrorMessageField(props.action)}
                                 errorRowStyles={[styles.ml10, styles.mr2]}
                                 needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(props.action)}
                                 shouldDisableStrikeThrough