Final touches

src/components/ApprovalWorkflowSection.tsx

@@ -1,4 +1,5 @@
-import React, {useCallback, useMemo} from 'react';
+/* eslint-disable react/function-component-definition */
+import React, {useCallback, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -20,11 +21,36 @@ type ApprovalWorkflowSectionProps = {
     onPress: () => void;
 };
 
-function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSectionProps) {
+const Test = () => {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate, toLocaleOrdinal} = useLocalize();
+
+    const approverTitle = useCallback(
+        (index: number) =>
+            approvalWorkflow.approvers.length > 1 ? `${toLocaleOrdinal(index + 1, true)} ${translate('workflowsPage.approver').toLowerCase()}` : `${translate('workflowsPage.approver')}`,
+        [approvalWorkflow.approvers.length, toLocaleOrdinal, translate],
+    );
+
+    const members = useMemo(() => {
+        if (approvalWorkflow.isDefault) {
+            return translate('workspace.common.everyone');
+        }
+
+        return OptionsListUtils.sortAlphabetically(approvalWorkflow.members, 'displayName')
+            .map((m) => m.displayName)
+            .join(', ');
+    }, [approvalWorkflow.isDefault, translate]);
+
+    return <View />;
+};
+
+function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSectionProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {translate, toLocaleOrdinal} = useLocalize();
 
     const approverTitle = useCallback(
         (index: number) =>
@@ -40,7 +66,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
         return OptionsListUtils.sortAlphabetically(approvalWorkflow.members, 'displayName')
             .map((m) => m.displayName)
             .join(', ');
-    }, [approvalWorkflow.isDefault, approvalWorkflow.members, translate]);
+    }, [approvalWorkflow]);
 
     return (
         <PressableWithoutFeedback
@@ -110,4 +136,4 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
     );
 }
 
-export default ApprovalWorkflowSection;
+export {ApprovalWorkflowSection};

src/components/AttachmentModal.tsx

@@ -275,7 +275,6 @@ function AttachmentModal({
         }
 
         setIsModalOpen(false);
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isModalOpen, isConfirmButtonDisabled, onConfirm, file, sourceState]);
 
     /**
@@ -458,8 +457,7 @@ function AttachmentModal({
             });
         }
         return menuItems;
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isReceiptAttachment, transaction, file, sourceState, iouType]);
+    }, [isReceiptAttachment, canEditReceipt, isOffline, allowDownload, isLocalSource, transaction, translate, closeModal, iouType, report?.reportID, downloadAttachment]);
 
     // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment.
     // props.isReceiptAttachment will be null until its certain what the file is, in which case it will then be true|false.