From ada6a1084a93a634b3040a3e8eb88e3e88dff0fd Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 27 Nov 2023 14:05:08 +0100
Subject: [PATCH 1/2] [TS migration] Migrate 'TaskHeaderActionButton.js'
 component

---
 src/components/TaskHeaderActionButton.js  | 60 -----------------------
 src/components/TaskHeaderActionButton.tsx | 46 +++++++++++++++++
 2 files changed, 46 insertions(+), 60 deletions(-)
 delete mode 100644 src/components/TaskHeaderActionButton.js
 create mode 100644 src/components/TaskHeaderActionButton.tsx

diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
deleted file mode 100644
index 09ca427b8e56..000000000000
--- a/src/components/TaskHeaderActionButton.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import compose from '@libs/compose';
-import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
-import * as Session from '@userActions/Session';
-import * as Task from '@userActions/Task';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** Current user session */
-    session: PropTypes.shape({
-        accountID: PropTypes.number,
-    }),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    session: {
-        accountID: 0,
-    },
-};
-
-function TaskHeaderActionButton(props) {
-    const styles = useThemeStyles();
-    return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-            <Button
-                success
-                isDisabled={!Task.canModifyTask(props.report, props.session.accountID)}
-                medium
-                text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
-                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(props.report) ? Task.reopenTask(props.report) : Task.completeTask(props.report)))}
-                style={[styles.flex1]}
-            />
-        </View>
-    );
-}
-
-TaskHeaderActionButton.propTypes = propTypes;
-TaskHeaderActionButton.defaultProps = defaultProps;
-TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(TaskHeaderActionButton);
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
new file mode 100644
index 000000000000..3c0e32b38f21
--- /dev/null
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {View} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as Task from '@userActions/Task';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report, Session} from '@src/types/onyx';
+import Button from './Button';
+
+type TaskHeaderActionButtonOnyxProps = {
+    /** Current user session */
+    session: OnyxEntry<Session>;
+};
+
+type TaskHeaderActionButtonProps = TaskHeaderActionButtonOnyxProps & {
+    /** The report currently being looked at */
+    report: Report;
+};
+
+function TaskHeaderActionButton({report, session}: TaskHeaderActionButtonProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+            <Button
+                success
+                isDisabled={!Task.canModifyTask(report, session?.accountID ?? 0)}
+                medium
+                text={translate(ReportUtils.isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
+                onPress={() => (ReportUtils.isCompletedTaskReport(report) ? Task.reopenTask(report) : Task.completeTask(report))}
+                style={styles.flex1}
+            />
+        </View>
+    );
+}
+
+TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
+
+export default withOnyx<TaskHeaderActionButtonProps, TaskHeaderActionButtonOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(TaskHeaderActionButton);

From f7bb5515cb46ad9b605f3862bb0c57164af6b44e Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 4 Dec 2023 08:36:40 +0100
Subject: [PATCH 2/2] Disable complete task for anonymous user

---
 src/components/TaskHeaderActionButton.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
index 3c0e32b38f21..5f8461d8e324 100644
--- a/src/components/TaskHeaderActionButton.tsx
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -4,19 +4,20 @@ import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import * as ReportUtils from '@libs/ReportUtils';
 import useThemeStyles from '@styles/useThemeStyles';
+import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Report, Session} from '@src/types/onyx';
+import * as OnyxTypes from '@src/types/onyx';
 import Button from './Button';
 
 type TaskHeaderActionButtonOnyxProps = {
     /** Current user session */
-    session: OnyxEntry<Session>;
+    session: OnyxEntry<OnyxTypes.Session>;
 };
 
 type TaskHeaderActionButtonProps = TaskHeaderActionButtonOnyxProps & {
     /** The report currently being looked at */
-    report: Report;
+    report: OnyxTypes.Report;
 };
 
 function TaskHeaderActionButton({report, session}: TaskHeaderActionButtonProps) {
@@ -30,7 +31,7 @@ function TaskHeaderActionButton({report, session}: TaskHeaderActionButtonProps)
                 isDisabled={!Task.canModifyTask(report, session?.accountID ?? 0)}
                 medium
                 text={translate(ReportUtils.isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
-                onPress={() => (ReportUtils.isCompletedTaskReport(report) ? Task.reopenTask(report) : Task.completeTask(report))}
+                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(report) ? Task.reopenTask(report) : Task.completeTask(report)))}
                 style={styles.flex1}
             />
         </View>