From 1baa2c04bf7a34160611e4aefb27d67b8a744418 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Mon, 5 Jun 2023 21:26:45 +0530
Subject: [PATCH 1/5] migrate to functional

---
 src/pages/home/report/ReportFooter.js | 83 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index f0541be88ea4..dcce70dbc369 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo, useCallback} from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -57,53 +57,54 @@ const defaultProps = {
     shouldDisableCompose: false,
 };
 
-class ReportFooter extends React.Component {
+const ReportFooter = ({report, reportActions, isOffline, onSubmitComment, errors, pendingAction, shouldShowComposeInput, shouldDisableCompose, isSmallScreenWidth, isComposerFullSize}) => {
     /**
      * @returns {Object}
      */
-    getChatFooterStyles() {
-        return {...styles.chatFooter, minHeight: !this.props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
-    }
+    const getChatFooterStyles = useCallback(
+        () => ({
+            ...styles.chatFooter,
+            minHeight: !isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0,
+        }),
+        [isOffline],
+    );
 
-    render() {
-        const isArchivedRoom = ReportUtils.isArchivedRoom(this.props.report);
-        const isAllowedToComment = ReportUtils.isAllowedToComment(this.props.report);
-        const hideComposer = isArchivedRoom || !_.isEmpty(this.props.errors) || !isAllowedToComment;
+    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(report), [report]);
+    const isAllowedToComment = useMemo(() => ReportUtils.isAllowedToComment(report), [report]);
+    const hideComposer = useMemo(() => isArchivedRoom || !_.isEmpty(errors) || !isAllowedToComment, [isArchivedRoom, errors, isAllowedToComment]);
 
-        return (
-            <>
-                {(isArchivedRoom || hideComposer) && (
-                    <View style={[styles.chatFooter, this.props.isSmallScreenWidth ? styles.mb5 : null]}>
-                        {isArchivedRoom && <ArchivedReportFooter report={this.props.report} />}
-                        {!this.props.isSmallScreenWidth && (
-                            <View style={styles.offlineIndicatorRow}>{hideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>
+    return (
+        <>
+            {(isArchivedRoom || hideComposer) && (
+                <View style={[styles.chatFooter, isSmallScreenWidth ? styles.mb5 : null]}>
+                    {isArchivedRoom && <ArchivedReportFooter report={report} />}
+                    {!isSmallScreenWidth && <View style={styles.offlineIndicatorRow}>{hideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>}
+                </View>
+            )}
+            {!hideComposer && (shouldShowComposeInput || !isSmallScreenWidth) && (
+                <View style={[getChatFooterStyles(), isComposerFullSize && styles.chatFooterFullCompose]}>
+                    <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                        {Session.isAnonymousUser() ? (
+                            <AnonymousReportFooter report={report} />
+                        ) : (
+                            <ReportActionCompose
+                                onSubmit={onSubmitComment}
+                                reportID={report.reportID.toString()}
+                                reportActions={reportActions}
+                                report={report}
+                                pendingAction={pendingAction}
+                                isComposerFullSize={isComposerFullSize}
+                                disabled={shouldDisableCompose}
+                            />
                         )}
-                    </View>
-                )}
-                {!hideComposer && (this.props.shouldShowComposeInput || !this.props.isSmallScreenWidth) && (
-                    <View style={[this.getChatFooterStyles(), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
-                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                            {Session.isAnonymousUser() ? (
-                                <AnonymousReportFooter report={this.props.report} />
-                            ) : (
-                                <ReportActionCompose
-                                    onSubmit={this.props.onSubmitComment}
-                                    reportID={this.props.report.reportID.toString()}
-                                    reportActions={this.props.reportActions}
-                                    report={this.props.report}
-                                    pendingAction={this.props.pendingAction}
-                                    isComposerFullSize={this.props.isComposerFullSize}
-                                    disabled={this.props.shouldDisableCompose}
-                                />
-                            )}
-                        </SwipeableView>
-                    </View>
-                )}
-            </>
-        );
-    }
-}
+                    </SwipeableView>
+                </View>
+            )}
+        </>
+    );
+};
 
+ReportFooter.displayName = 'ReportFooter';
 ReportFooter.propTypes = propTypes;
 ReportFooter.defaultProps = defaultProps;
 export default compose(

From 4867e4b951e56e08aa6f5adf3f98f0db0f7c1e30 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 6 Jun 2023 10:17:54 +0530
Subject: [PATCH 2/5] use function instead of const

---
 src/pages/home/report/ReportFooter.js | 46 ++++++++++++++-------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index dcce70dbc369..08d0335afa10 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -1,4 +1,4 @@
-import React, {useMemo, useCallback} from 'react';
+import React, {useMemo} from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -57,44 +57,46 @@ const defaultProps = {
     shouldDisableCompose: false,
 };
 
-const ReportFooter = ({report, reportActions, isOffline, onSubmitComment, errors, pendingAction, shouldShowComposeInput, shouldDisableCompose, isSmallScreenWidth, isComposerFullSize}) => {
+function ReportFooter(props) {
     /**
      * @returns {Object}
      */
-    const getChatFooterStyles = useCallback(
+    const getChatFooterStyles = useMemo(
         () => ({
             ...styles.chatFooter,
-            minHeight: !isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0,
+            minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0,
         }),
-        [isOffline],
+        [props.isOffline],
     );
 
-    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(report), [report]);
-    const isAllowedToComment = useMemo(() => ReportUtils.isAllowedToComment(report), [report]);
-    const hideComposer = useMemo(() => isArchivedRoom || !_.isEmpty(errors) || !isAllowedToComment, [isArchivedRoom, errors, isAllowedToComment]);
+    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(props.report), [props.report]);
+    const isAllowedToComment = useMemo(() => ReportUtils.isAllowedToComment(props.report), [props.report]);
+    const hideComposer = useMemo(() => isArchivedRoom || !_.isEmpty(props.errors) || !isAllowedToComment, [isArchivedRoom, props.errors, isAllowedToComment]);
 
     return (
         <>
             {(isArchivedRoom || hideComposer) && (
-                <View style={[styles.chatFooter, isSmallScreenWidth ? styles.mb5 : null]}>
-                    {isArchivedRoom && <ArchivedReportFooter report={report} />}
-                    {!isSmallScreenWidth && <View style={styles.offlineIndicatorRow}>{hideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>}
+                <View style={[styles.chatFooter, props.isSmallScreenWidth ? styles.mb5 : null]}>
+                    {isArchivedRoom && <ArchivedReportFooter report={props.report} />}
+                    {!props.isSmallScreenWidth && (
+                        <View style={styles.offlineIndicatorRow}>{hideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>
+                    )}
                 </View>
             )}
-            {!hideComposer && (shouldShowComposeInput || !isSmallScreenWidth) && (
-                <View style={[getChatFooterStyles(), isComposerFullSize && styles.chatFooterFullCompose]}>
+            {!hideComposer && (props.shouldShowComposeInput || !props.isSmallScreenWidth) && (
+                <View style={[getChatFooterStyles, props.isComposerFullSize && styles.chatFooterFullCompose]}>
                     <SwipeableView onSwipeDown={Keyboard.dismiss}>
                         {Session.isAnonymousUser() ? (
-                            <AnonymousReportFooter report={report} />
+                            <AnonymousReportFooter report={props.report} />
                         ) : (
                             <ReportActionCompose
-                                onSubmit={onSubmitComment}
-                                reportID={report.reportID.toString()}
-                                reportActions={reportActions}
-                                report={report}
-                                pendingAction={pendingAction}
-                                isComposerFullSize={isComposerFullSize}
-                                disabled={shouldDisableCompose}
+                                onSubmit={props.onSubmitComment}
+                                reportID={props.report.reportID.toString()}
+                                reportActions={props.reportActions}
+                                report={props.report}
+                                pendingAction={props.pendingAction}
+                                isComposerFullSize={props.isComposerFullSize}
+                                disabled={props.shouldDisableCompose}
                             />
                         )}
                     </SwipeableView>
@@ -102,7 +104,7 @@ const ReportFooter = ({report, reportActions, isOffline, onSubmitComment, errors
             )}
         </>
     );
-};
+}
 
 ReportFooter.displayName = 'ReportFooter';
 ReportFooter.propTypes = propTypes;

From 5c42a463056ba013f0fa054949f89282911b0b95 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 6 Jun 2023 23:00:29 +0530
Subject: [PATCH 3/5] remove useMemo

---
 src/pages/home/report/ReportFooter.js | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 08d0335afa10..77155c5ffcd9 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -58,20 +58,11 @@ const defaultProps = {
 };
 
 function ReportFooter(props) {
-    /**
-     * @returns {Object}
-     */
-    const getChatFooterStyles = useMemo(
-        () => ({
-            ...styles.chatFooter,
-            minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0,
-        }),
-        [props.isOffline],
-    );
+    const getChatFooterStyles = () => ({...styles.chatFooter, minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0});
 
-    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(props.report), [props.report]);
-    const isAllowedToComment = useMemo(() => ReportUtils.isAllowedToComment(props.report), [props.report]);
-    const hideComposer = useMemo(() => isArchivedRoom || !_.isEmpty(props.errors) || !isAllowedToComment, [isArchivedRoom, props.errors, isAllowedToComment]);
+    const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
+    const isAllowedToComment = ReportUtils.isAllowedToComment(props.report);
+    const hideComposer = isArchivedRoom || !_.isEmpty(props.errors) || !isAllowedToComment;
 
     return (
         <>

From 2dca634a3964ba0a6265b8017b6514b0c59fa717 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 6 Jun 2023 23:04:43 +0530
Subject: [PATCH 4/5] remove un-used import

---
 src/pages/home/report/ReportFooter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 77155c5ffcd9..767c3d85012d 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';

From 4a7b24f8b3bdf1f7cdc4a3247aef1814a9c5819a Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Wed, 7 Jun 2023 00:59:39 +0530
Subject: [PATCH 5/5] remove chatFooterStyles function

---
 src/pages/home/report/ReportFooter.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 767c3d85012d..92838ecf9451 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -58,8 +58,7 @@ const defaultProps = {
 };
 
 function ReportFooter(props) {
-    const getChatFooterStyles = () => ({...styles.chatFooter, minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0});
-
+    const chatFooterStyles = {...styles.chatFooter, minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
     const isAllowedToComment = ReportUtils.isAllowedToComment(props.report);
     const hideComposer = isArchivedRoom || !_.isEmpty(props.errors) || !isAllowedToComment;
@@ -75,7 +74,7 @@ function ReportFooter(props) {
                 </View>
             )}
             {!hideComposer && (props.shouldShowComposeInput || !props.isSmallScreenWidth) && (
-                <View style={[getChatFooterStyles, props.isComposerFullSize && styles.chatFooterFullCompose]}>
+                <View style={[chatFooterStyles, props.isComposerFullSize && styles.chatFooterFullCompose]}>
                     <SwipeableView onSwipeDown={Keyboard.dismiss}>
                         {Session.isAnonymousUser() ? (
                             <AnonymousReportFooter report={props.report} />