Merge pull request #33108 from kubabutkiewicz/ts-migration/LHNOptions…

…List/component [TS migration] Migrate 'LHNOptionsList' component to TypeScript
Expensify · Jan 23, 2024 · 5edf172 · 5edf172
2 parents f56f180 + 87f9b94
commit 5edf172
Show file tree

Hide file tree

Showing 12 changed files with 385 additions and 452 deletions.
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -463,7 +463,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.TRANSACTION_DRAFT]: OnyxTypes.Transaction;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS]: OnyxTypes.RecentlyUsedTags;
     [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
-    [ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS]: OnyxTypes.TransactionViolations;
+    [ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS]: OnyxTypes.TransactionViolation[];
     [ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT]: string;
     [ONYXKEYS.COLLECTION.NEXT_STEP]: OnyxTypes.ReportNextStep;
 

diff --git a/src/components/DisplayNames/types.ts b/src/components/DisplayNames/types.ts
@@ -12,7 +12,7 @@ type DisplayNameWithTooltip = {
     login?: string;
 
     /** The avatar for the tooltip fallback */
-    avatar: AvatarSource;
+    avatar?: AvatarSource;
 };
 
 type DisplayNamesProps = {

diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx
@@ -0,0 +1,141 @@
+import {FlashList} from '@shopify/flash-list';
+import type {ReactElement} from 'react';
+import React, {useCallback} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import withCurrentReportID from '@components/withCurrentReportID';
+import usePermissions from '@hooks/usePermissions';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import OptionRowLHNData from './OptionRowLHNData';
+import type {LHNOptionsListOnyxProps, LHNOptionsListProps, RenderItemProps} from './types';
+
+const keyExtractor = (item: string) => `report_${item}`;
+
+function LHNOptionsList({
+    style,
+    contentContainerStyles,
+    data,
+    onSelectRow,
+    optionMode,
+    shouldDisableFocusOptions = false,
+    reports = {},
+    reportActions = {},
+    policy = {},
+    preferredLocale = CONST.LOCALES.DEFAULT,
+    personalDetails = {},
+    transactions = {},
+    currentReportID = '',
+    draftComments = {},
+    transactionViolations = {},
+}: LHNOptionsListProps) {
+    const styles = useThemeStyles();
+    const {canUseViolations} = usePermissions();
+    /**
+     * Function which renders a row in the list
+     */
+    const renderItem = useCallback(
+        ({item: reportID}: RenderItemProps): ReactElement => {
+            const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] ?? null;
+            const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? null;
+            const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`] ?? null;
+            const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? ''] ?? null;
+            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport?.policyID}`] ?? null;
+            const transactionID = itemParentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? itemParentReportAction.originalMessage.IOUTransactionID ?? '' : '';
+            const itemTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? null;
+            const itemComment = draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] ?? '';
+            const participants = [...ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport?.ownerAccountID, itemParentReportAction?.actorAccountID];
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
+
+            return (
+                <OptionRowLHNData
+                    reportID={reportID}
+                    fullReport={itemFullReport}
+                    reportActions={itemReportActions}
+                    parentReportAction={itemParentReportAction}
+                    policy={itemPolicy}
+                    // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
+                    personalDetails={participantsPersonalDetails}
+                    transaction={itemTransaction}
+                    receiptTransactions={transactions}
+                    viewMode={optionMode}
+                    isFocused={!shouldDisableFocusOptions && reportID === currentReportID}
+                    onSelectRow={onSelectRow}
+                    preferredLocale={preferredLocale}
+                    comment={itemComment}
+                    transactionViolations={transactionViolations}
+                    canUseViolations={canUseViolations}
+                />
+            );
+        },
+        [
+            currentReportID,
+            draftComments,
+            onSelectRow,
+            optionMode,
+            personalDetails,
+            policy,
+            preferredLocale,
+            reportActions,
+            reports,
+            shouldDisableFocusOptions,
+            transactions,
+            transactionViolations,
+            canUseViolations,
+        ],
+    );
+
+    return (
+        <View style={style ?? styles.flex1}>
+            <FlashList
+                indicatorStyle="white"
+                keyboardShouldPersistTaps="always"
+                contentContainerStyle={StyleSheet.flatten(contentContainerStyles)}
+                data={data}
+                testID="lhn-options-list"
+                keyExtractor={keyExtractor}
+                renderItem={renderItem}
+                estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
+                extraData={[currentReportID]}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    );
+}
+
+LHNOptionsList.displayName = 'LHNOptionsList';
+
+export default withCurrentReportID(
+    withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+        reportActions: {
+            key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+        },
+        policy: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        preferredLocale: {
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+        },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+        transactions: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION,
+        },
+        draftComments: {
+            key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
+        },
+        transactionViolations: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+        },
+    })(LHNOptionsList),
+);
+
+export type {LHNOptionsListProps};