[TS migration] Migrate Taskpreview.js component to TypeScript #33852
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,164 +1,155 @@ | ||
| import Str from 'expensify-common/lib/str'; | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {OnyxEntry, withOnyx} from 'react-native-onyx'; | ||
| import Checkbox from '@components/Checkbox'; | ||
| import Icon from '@components/Icon'; | ||
| import * as Expensicons from '@components/Icon/Expensicons'; | ||
| import {usePersonalDetails} from '@components/OnyxProvider'; | ||
| import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; | ||
| import RenderHTML from '@components/RenderHTML'; | ||
| import {showContextMenuForReport} from '@components/ShowContextMenuContext'; | ||
| import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import ControlSelection from '@libs/ControlSelection'; | ||
| import * as DeviceCapabilities from '@libs/DeviceCapabilities'; | ||
| import getButtonState from '@libs/getButtonState'; | ||
| import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; | ||
| import Navigation from '@libs/Navigation/Navigation'; | ||
| import * as ReportUtils from '@libs/ReportUtils'; | ||
| import * as TaskUtils from '@libs/TaskUtils'; | ||
| 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 {Policy, Report, ReportAction} from '@src/types/onyx'; | ||
| import {isEmptyObject} from '@src/types/utils/EmptyObject'; | ||
|
|
||
| type PolicyRole = { | ||
| /** The role of current user */ | ||
| role: string; | ||
| }; | ||
|
|
||
| type TaskPreviewOnyxProps = { | ||
| /* Onyx Props */ | ||
|
|
||
| /* current report of TaskPreview */ | ||
| taskReport: OnyxEntry<Report>; | ||
|
There was a problem hiding this comment. Please add a comment for this one. |
||
|
|
||
| /** The policy of root parent report */ | ||
| rootParentReportpolicy: OnyxEntry<PolicyRole>; | ||
| }; | ||
|
|
||
| type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & | ||
| TaskPreviewOnyxProps & { | ||
| /** The ID of the associated policy */ | ||
| // eslint-disable-next-line react/no-unused-prop-types | ||
| policyID: string; | ||
| /** The ID of the associated taskReport */ | ||
| taskReportID: string; | ||
|
|
||
| /** Whether the task preview is hovered so we can modify its style */ | ||
| isHovered: boolean; | ||
|
|
||
| /** The linked reportAction */ | ||
| action: OnyxEntry<ReportAction>; | ||
|
|
||
| /** The chat report associated with taskReport */ | ||
| chatReportID: string; | ||
|
|
||
| /** Popover context menu anchor, used for showing context menu */ | ||
| contextMenuAnchor: Element; | ||
|
|
||
| /** Callback for updating context menu active state, used for showing context menu */ | ||
| checkIfContextMenuActive: () => void; | ||
| }; | ||
|
|
||
| function TaskPreview({ | ||
| taskReport, | ||
| taskReportID, | ||
| action, | ||
|
There was a problem hiding this comment. @blazejkustra Is there a general rule about when to use destructuring with defaults and when not to? It feels to me like it would make the code easier to follow if we used defaults in the destructuring. The only case I think it won't work is when you need to know if the value was There was a problem hiding this comment. so may I update the code to use default value in destructuring if possible? There was a problem hiding this comment. The rule of thumb is to avoid unnecessary default values such as undefined, null, {}, [], '' and () => {} - when we started migration we left some of these, but we can clean them as a follow up once whole TS migration is finished. Two examples for useful default values: function Avatar({
size = CONST.AVATAR_SIZE.DEFAULT,
fallbackIcon = Expensicons.FallbackAvatar,
type = CONST.ICON_TYPE_AVATAR,
}: AvatarProps) {}
function GenericPressable(
{
shouldUseHapticsOnLongPress = false,
shouldUseHapticsOnPress = false,
shouldUseAutoHitSlop = false,
enableInScreenReaderStates = CONST.SCREEN_READER_STATES.ALL,
accessible = true,
...rest
}: PressableProps) {} |
||
| contextMenuAnchor, | ||
| chatReportID, | ||
| checkIfContextMenuActive, | ||
| currentUserPersonalDetails, | ||
| rootParentReportpolicy, | ||
| isHovered = false, | ||
| }: TaskPreviewProps) { | ||
| const styles = useThemeStyles(); | ||
| const StyleUtils = useStyleUtils(); | ||
| const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; | ||
| const {translate} = useLocalize(); | ||
| // The reportAction might not contain details regarding the taskReport | ||
| // Only the direct parent reportAction will contain details about the taskReport | ||
| // Other linked reportActions will only contain the taskReportID and we will grab the details from there | ||
| const isTaskCompleted = !isEmptyObject(taskReport) | ||
| ? taskReport?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && taskReport.statusNum === CONST.REPORT.STATUS.APPROVED | ||
| : action?.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && action?.childStatusNum === CONST.REPORT.STATUS.APPROVED; | ||
| const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? '')); | ||
|
There was a problem hiding this comment. Please make sure these implementations give the same result: const taskTitle = _.escape(TaskUtils.getTaskTitle(props.taskReportID, props.action.childReportName)); |
||
| const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport ?? {}) ?? action?.childManagerAccountID ?? ''; | ||
| const assigneeLogin = personalDetails[taskAssigneeAccountID]?.login ?? ''; | ||
| const assigneeDisplayName = personalDetails[taskAssigneeAccountID]?.displayName ?? ''; | ||
| const taskAssignee = assigneeDisplayName || LocalePhoneNumber.formatPhoneNumber(assigneeLogin); | ||
| const htmlForTaskPreview = | ||
| taskAssignee && taskAssigneeAccountID !== 0 | ||
| ? `<comment><mention-user accountid="${taskAssigneeAccountID}">@${taskAssignee}</mention-user> ${taskTitle}</comment>` | ||
| : `<comment>${taskTitle}</comment>`; | ||
| const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); | ||
|
|
||
| if (isDeletedParentAction) { | ||
| return <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />; | ||
| } | ||
|
|
||
| return ( | ||
| <View style={[styles.chatItemMessage]}> | ||
| <PressableWithoutFeedback | ||
| onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))} | ||
| onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} | ||
| onPressOut={() => ControlSelection.unblock()} | ||
| onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action ?? {}, checkIfContextMenuActive)} | ||
| style={[styles.flexRow, styles.justifyContentBetween]} | ||
| role={CONST.ROLE.BUTTON} | ||
| accessibilityLabel={translate('task.task')} | ||
| > | ||
| <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}> | ||
| <Checkbox | ||
| style={[styles.mr2]} | ||
| containerStyle={[styles.taskCheckbox]} | ||
| isChecked={isTaskCompleted} | ||
| disabled={!Task.canModifyTask(taskReport ?? {}, currentUserPersonalDetails.accountID, rootParentReportpolicy?.role ?? '')} | ||
| onPress={Session.checkIfActionIsAllowed(() => { | ||
| if (isTaskCompleted) { | ||
| Task.reopenTask(taskReport ?? {}); | ||
| } else { | ||
| Task.completeTask(taskReport ?? {}); | ||
| } | ||
| })} | ||
| accessibilityLabel={translate('task.task')} | ||
| /> | ||
| <RenderHTML html={htmlForTaskPreview} /> | ||
| </View> | ||
| <Icon | ||
| src={Expensicons.ArrowRight} | ||
| fill={StyleUtils.getIconFillColor(getButtonState(isHovered))} | ||
| /> | ||
| </PressableWithoutFeedback> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| TaskPreview.displayName = 'TaskPreview'; | ||
|
|
||
| export default withCurrentUserPersonalDetails( | ||
| withOnyx<TaskPreviewProps, TaskPreviewOnyxProps>({ | ||
| taskReport: { | ||
| key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`, | ||
| }, | ||
| rootParentReportpolicy: { | ||
| key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID ?? '0'}`, | ||
| selector: (policy: Policy | null) => ({role: policy?.role ?? ''}), | ||
| }, | ||
| })(TaskPreview), | ||
| ); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like some comments are getting dropped. I find the comments very helpful, is it a standard process to remove them? I'd like to keep them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@tgolen We preserve all comments, and sometimes we even add new ones for better clarity :)