From c073d8c8794ae5b9ac0c432cc63130e96a5a3c1b Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Wed, 10 Jan 2024 19:40:15 +0400 Subject: [PATCH 01/13] Init changes to migrate --- src/components/MenuItem.tsx | 2 +- .../{TaskView.js => TaskView.tsx} | 116 +++++++++--------- 2 files changed, 57 insertions(+), 61 deletions(-) rename src/components/ReportActionItem/{TaskView.js => TaskView.tsx} (73%) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 334fa9895205..5f82e1da94ed 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -204,7 +204,7 @@ type MenuItemProps = (IconProps | AvatarProps | NoIcon) & { shouldBlockSelection?: boolean; /** Whether should render title as HTML or as Text */ - shouldParseTitle?: false; + shouldParseTitle?: boolean; /** Should check anonymous user in onPress function */ shouldCheckActionAllowedOnPress?: boolean; diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.tsx similarity index 73% rename from src/components/ReportActionItem/TaskView.js rename to src/components/ReportActionItem/TaskView.tsx index 7f7b177136ed..7c231a6e3f34 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.tsx @@ -1,8 +1,8 @@ import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import _ from 'underscore'; import Checkbox from '@components/Checkbox'; import Hoverable from '@components/Hoverable'; @@ -15,9 +15,11 @@ import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; -import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; +import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withWindowDimensions from '@components/withWindowDimensions'; +import type {WindowDimensionsProps} from '@components/withWindowDimensions/types'; +import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; @@ -26,57 +28,55 @@ import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import reportPropTypes from '@pages/reportPropTypes'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; -const propTypes = { - /** The report currently being looked at */ - report: reportPropTypes.isRequired, +type TaskViewOnyxProps = { + /** All of the personal details for everyone */ + personalDetails: OnyxEntry<PersonalDetailsList>; - /** The policy of root parent report */ - policy: PropTypes.shape({ - /** The role of current user */ - role: PropTypes.string, - }), - - /** Whether we should display the horizontal rule below the component */ - shouldShowHorizontalRule: PropTypes.bool.isRequired, - - ...withLocalizePropTypes, - - ...withCurrentUserPersonalDetailsPropTypes, + /** The policy for the current route */ + policy: Partial<OnyxEntry<Policy>>; }; -const defaultProps = { - policy: {}, -}; +type TaskViewProps = TaskViewOnyxProps & + WindowDimensionsProps & + WithCurrentUserPersonalDetailsProps & { + /** The report currently being looked at */ + report: Report; -function TaskView(props) { + /** Whether we should display the horizontal rule below the component */ + shouldShowHorizontalRule: boolean; + }; + +function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: TaskViewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); useEffect(() => { - Task.setTaskReport({...props.report}); - }, [props.report]); + Task.setTaskReport({report}); + }, [report]); - const taskTitle = convertToLTR(props.report.reportName || ''); - const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails), false); - const isCompleted = ReportUtils.isCompletedTaskReport(props.report); - const isOpen = ReportUtils.isOpenTaskReport(props.report); - const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID, lodashGet(props.policy, 'role', '')); + const taskTitle = convertToLTR(report.reportName ?? ''); + // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript. + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false); + const isCompleted = ReportUtils.isCompletedTaskReport(report); + const isOpen = ReportUtils.isOpenTaskReport(report); + const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, lodashGet(policy, 'role', '')); const disableState = !canModifyTask; const isDisableInteractive = !canModifyTask || !isOpen; const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; + const {translate} = useLocalize(); return ( <View> <OfflineWithFeedback shouldShowErrorMessages - errors={lodashGet(props, 'report.errorFields.editTask') || lodashGet(props, 'report.errorFields.createTask')} - onClose={() => Task.clearTaskErrors(props.report.reportID)} + errors={lodashGet(report, 'errorFields.editTask') ?? lodashGet(report, 'errorFields.createTask')} + onClose={() => Task.clearTaskErrors(report.reportID)} errorRowStyles={styles.ph5} > <Hoverable> @@ -87,10 +87,10 @@ function TaskView(props) { return; } if (e && e.type === 'click') { - e.currentTarget.blur(); + (e.currentTarget as HTMLElement).blur(); } - Navigation.navigate(ROUTES.TASK_TITLE.getRoute(props.report.reportID)); + Navigation.navigate(ROUTES.TASK_TITLE.getRoute(report.reportID)); })} style={({pressed}) => [ styles.ph5, @@ -98,20 +98,19 @@ function TaskView(props) { StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true), isDisableInteractive && !disableState && styles.cursorDefault, ]} - ref={props.forwardedRef} disabled={disableState} - accessibilityLabel={taskTitle || props.translate('task.task')} + accessibilityLabel={taskTitle || translate('task.task')} > {({pressed}) => ( <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.reportName')}> - <Text style={styles.taskTitleDescription}>{props.translate('task.title')}</Text> - <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}> + <Text style={styles.taskTitleDescription}>{translate('task.title')}</Text> + <View style={[styles.flexRow, styles.flex1]}> <Checkbox onPress={Session.checkIfActionIsAllowed(() => { if (isCompleted) { - Task.reopenTask(props.report); + Task.reopenTask(report); } else { - Task.completeTask(props.report); + Task.completeTask(report); } })} isChecked={isCompleted} @@ -119,7 +118,7 @@ function TaskView(props) { containerSize={24} containerBorderRadius={8} caretSize={16} - accessibilityLabel={taskTitle || props.translate('task.task')} + accessibilityLabel={taskTitle || translate('task.task')} disabled={!canModifyTask} /> <View style={[styles.flexRow, styles.flex1]}> @@ -148,9 +147,9 @@ function TaskView(props) { <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}> <MenuItemWithTopDescription shouldParseTitle - description={props.translate('task.description')} - title={props.report.description || ''} - onPress={() => Navigation.navigate(ROUTES.TASK_DESCRIPTION.getRoute(props.report.reportID))} + description={translate('task.description')} + title={report.description ?? ''} + onPress={() => Navigation.navigate(ROUTES.TASK_DESCRIPTION.getRoute(report.reportID))} shouldShowRightIcon={isOpen} disabled={disableState} wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} @@ -159,16 +158,16 @@ function TaskView(props) { interactive={!isDisableInteractive} /> </OfflineWithFeedback> - {props.report.managerID ? ( + {report.managerID ? ( <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.managerID')}> <MenuItem - label={props.translate('task.assignee')} - title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)} - icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], personalDetails)} + label={translate('task.assignee')} + title={ReportUtils.getDisplayNameForParticipant(report.managerID)} + icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)} iconType={CONST.ICON_TYPE_AVATAR} avatarSize={CONST.AVATAR_SIZE.SMALLER} titleStyle={styles.assigneeTextStyle} - onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(props.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(report.reportID))} shouldShowRightIcon={isOpen} disabled={disableState} wrapperStyle={[styles.pv2]} @@ -180,8 +179,8 @@ function TaskView(props) { </OfflineWithFeedback> ) : ( <MenuItemWithTopDescription - description={props.translate('task.assignee')} - onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(props.report.reportID))} + description={translate('task.assignee')} + onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(report.reportID))} shouldShowRightIcon={isOpen} disabled={disableState} wrapperStyle={[styles.pv2]} @@ -191,22 +190,17 @@ function TaskView(props) { )} </OfflineWithFeedback> <SpacerView - shouldShow={props.shouldShowHorizontalRule} - style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]} + shouldShow={shouldShowHorizontalRule} + style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]} /> </View> ); } -TaskView.propTypes = propTypes; -TaskView.defaultProps = defaultProps; TaskView.displayName = 'TaskView'; export default compose( - withWindowDimensions, - withLocalize, - withCurrentUserPersonalDetails, - withOnyx({ + withOnyx<TaskViewProps, TaskViewOnyxProps>({ personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, @@ -215,7 +209,9 @@ export default compose( const rootParentReport = ReportUtils.getRootParentReport(report); return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`; }, - selector: (policy) => _.pick(policy, ['role']), + selector: (policy: OnyxEntry<Policy>) => _.pick(policy, ['role']), }, }), + withWindowDimensions, + withCurrentUserPersonalDetails, )(TaskView); From 69b5b475aff2bfd44eb148e853ff0eecb5970ea7 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Wed, 10 Jan 2024 23:04:20 +0400 Subject: [PATCH 02/13] Fix Eslint errors --- src/components/ReportActionItem/TaskView.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 7c231a6e3f34..4793bbb1da1d 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -1,9 +1,8 @@ -import lodashGet from 'lodash/get'; +import _ from 'lodash'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; -import _ from 'underscore'; import Checkbox from '@components/Checkbox'; import Hoverable from '@components/Hoverable'; import Icon from '@components/Icon'; @@ -65,7 +64,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false); const isCompleted = ReportUtils.isCompletedTaskReport(report); const isOpen = ReportUtils.isOpenTaskReport(report); - const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, lodashGet(policy, 'role', '')); + const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role ?? ''); const disableState = !canModifyTask; const isDisableInteractive = !canModifyTask || !isOpen; const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; @@ -75,7 +74,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas <View> <OfflineWithFeedback shouldShowErrorMessages - errors={lodashGet(report, 'errorFields.editTask') ?? lodashGet(report, 'errorFields.createTask')} + errors={report.errorFields?.editTask ?? report.errorFields?.createTask} onClose={() => Task.clearTaskErrors(report.reportID)} errorRowStyles={styles.ph5} > @@ -102,7 +101,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas accessibilityLabel={taskTitle || translate('task.task')} > {({pressed}) => ( - <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.reportName')}> + <OfflineWithFeedback pendingAction={report.pendingFields?.reportName}> <Text style={styles.taskTitleDescription}>{translate('task.title')}</Text> <View style={[styles.flexRow, styles.flex1]}> <Checkbox @@ -144,7 +143,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas </PressableWithSecondaryInteraction> )} </Hoverable> - <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}> + <OfflineWithFeedback pendingAction={report.pendingFields?.description}> <MenuItemWithTopDescription shouldParseTitle description={translate('task.description')} @@ -159,7 +158,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas /> </OfflineWithFeedback> {report.managerID ? ( - <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.managerID')}> + <OfflineWithFeedback pendingAction={report.pendingFields?.managerID}> <MenuItem label={translate('task.assignee')} title={ReportUtils.getDisplayNameForParticipant(report.managerID)} From 3843d036c66dadb08fc3337a8ac53463268d1e3b Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 12 Jan 2024 20:20:05 +0400 Subject: [PATCH 03/13] Fix reviewer comments --- src/components/ReportActionItem/TaskView.tsx | 35 ++++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 4793bbb1da1d..a6cd08482e63 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -21,6 +21,7 @@ import type {WindowDimensionsProps} from '@components/withWindowDimensions/types import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import getButtonState from '@libs/getButtonState'; @@ -39,7 +40,7 @@ type TaskViewOnyxProps = { personalDetails: OnyxEntry<PersonalDetailsList>; /** The policy for the current route */ - policy: Partial<OnyxEntry<Policy>>; + policy: Pick<Policy, 'role'> | null; }; type TaskViewProps = TaskViewOnyxProps & @@ -52,11 +53,11 @@ type TaskViewProps = TaskViewOnyxProps & shouldShowHorizontalRule: boolean; }; -function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: TaskViewProps) { +function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskViewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); useEffect(() => { - Task.setTaskReport({report}); + Task.setTaskReport(report); }, [report]); const taskTitle = convertToLTR(report.reportName ?? ''); @@ -198,19 +199,17 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas TaskView.displayName = 'TaskView'; -export default compose( - withOnyx<TaskViewProps, TaskViewOnyxProps>({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, +const TaskViewWithOnyx = withOnyx<TaskViewProps, TaskViewOnyxProps>({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + policy: { + key: ({report}) => { + const rootParentReport = ReportUtils.getRootParentReport(report); + return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`; }, - policy: { - key: ({report}) => { - const rootParentReport = ReportUtils.getRootParentReport(report); - return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`; - }, - selector: (policy: OnyxEntry<Policy>) => _.pick(policy, ['role']), - }, - }), - withWindowDimensions, - withCurrentUserPersonalDetails, -)(TaskView); + selector: (policy: OnyxEntry<Policy>) => (policy ? {role: policy.role} : null), + }, +})(TaskView); + +export default withCurrentUserPersonalDetails(TaskViewWithOnyx); From 40cddcfefa4296e42dc6d969d2c87c26c3a6ee33 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 12 Jan 2024 20:25:33 +0400 Subject: [PATCH 04/13] Fix eslint error --- src/components/ReportActionItem/TaskView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index a6cd08482e63..e95828de7ce7 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -1,4 +1,3 @@ -import _ from 'lodash'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; From 2233876267837ca1f72300cb507e2cfe2a16fc7f Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 12 Jan 2024 20:32:09 +0400 Subject: [PATCH 05/13] Fix eslint error --- src/components/ReportActionItem/TaskView.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index e95828de7ce7..9e63f78a44d3 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -15,13 +15,10 @@ import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; -import withWindowDimensions from '@components/withWindowDimensions'; import type {WindowDimensionsProps} from '@components/withWindowDimensions/types'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; From dec27442056b707d51f2990abbaa62fa1dd82d5a Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Thu, 25 Jan 2024 21:44:46 +0400 Subject: [PATCH 06/13] Fix typescript error --- src/components/ReportActionItem/TaskView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index dee37b83b586..0468cc727247 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -61,7 +61,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false); const isCompleted = ReportUtils.isCompletedTaskReport(report); const isOpen = ReportUtils.isOpenTaskReport(report); - const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role ?? ''); + const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role); const disableState = !canModifyTask; const isDisableInteractive = !canModifyTask || !isOpen; const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; From dada2261989790df462f926c42b394447b3d3838 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 26 Jan 2024 01:06:27 +0400 Subject: [PATCH 07/13] Fix reviewer comment --- src/components/ReportActionItem/TaskView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 0468cc727247..bbea6315b30b 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -40,7 +40,6 @@ type TaskViewOnyxProps = { }; type TaskViewProps = TaskViewOnyxProps & - WindowDimensionsProps & WithCurrentUserPersonalDetailsProps & { /** The report currently being looked at */ report: Report; From 4de88d8a7a07810233b728e3ff955da1785df688 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 26 Jan 2024 10:05:12 +0400 Subject: [PATCH 08/13] fix lint error --- src/components/ReportActionItem/TaskView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index bbea6315b30b..175560284996 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -15,7 +15,6 @@ import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; -import type {WindowDimensionsProps} from '@components/withWindowDimensions/types'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; From 59bb6455eaabf93f446968c2ada238d552d0a425 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 26 Jan 2024 10:18:04 +0400 Subject: [PATCH 09/13] fix typescript error --- src/components/ReportActionItem/TaskView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 175560284996..b67c7af4762c 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -157,6 +157,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView <MenuItem label={translate('task.assignee')} title={ReportUtils.getDisplayNameForParticipant(report.managerID)} + // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript. icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)} iconType={CONST.ICON_TYPE_AVATAR} avatarSize={CONST.AVATAR_SIZE.SMALLER} From 60ef074e782e2622774d1144e155e0e140fb4b93 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 26 Jan 2024 23:04:26 +0400 Subject: [PATCH 10/13] Remove @ts-expect-error --- src/components/ReportActionItem/TaskView.tsx | 6 ++---- src/types/utils/IconAsset.ts | 3 ++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index b67c7af4762c..00b591b2ec97 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -55,8 +55,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView }, [report]); const taskTitle = convertToLTR(report.reportName ?? ''); - // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript. - const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false); + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails), false); const isCompleted = ReportUtils.isCompletedTaskReport(report); const isOpen = ReportUtils.isOpenTaskReport(report); const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role); @@ -157,8 +156,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView <MenuItem label={translate('task.assignee')} title={ReportUtils.getDisplayNameForParticipant(report.managerID)} - // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript. - icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)} + icon={OptionsListUtils.getAvatarsForAccountIDs(report.managerID ? [report.managerID] : [], personalDetails)} iconType={CONST.ICON_TYPE_AVATAR} avatarSize={CONST.AVATAR_SIZE.SMALLER} titleStyle={styles.assigneeTextStyle} diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts index f5d193aaa993..12a569bf54f6 100644 --- a/src/types/utils/IconAsset.ts +++ b/src/types/utils/IconAsset.ts @@ -1,6 +1,7 @@ import type {ImageSourcePropType} from 'react-native'; import type {SvgProps} from 'react-native-svg/lib/typescript'; +import type {Icon} from "@src/types/onyx/OnyxCommon"; -type IconAsset = React.FC<SvgProps> | ImageSourcePropType; +type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[]; export default IconAsset; From 5412ac030e16040f441adc37cf75354763165a3c Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Fri, 26 Jan 2024 23:09:23 +0400 Subject: [PATCH 11/13] Run prettier --- src/components/ReportActionItem/TaskView.tsx | 5 ++++- src/types/utils/IconAsset.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 00b591b2ec97..ea685d07579d 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -55,7 +55,10 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView }, [report]); const taskTitle = convertToLTR(report.reportName ?? ''); - const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails), false); + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips( + OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails), + false, + ); const isCompleted = ReportUtils.isCompletedTaskReport(report); const isOpen = ReportUtils.isOpenTaskReport(report); const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role); diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts index 12a569bf54f6..19c439d7e9d0 100644 --- a/src/types/utils/IconAsset.ts +++ b/src/types/utils/IconAsset.ts @@ -1,6 +1,6 @@ import type {ImageSourcePropType} from 'react-native'; import type {SvgProps} from 'react-native-svg/lib/typescript'; -import type {Icon} from "@src/types/onyx/OnyxCommon"; +import type {Icon} from '@src/types/onyx/OnyxCommon'; type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[]; From e7f9952ecc43d34c8da7eab5e9ebd5e5d5274c72 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Tue, 30 Jan 2024 14:48:15 +0400 Subject: [PATCH 12/13] fix reviewer comment --- src/components/MenuItem.tsx | 2 +- src/types/utils/IconAsset.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 5f82e1da94ed..d069eea58dc3 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -40,7 +40,7 @@ type IconProps = { iconType?: typeof CONST.ICON_TYPE_ICON; /** Icon to display on the left side of component */ - icon: IconAsset; + icon: IconAsset | IconType[]; }; type AvatarProps = { diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts index 19c439d7e9d0..f5d193aaa993 100644 --- a/src/types/utils/IconAsset.ts +++ b/src/types/utils/IconAsset.ts @@ -1,7 +1,6 @@ import type {ImageSourcePropType} from 'react-native'; import type {SvgProps} from 'react-native-svg/lib/typescript'; -import type {Icon} from '@src/types/onyx/OnyxCommon'; -type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[]; +type IconAsset = React.FC<SvgProps> | ImageSourcePropType; export default IconAsset; From ff8a853dc3bd03944253e73c238968a42b0b0581 Mon Sep 17 00:00:00 2001 From: Shahe Shahinyan <shahe.shahinyan@gmail.com> Date: Tue, 30 Jan 2024 14:56:16 +0400 Subject: [PATCH 13/13] Fix ts error --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index d069eea58dc3..e53c7915da8a 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -46,7 +46,7 @@ type IconProps = { type AvatarProps = { iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; - icon: AvatarSource; + icon: AvatarSource | IconType[]; }; type NoIcon = {