From 529b18d6dd00c420164aedfe0bbe9fc56b9a99d9 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 19 Sep 2024 21:17:34 +0300 Subject: [PATCH 1/3] fix avatar update bug in task preview --- src/components/ReportActionItem/TaskPreview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 7a6e4942b178..3d3a7ab5e656 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -7,6 +7,7 @@ import Avatar from '@components/Avatar'; 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'; @@ -74,7 +75,8 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED; const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? '')); const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; - const [avatar] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: (personalDetails) => personalDetails?.[taskAssigneeAccountID]?.avatar}); + const personalDetails = usePersonalDetails(); + const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar; const htmlForTaskPreview = `${taskTitle}`; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); From 9408e4fb0c60ddf8f25edeef43d237adb5bb4f02 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Tue, 24 Sep 2024 00:45:13 +0300 Subject: [PATCH 2/3] migrated to useOnyx --- .../ReportActionItem/TaskPreview.tsx | 56 +++++++------------ 1 file changed, 21 insertions(+), 35 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 3d3a7ab5e656..c5f7931370c2 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -1,7 +1,7 @@ import {Str} from 'expensify-common'; import React from 'react'; import {View} from 'react-native'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Avatar from '@components/Avatar'; import Checkbox from '@components/Checkbox'; @@ -31,42 +31,34 @@ import ROUTES from '@src/ROUTES'; import type {Report, ReportAction} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type TaskPreviewOnyxProps = { - /* Onyx Props */ +type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & { + /** 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; - /* current report of TaskPreview */ - taskReport: OnyxEntry; -}; - -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; + /** Whether the task preview is hovered so we can modify its style */ + isHovered: boolean; - /** The linked reportAction */ - action: OnyxEntry; + /** The linked reportAction */ + action: OnyxEntry; - /** The chat report associated with taskReport */ - chatReportID: string; + /** The chat report associated with taskReport */ + chatReportID: string; - /** Popover context menu anchor, used for showing context menu */ - contextMenuAnchor: ContextMenuAnchor; + /** Popover context menu anchor, used for showing context menu */ + contextMenuAnchor: ContextMenuAnchor; - /** Callback for updating context menu active state, used for showing context menu */ - checkIfContextMenuActive: () => void; - }; + /** Callback for updating context menu active state, used for showing context menu */ + checkIfContextMenuActive: () => void; +}; -function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) { +function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - + const [taskReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`); // 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 @@ -136,10 +128,4 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR TaskPreview.displayName = 'TaskPreview'; -export default withCurrentUserPersonalDetails( - withOnyx({ - taskReport: { - key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`, - }, - })(TaskPreview), -); +export default withCurrentUserPersonalDetails(TaskPreview); From 82f9222dba5e0ebb19b26ebaca8eb497c44e728d Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Tue, 24 Sep 2024 00:50:00 +0300 Subject: [PATCH 3/3] minor eslint fix --- src/components/ReportActionItem/TaskPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index c5f7931370c2..053ad0c2c63e 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -28,7 +28,7 @@ import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Report, ReportAction} from '@src/types/onyx'; +import type {ReportAction} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & {