Use eslint --fix and prettier to update all function components to us…

…e the function keyword
kosmydel · Jun 13, 2023 · b8aeec0 · b8aeec0
1 parent f371f02
commit b8aeec0
Show file tree

Hide file tree

Showing 299 changed files with 2,476 additions and 2,205 deletions.
diff --git a/__mocks__/react-native-safe-area-context.js b/__mocks__/react-native-safe-area-context.js
@@ -9,15 +9,17 @@ const insets = {
 };
 
 function withSafeAreaInsets(WrappedComponent) {
-    const WithSafeAreaInsets = (props) => (
-        <WrappedComponent
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            // eslint-disable-next-line react/prop-types
-            ref={props.forwardedRef}
-            insets={insets}
-        />
-    );
+    function WithSafeAreaInsets(props) {
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                // eslint-disable-next-line react/prop-types
+                ref={props.forwardedRef}
+                insets={insets}
+            />
+        );
+    }
     return forwardRef((props, ref) => (
         <WithSafeAreaInsets
             // eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/src/App.js b/src/App.js
@@ -33,29 +33,31 @@ LogBox.ignoreLogs([
 
 const fill = {flex: 1};
 
-const App = () => (
-    <GestureHandlerRootView style={fill}>
-        <ComposeProviders
-            components={[
-                OnyxProvider,
-                SafeAreaProvider,
-                PortalProvider,
-                SafeArea,
-                LocaleContextProvider,
-                HTMLEngineProvider,
-                WindowDimensionsProvider,
-                KeyboardStateProvider,
-                CurrentReportIdContextProvider,
-                PickerStateProvider,
-            ]}
-        >
-            <CustomStatusBar />
-            <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                <Expensify />
-            </ErrorBoundary>
-        </ComposeProviders>
-    </GestureHandlerRootView>
-);
+function App() {
+    return (
+        <GestureHandlerRootView style={fill}>
+            <ComposeProviders
+                components={[
+                    OnyxProvider,
+                    SafeAreaProvider,
+                    PortalProvider,
+                    SafeArea,
+                    LocaleContextProvider,
+                    HTMLEngineProvider,
+                    WindowDimensionsProvider,
+                    KeyboardStateProvider,
+                    CurrentReportIdContextProvider,
+                    PickerStateProvider,
+                ]}
+            >
+                <CustomStatusBar />
+                <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
+                    <Expensify />
+                </ErrorBoundary>
+            </ComposeProviders>
+        </GestureHandlerRootView>
+    );
+}
 
 App.displayName = 'App';
 

diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
@@ -43,41 +43,43 @@ const defaultProps = {
     betas: [],
 };
 
-const AddPaymentMethodMenu = (props) => (
-    <PopoverMenu
-        isVisible={props.isVisible}
-        onClose={props.onClose}
-        anchorPosition={props.anchorPosition}
-        onItemSelected={props.onClose}
-        menuItems={[
-            {
-                text: props.translate('common.bankAccount'),
-                icon: Expensicons.Bank,
-                onSelected: () => {
-                    props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+function AddPaymentMethodMenu(props) {
+    return (
+        <PopoverMenu
+            isVisible={props.isVisible}
+            onClose={props.onClose}
+            anchorPosition={props.anchorPosition}
+            onItemSelected={props.onClose}
+            menuItems={[
+                {
+                    text: props.translate('common.bankAccount'),
+                    icon: Expensicons.Bank,
+                    onSelected: () => {
+                        props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+                    },
                 },
-            },
-            ...(Permissions.canUseWallet(props.betas)
-                ? [
-                      {
-                          text: props.translate('common.debitCard'),
-                          icon: Expensicons.CreditCard,
-                          onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
-                      },
-                  ]
-                : []),
-            ...(props.shouldShowPaypal && !props.payPalMeData.description
-                ? [
-                      {
-                          text: props.translate('common.payPalMe'),
-                          icon: Expensicons.PayPal,
-                          onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
-                      },
-                  ]
-                : []),
-        ]}
-    />
-);
+                ...(Permissions.canUseWallet(props.betas)
+                    ? [
+                          {
+                              text: props.translate('common.debitCard'),
+                              icon: Expensicons.CreditCard,
+                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+                          },
+                      ]
+                    : []),
+                ...(props.shouldShowPaypal && !props.payPalMeData.description
+                    ? [
+                          {
+                              text: props.translate('common.payPalMe'),
+                              icon: Expensicons.PayPal,
+                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
+                          },
+                      ]
+                    : []),
+            ]}
+        />
+    );
+}
 
 AddPaymentMethodMenu.propTypes = propTypes;
 AddPaymentMethodMenu.defaultProps = defaultProps;

diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
@@ -91,7 +91,7 @@ const defaultProps = {
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
 // Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
 // Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
-const AddressSearch = (props) => {
+function AddressSearch(props) {
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const containerRef = useRef();
     const query = useMemo(
@@ -291,7 +291,7 @@ const AddressSearch = (props) => {
             </View>
         </ScrollView>
     );
-};
+}
 
 AddressSearch.propTypes = propTypes;
 AddressSearch.defaultProps = defaultProps;

diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -34,7 +34,7 @@ const defaultProps = {
     ...anchorForAttachmentsOnlyDefaultProps,
 };
 
-const BaseAnchorForAttachmentsOnly = (props) => {
+function BaseAnchorForAttachmentsOnly(props) {
     const sourceURL = props.source;
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL);
     const sourceID = (sourceURL.match(CONST.REGEX.ATTACHMENT_ID) || [])[1];
@@ -70,7 +70,7 @@ const BaseAnchorForAttachmentsOnly = (props) => {
             )}
         </ShowContextMenuContext.Consumer>
     );
-};
+}
 
 BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly';
 BaseAnchorForAttachmentsOnly.propTypes = propTypes;

diff --git a/src/components/AnchorForAttachmentsOnly/index.js b/src/components/AnchorForAttachmentsOnly/index.js
@@ -4,14 +4,16 @@ import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
 
-const AnchorForAttachmentsOnly = (props) => (
-    <BaseAnchorForAttachmentsOnly
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-        onPressOut={() => ControlSelection.unblock()}
-    />
-);
+function AnchorForAttachmentsOnly(props) {
+    return (
+        <BaseAnchorForAttachmentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+        />
+    );
+}
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;

diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -3,13 +3,15 @@ import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPr
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 import styles from '../../styles/styles';
 
-const AnchorForAttachmentsOnly = (props) => (
-    <BaseAnchorForAttachmentsOnly
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        style={styles.mw100}
-    />
-);
+function AnchorForAttachmentsOnly(props) {
+    return (
+        <BaseAnchorForAttachmentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            style={styles.mw100}
+        />
+    );
+}
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -38,7 +38,7 @@ const defaultProps = {
 /*
  * This is a default anchor component for regular links.
  */
-const BaseAnchorForCommentsOnly = (props) => {
+function BaseAnchorForCommentsOnly(props) {
     let linkRef;
     const rest = _.omit(props, _.keys(propTypes));
     const linkProps = {};
@@ -85,7 +85,7 @@ const BaseAnchorForCommentsOnly = (props) => {
             </Tooltip>
         </PressableWithSecondaryInteraction>
     );
-};
+}
 
 BaseAnchorForCommentsOnly.propTypes = propTypes;
 BaseAnchorForCommentsOnly.defaultProps = defaultProps;

diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
@@ -6,16 +6,18 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
 import styles from '../../styles/styles';
 
-const AnchorForCommentsOnly = (props) => (
-    <View style={styles.dInline}>
-        <BaseAnchorForCommentsOnly
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={() => ControlSelection.unblock()}
-        />
-    </View>
-);
+function AnchorForCommentsOnly(props) {
+    return (
+        <View style={styles.dInline}>
+            <BaseAnchorForCommentsOnly
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+            />
+        </View>
+    );
+}
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
 AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;

diff --git a/src/components/AnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js
@@ -6,7 +6,7 @@ import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropType
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const AnchorForCommentsOnly = (props) => {
+function AnchorForCommentsOnly(props) {
     const onPress = () => (_.isFunction(props.onPress) ? props.onPress() : Linking.openURL(props.href));
 
     return (
@@ -16,7 +16,7 @@ const AnchorForCommentsOnly = (props) => {
             onPress={onPress}
         />
     );
-};
+}
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
 AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;

diff --git a/src/components/AnimatedStep.js b/src/components/AnimatedStep.js
@@ -21,7 +21,7 @@ const defaultProps = {
     style: [],
 };
 
-const AnimatedStep = (props) => {
+function AnimatedStep(props) {
     function getAnimationStyle(direction) {
         let animationStyle;
 
@@ -43,7 +43,7 @@ const AnimatedStep = (props) => {
             {props.children}
         </Animatable.View>
     );
-};
+}
 
 AnimatedStep.propTypes = propTypes;
 AnimatedStep.defaultProps = defaultProps;

diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
@@ -23,33 +23,35 @@ const defaultProps = {
     report: {},
 };
 
-const AnonymousReportFooter = (props) => (
-    <View style={styles.anonymousRoomFooter}>
-        <View style={[styles.flexRow]}>
-            <AvatarWithDisplayName
-                report={props.report}
-                size={CONST.AVATAR_SIZE.MEDIUM}
-                isAnonymous
-            />
-        </View>
-        <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <View style={styles.mr4}>
-                <View style={[props.isSmallScreenWidth ? styles.alignItemsStart : styles.alignItemsEnd]}>
-                    <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
-                </View>
-                <Text style={[styles.textNormal, styles.textWhite]}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
-            </View>
-            <View style={styles.anonymousRoomFooterSignInButton}>
-                <Button
-                    medium
-                    success
-                    text={props.translate('common.signIn')}
-                    onPress={() => Session.signOutAndRedirectToSignIn()}
+function AnonymousReportFooter(props) {
+    return (
+        <View style={styles.anonymousRoomFooter}>
+            <View style={[styles.flexRow]}>
+                <AvatarWithDisplayName
+                    report={props.report}
+                    size={CONST.AVATAR_SIZE.MEDIUM}
+                    isAnonymous
                 />
             </View>
+            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                <View style={styles.mr4}>
+                    <View style={[props.isSmallScreenWidth ? styles.alignItemsStart : styles.alignItemsEnd]}>
+                        <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
+                    </View>
+                    <Text style={[styles.textNormal, styles.textWhite]}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                </View>
+                <View style={styles.anonymousRoomFooterSignInButton}>
+                    <Button
+                        medium
+                        success
+                        text={props.translate('common.signIn')}
+                        onPress={() => Session.signOutAndRedirectToSignIn()}
+                    />
+                </View>
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 AnonymousReportFooter.propTypes = propTypes;
 AnonymousReportFooter.defaultProps = defaultProps;