From 2c3c6c0758e68097929330ee0de8631fb450299a Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Tue, 25 Jul 2023 17:55:09 +0500
Subject: [PATCH 1/2] feat: wrap TaskView inside Hoverable

---
 src/components/ReportActionItem/TaskView.js | 95 +++++++++++----------
 1 file changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 969f4c5e9591..951534027ca9 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -9,6 +9,7 @@ import compose from '../../libs/compose';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import Hoverable from '../Hoverable';
 import MenuItem from '../MenuItem';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
@@ -52,54 +53,58 @@ function TaskView(props) {
     const disableState = !canEdit || !isOpen;
     return (
         <View>
-            <PressableWithSecondaryInteraction
-                onPress={Session.checkIfActionIsAllowed((e) => {
-                    if (e && e.type === 'click') {
-                        e.currentTarget.blur();
-                    }
+            <Hoverable>
+                {(hovered) =>
+                    <PressableWithSecondaryInteraction
+                        onPress={Session.checkIfActionIsAllowed((e) => {
+                            if (e && e.type === 'click') {
+                                e.currentTarget.blur();
+                            }
 
-                    Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
-                })}
-                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState), true)]}
-                ref={props.forwardedRef}
-                disabled={disableState}
-                accessibilityLabel={taskTitle || props.translate('task.task')}
-            >
-                {({hovered, pressed}) => (
-                    <>
-                        <Text style={styles.taskTitleDescription}>{props.translate('task.title')}</Text>
-                        <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
-                            <Checkbox
-                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
-                                isChecked={isCompleted}
-                                style={styles.taskMenuItemCheckbox}
-                                containerSize={24}
-                                containerBorderRadius={8}
-                                caretSize={16}
-                                accessibilityLabel={taskTitle || props.translate('task.task')}
-                                disabled={isCanceled || !canEdit}
-                            />
-                            <View style={[styles.flexRow, styles.flex1]}>
-                                <Text
-                                    numberOfLines={3}
-                                    style={styles.taskTitleMenuItem}
-                                >
-                                    {taskTitle}
-                                </Text>
-                            </View>
-                            {isOpen && (
-                                <View style={styles.taskRightIconContainer}>
-                                    <Icon
-                                        additionalStyles={[styles.alignItemsCenter]}
-                                        src={Expensicons.ArrowRight}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, disableState))}
+                            Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
+                        })}
+                        style={({pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState), true)]}
+                        ref={props.forwardedRef}
+                        disabled={disableState}
+                        accessibilityLabel={taskTitle || props.translate('task.task')}
+                    >
+                        {({pressed}) => (
+                            <>
+                                <Text style={styles.taskTitleDescription}>{props.translate('task.title')}</Text>
+                                <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
+                                    <Checkbox
+                                        onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+                                        isChecked={isCompleted}
+                                        style={styles.taskMenuItemCheckbox}
+                                        containerSize={24}
+                                        containerBorderRadius={8}
+                                        caretSize={16}
+                                        accessibilityLabel={taskTitle || props.translate('task.task')}
+                                        disabled={isCanceled || !canEdit}
                                     />
+                                    <View style={[styles.flexRow, styles.flex1]}>
+                                        <Text
+                                            numberOfLines={3}
+                                            style={styles.taskTitleMenuItem}
+                                        >
+                                            {taskTitle}
+                                        </Text>
+                                    </View>
+                                    {isOpen && (
+                                        <View style={styles.taskRightIconContainer}>
+                                            <Icon
+                                                additionalStyles={[styles.alignItemsCenter]}
+                                                src={Expensicons.ArrowRight}
+                                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, disableState))}
+                                            />
+                                        </View>
+                                    )}
                                 </View>
-                            )}
-                        </View>
-                    </>
-                )}
-            </PressableWithSecondaryInteraction>
+                            </>
+                        )}
+                    </PressableWithSecondaryInteraction>
+                }
+            </Hoverable>
             <MenuItemWithTopDescription
                 description={props.translate('task.description')}
                 title={props.report.description || ''}

From 3bfbc5bf987f349047f3edb5618d70eb7fd109a1 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Tue, 25 Jul 2023 18:16:25 +0500
Subject: [PATCH 2/2] feat: lint errors

---
 src/components/ReportActionItem/TaskView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 951534027ca9..1935b9c590d8 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -54,7 +54,7 @@ function TaskView(props) {
     return (
         <View>
             <Hoverable>
-                {(hovered) =>
+                {(hovered) => (
                     <PressableWithSecondaryInteraction
                         onPress={Session.checkIfActionIsAllowed((e) => {
                             if (e && e.type === 'click') {
@@ -103,7 +103,7 @@ function TaskView(props) {
                             </>
                         )}
                     </PressableWithSecondaryInteraction>
-                }
+                )}
             </Hoverable>
             <MenuItemWithTopDescription
                 description={props.translate('task.description')}