From 90d68384cf3b537efe6cd99e5cf0af09186b1bf1 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 27 Nov 2023 16:31:40 +0100
Subject: [PATCH] [TS migration] Migrate 'AnonymousReportFooter.js' component

---
 ...ortFooter.js => AnonymousReportFooter.tsx} | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)
 rename src/components/{AnonymousReportFooter.js => AnonymousReportFooter.tsx} (51%)

diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.tsx
similarity index 51%
rename from src/components/AnonymousReportFooter.js
rename to src/components/AnonymousReportFooter.tsx
index 387e2ab01930..65dc813a829d 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.tsx
@@ -1,57 +1,52 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
-import reportPropTypes from '@pages/reportPropTypes';
+import {OnyxCollection} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
+import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
-import participantPropTypes from './participantPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type AnonymousReportFooterProps = {
     /** The report currently being looked at */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
-    isSmallSizeLayout: PropTypes.bool,
+    /** Whether the small screen size layout should be used */
+    isSmallSizeLayout?: boolean;
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    report: {},
-    isSmallSizeLayout: false,
-    personalDetails: {},
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
-function AnonymousReportFooter(props) {
+function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
-        <View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
+        <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
-                    report={props.report}
-                    personalDetails={props.personalDetails}
+                    report={report}
+                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
                 />
             </View>
-            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(props.isSmallSizeLayout)}>
-                <View style={[props.isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
-                    <View style={[props.isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
+            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
+                <View style={[isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
+                    <View style={[isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
                         <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
                     </View>
-                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{translate('anonymousReportFooter.logoTagline')}</Text>
                 </View>
                 <View style={[styles.anonymousRoomFooterSignInButton]}>
                     <Button
                         medium
                         success
-                        text={props.translate('common.signIn')}
+                        text={translate('common.signIn')}
                         onPress={() => Session.signOutAndRedirectToSignIn()}
                     />
                 </View>
@@ -60,8 +55,6 @@ function AnonymousReportFooter(props) {
     );
 }
 
-AnonymousReportFooter.propTypes = propTypes;
-AnonymousReportFooter.defaultProps = defaultProps;
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default withLocalize(AnonymousReportFooter);
+export default AnonymousReportFooter;