Update mobile eslint preset

mobile/.eslintrc.json

@@ -55,6 +55,12 @@
     ],
     "react/prop-types": "off",
     "react-hooks/exhaustive-deps": "warn",
+    "react/function-component-definition": [
+      "warn",
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
     "no-console": "off",
     "curly": "error",
     "@typescript-eslint/no-explicit-any": "off",

mobile/App.tsx

@@ -25,7 +25,7 @@ SplashScreen.preventAutoHideAsync()
   .then((result) => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
   .catch(console.warn) // it's good to explicitly catch and inspect any error
 
-function App() {
+const App = () => {
   const [appIsReady, setAppIsReady] = useState(false)
   const responseListener = useRef<Notifications.Subscription>()
   const navigationRef = useRef<NavigationContainerRef<StackParams>>(null)

mobile/components/Accordion.tsx

@@ -15,11 +15,11 @@ interface AccordionProps {
   children?: React.ReactNode
 }
 
-function Accordion({
+const Accordion = ({
   style,
   title,
   children
-}: AccordionProps) {
+}: AccordionProps) => {
   const [open, setOpen] = useState(false)
   const animatedController = useRef(new Animated.Value(0)).current
 

mobile/components/AgencyFilter.tsx

@@ -18,12 +18,12 @@ interface AgencyFilterProps {
   onChange?: (checkedAgencies: string[]) => void
 }
 
-function AgencyFilter({
+const AgencyFilter = ({
   visible,
   style,
   onLoad,
   onChange
-}: AgencyFilterProps) {
+}: AgencyFilterProps) => {
   const [agencies, setAgencies] = useState<movininTypes.User[]>([])
   const [checkedAgencies, setCheckedAgencies] = useState<string[]>([])
   const [allChecked, setAllChecked] = useState(true)

mobile/components/AutocompleteDropdown/HOC/withFadeAnimation.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import { Animated, Easing } from 'react-native'
 
 export const withFadeAnimation = (WrappedComponent: () => React.JSX.Element, containerStyle?: object) => {
-  function FadeAnimation(props: object) {
+  const FadeAnimation = (props: object) => {
     const opacityAnimationValue = useRef(new Animated.Value(0)).current
 
     useEffect(() => {

mobile/components/AutocompleteDropdown/NothingFound.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { withFadeAnimation } from './HOC/withFadeAnimation'
 
-function EmptyResult({ ...props }) {
+const EmptyResult = ({ ...props }) => {
   const EL = withFadeAnimation(
     () => (
       <View style={{ ...styles.container }}>

mobile/components/AutocompleteDropdown/RightButton.tsx

@@ -12,7 +12,7 @@ import Feather from 'react-native-vector-icons/Feather'
 
 Feather.loadFont()
 
-function RightButtonComponent({
+const RightButtonComponent = ({
   inputHeight,
   isOpened,
   showChevron,
@@ -34,7 +34,7 @@ function RightButtonComponent({
   ClearIconComponent?: boolean
   onClearPress: () => void
   onChevronPress: () => void
-}) {
+}) => {
   const isOpenedAnimationValue = useRef(new Animated.Value(0)).current
 
   useEffect(() => {

mobile/components/AutocompleteDropdown/ScrollViewListItem.tsx

@@ -6,7 +6,7 @@ import {
   View
 } from 'react-native'
 
-function ScrollViewListItemComponent({
+const ScrollViewListItemComponent = ({
   titleHighlighted,
   titleStart,
   titleEnd,
@@ -21,8 +21,7 @@ function ScrollViewListItemComponent({
     style?: object
     numberOfLines?: number
     onPress: () => void
-  }) {
-  return (
+  }) => (
     <Pressable onPress={onPress}>
       <View style={styles.container}>
         <Text numberOfLines={numberOfLines}>
@@ -39,7 +38,6 @@ function ScrollViewListItemComponent({
       </View>
     </Pressable>
   )
-}
 
 export const ScrollViewListItem = memo(ScrollViewListItemComponent)
 

mobile/components/Backdrop.tsx

@@ -5,13 +5,11 @@ interface BackdropProps {
   message?: string
 }
 
-function Backdrop({ message }: BackdropProps) {
-  return (
+const Backdrop = ({ message }: BackdropProps) => (
     <View style={styles.container}>
       {message && <Text style={styles.text}>{message}</Text>}
     </View>
   )
-}
 
 const styles = StyleSheet.create({
   container: {

mobile/components/Booking.tsx

@@ -29,12 +29,12 @@ const iconColor = '#000'
 const extraIconColor = '#1f9201'
 const extraIconSize = 16
 
-function Booking({
+const Booking = ({
   booking,
   locale,
   fr,
   onCancel
-}: BookingProps) {
+}: BookingProps) => {
   const from = new Date(booking.from)
   const to = new Date(booking.to)
   const property = booking.property as movininTypes.Property

mobile/components/BookingFilter.tsx

@@ -16,12 +16,12 @@ interface BookingFilterProps {
   onSubmit: (filter: movininTypes.Filter) => void
 }
 
-function BookingFilter({
+const BookingFilter = ({
   visible,
   style,
   language,
   onSubmit
-}: BookingFilterProps) {
+}: BookingFilterProps) => {
   const [init, setInit] = useState(false)
   const [from, setFrom] = useState<Date | undefined>(undefined)
   const [to, setTo] = useState<Date | undefined>(undefined)

mobile/components/BookingList.tsx

@@ -30,15 +30,15 @@ interface BookingListProps {
   header?: React.ReactElement
 }
 
-function BookingList({
+const BookingList = ({
   agencies,
   statuses,
   filter,
   user,
   booking: bookingId,
   language,
   header
-}: BookingListProps) {
+}: BookingListProps) => {
   const [firstLoad, setFirstLoad] = useState(true)
   const [onScrollEnd, setOnScrollEnd] = useState(false)
   const [loading, setLoading] = useState(true)

mobile/components/BookingStatus.tsx

@@ -9,11 +9,10 @@ interface BookingStatusProps {
   status: movininTypes.BookingStatus
 }
 
-function BookingStatus({
+const BookingStatus = ({
   style,
   status
-}: BookingStatusProps) {
-  return (
+}: BookingStatusProps) => (
     <View
       style={{
         ...styles.container,
@@ -37,7 +36,6 @@ function BookingStatus({
       <Text style={styles.text}>{Helper.getBookingStatus(status)}</Text>
     </View>
   )
-}
 
 const styles = StyleSheet.create({
   container: {

mobile/components/Button.tsx

@@ -9,13 +9,13 @@ interface ButtonProps {
   onPress?: () => void
 }
 
-function Button({
+const Button = ({
   size,
   color,
   style,
   label,
   onPress: onButtonPress
-}: ButtonProps) {
+}: ButtonProps) => {
   const small = size === 'small'
 
   const onPress = () => {

mobile/components/Checkbox.tsx

@@ -8,12 +8,11 @@ interface CheckboxProps {
   onChange?: (_checked: boolean) => void
 }
 
-function Checkbox({
+const Checkbox = ({
   indeterminate,
   checked,
   onChange
-}: CheckboxProps) {
-  return (
+}: CheckboxProps) => (
     <Pressable
       onPress={() => {
         if (onChange) {
@@ -26,7 +25,6 @@ function Checkbox({
       <MaterialIcons name={indeterminate ? 'indeterminate-check-box' : checked ? 'check-box' : 'check-box-outline-blank'} size={24} color={indeterminate || checked ? '#1976d2' : '#606264'} />
     </Pressable>
   )
-}
 
 const styles = StyleSheet.create({
   checkbox: {

mobile/components/DateTimePicker.tsx

@@ -31,7 +31,7 @@ interface DateTimePickerProps {
   onChange?: (date: Date | undefined) => void
 }
 
-function DateTimePicker({
+const DateTimePicker = ({
   value: dateTimeValue,
   locale: dateTimeLocale,
   mode,
@@ -48,7 +48,7 @@ function DateTimePicker({
   hidePickerMessage,
   onPress,
   onChange
-}: DateTimePickerProps) {
+}: DateTimePickerProps) => {
   const [label, setLabel] = useState('')
   const [value, setValue] = useState<Date | undefined>(dateTimeValue)
   const [show, setShow] = useState(false)

mobile/components/DrawerContent.tsx

@@ -42,7 +42,7 @@ interface DrawerContentProps {
 
 let yOffset = 0
 
-function DrawerContent({
+const DrawerContent = ({
   language: drawerLanguage,
   index,
   drawerItems,
@@ -55,7 +55,7 @@ function DrawerContent({
   labelStyle,
   itemStyle,
   props
-}: DrawerContentProps) {
+}: DrawerContentProps) => {
   const navigation = useNavigation<NativeStackNavigationProp<StackParams, keyof StackParams>>()
   const [openLanguageMenu, setopenLanguageMenu] = useState(false)
   const [language, setLanguage] = useState(drawerLanguage)

mobile/components/DrawerNavigator.tsx

@@ -24,7 +24,7 @@ import DrawerContent from './DrawerContent'
 import CheckoutScreen from '../screens/Checkout'
 import NotificationsScreen from '../screens/NotificationsScreen'
 
-function DrawerNavigator() {
+const DrawerNavigator = () => {
   const routes = useNavigationState((state) => state && state.routes)
   const index = useNavigationState((state) => state && state.index)
   const [loggedIn, setLoggedIn] = useState(false)

mobile/components/Error.tsx

@@ -6,16 +6,14 @@ interface ErrorProps {
   message: string
 }
 
-function Error({
+const Error = ({
   style,
   message
-}: ErrorProps) {
-  return (
+}: ErrorProps) => (
     <View style={style}>
       <Text style={styles.text}>{message}</Text>
     </View>
   )
-}
 
 const styles = StyleSheet.create({
   text: {

mobile/components/Header.tsx

@@ -23,14 +23,14 @@ interface HeaderProps {
   _avatar?: string | null
 }
 
-function Header({
+const Header = ({
   title,
   hideTitle,
   loggedIn,
   notificationCount,
   reload,
   _avatar
-}: HeaderProps) {
+}: HeaderProps) => {
   const navigation = useNavigation<NativeStackNavigationProp<StackParams, keyof StackParams>>()
   const [avatar, setAvatar] = useState<string | null | undefined>(null)
 

mobile/components/Link.tsx

@@ -8,12 +8,12 @@ interface LinkProps {
   onPress?: () => void
 }
 
-function Link({
+const Link = ({
   style,
   textStyle,
   label,
   onPress: onLinkPress
-}: LinkProps) {
+}: LinkProps) => {
   const onPress = () => {
     if (onLinkPress) {
       onLinkPress()

mobile/components/LocationSelectList.tsx

@@ -21,7 +21,7 @@ interface LocationSelectListProps {
   onFocus?: () => void
 }
 
-function LocationSelectList({
+const LocationSelectList = ({
   selectedItem: listSelectedItem,
   size,
   style,
@@ -33,7 +33,7 @@ function LocationSelectList({
   onFetch,
   onChangeText: listOnChangeText,
   onFocus
-}: LocationSelectListProps) {
+}: LocationSelectListProps) => {
   const [loading, setLoading] = useState(false)
   const [rows, setRows] = useState<AutocompleteOption[]>([])
   const [selectedItem, setSelectedItem] = useState<string>()

mobile/components/Master.tsx

@@ -25,7 +25,7 @@ interface MasterProps {
   onLoad: (user?: movininTypes.User) => void
 }
 
-function Master({
+const Master = ({
   navigation,
   strict,
   route,
@@ -37,7 +37,7 @@ function Master({
   avatar,
   children,
   onLoad
-}: MasterProps) {
+}: MasterProps) => {
   const [loading, setLoading] = useState(true)
   const [user, setUser] = useState<movininTypes.User | null>(null)
   const [loggedIn, setLoggedIn] = useState(false)

mobile/components/Property.tsx

@@ -31,14 +31,14 @@ const iconColor = '#000'
 const getExtraIcon = (extra: number) =>
   (extra === -1 ? 'clear' : extra === 0 ? 'check' : 'info')
 
-function Property({
+const Property = ({
   property,
   fr,
   from,
   to,
   location,
   navigation
-}: PropertyProps) {
+}: PropertyProps) => {
   const { width } = useWindowDimensions()
   const days = movininHelper.days(from, to)
   const price = Helper.price(property, from, to)