diff --git a/src/layouts/HeaderLayout/index.tsx b/src/layouts/HeaderLayout/index.tsx index 93ee16d..79b2a9a 100644 --- a/src/layouts/HeaderLayout/index.tsx +++ b/src/layouts/HeaderLayout/index.tsx @@ -93,7 +93,7 @@ export default function HeaderLayout({ ); case 'search': return ( - navigation.goBack()}> + null}> + { + // Function declaration. + function booleanToString(value : boolean) : string { + if (value === true) return 'Sim'; + return 'Não'; + } - function determinePageBehavior() : void { function describeAnimalAdoptionRequirements( adoptionRequirements : AnimalTypes.AdoptionRequirements, ) : string { @@ -167,6 +173,7 @@ export default function AnimalDetails() : JSX.Element { ); } + // Callback implementation. animalAPI.getAnimal(animalUID) .then(async (animal) => { const animalData = animal.data(); @@ -231,7 +238,6 @@ export default function AnimalDetails() : JSX.Element { asyncAction={false} callback={async () => { navigation.navigate('Interested', { animalUID }); - // console.log((await adoptionAPI.getInterestedIn(animal.ref))); }} > Ver interessados @@ -375,8 +381,9 @@ export default function AnimalDetails() : JSX.Element { } }) .catch(() => errorAlert()); - } + }, [animalUID, navigation]); + // Function declaration. function displayAnimalImage( { item } : CarouselTypes.CarouselRenderItem, ) : JSX.Element { @@ -384,7 +391,7 @@ export default function AnimalDetails() : JSX.Element { } // Page effects. - useLayoutEffect(determinePageBehavior, [animalUID, navigation]); + useFocusEffect(determinePageBehavior); // JSX returned. return ( diff --git a/src/pages/Animal/Feed/index.tsx b/src/pages/Animal/Feed/index.tsx index 66f7f63..ecdb08f 100644 --- a/src/pages/Animal/Feed/index.tsx +++ b/src/pages/Animal/Feed/index.tsx @@ -1,9 +1,9 @@ -import React, { useLayoutEffect } from 'react'; +import React, { useCallback } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import { useNavigation } from '@react-navigation/native'; +import { useFocusEffect, useNavigation } from '@react-navigation/native'; import HeaderLayout from '../../../layouts/HeaderLayout'; @@ -36,9 +36,11 @@ import { filterPaginated } from '../../../services/paginated/api'; const FeedPets = (): JSX.Element => { const navigation = useNavigation(); - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, false); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, true); + }, []), + ); const animalKey = (animalItem: Animal): string => animalItem.id; diff --git a/src/pages/Animal/Interested/index.tsx b/src/pages/Animal/Interested/index.tsx index 0efbf28..5e08516 100644 --- a/src/pages/Animal/Interested/index.tsx +++ b/src/pages/Animal/Interested/index.tsx @@ -1,11 +1,14 @@ -import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'; +import React, { useCallback, useEffect, useState } from 'react'; +import { + RouteProp, + useFocusEffect, + useNavigation, + useRoute, +} from '@react-navigation/native'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import { ActivityIndicator, Text, Image, TouchableOpacity, Alert, } from 'react-native'; -import React, { - useCallback, useEffect, useLayoutEffect, useState, -} from 'react'; import { fromUnixTime, differenceInYears } from 'date-fns'; import InfiniteScroll from '../../../components/InfiniteScroll'; import { Theme } from '../../../constants'; @@ -105,9 +108,11 @@ const Interested = (): JSX.Element => { }); }, [fetchAnimal]); - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, false); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, true); + }, []), + ); return ( loading @@ -172,8 +177,11 @@ const Interested = (): JSX.Element => { if (animal) { adoptionAPI.transferAnimalTo(animal, interestedUser.ref); navigation.reset({ - index: 0, - routes: [{ name: 'Home' }], + index: 1, + routes: [ + { name: 'Home' }, + { name: 'MyPets' }, + ], }); Alert.alert('Transferência realizada com sucesso!'); } diff --git a/src/pages/Animal/MyPets/index.tsx b/src/pages/Animal/MyPets/index.tsx index 5879780..c788809 100644 --- a/src/pages/Animal/MyPets/index.tsx +++ b/src/pages/Animal/MyPets/index.tsx @@ -1,9 +1,9 @@ -import React, { useLayoutEffect } from 'react'; +import React, { useCallback } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; -import { useNavigation } from '@react-navigation/native'; +import { useFocusEffect, useNavigation } from '@react-navigation/native'; import { FirebaseFirestoreTypes } from '@react-native-firebase/firestore'; @@ -31,9 +31,11 @@ const MyPets = (): JSX.Element => { const user = userAPI.currentUserDocument(); const navigation = useNavigation(); - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, false); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, true); + }, []), + ); const animalKey = (animalItem: Animal): string => animalItem.id; @@ -115,10 +117,11 @@ const MyPets = (): JSX.Element => { }} leftAction={{ hidden: false, - actionType: 'back', + actionType: 'drawer', }} rightAction={{ - hidden: true, + hidden: false, + actionType: 'search', }} > diff --git a/src/pages/Animal/Registration/index.tsx b/src/pages/Animal/Registration/index.tsx index bba2549..0aed8a5 100644 --- a/src/pages/Animal/Registration/index.tsx +++ b/src/pages/Animal/Registration/index.tsx @@ -1,11 +1,15 @@ // Package imports. -import React, { useLayoutEffect, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import { v4 as uuidv4 } from 'uuid'; import RadioForm from 'react-native-simple-radio-button'; import CheckBox from '@react-native-community/checkbox'; -import { StackActions, useNavigation } from '@react-navigation/native'; +import { + StackActions, + useFocusEffect, + useNavigation, +} from '@react-navigation/native'; import { Formik } from 'formik'; import * as Yup from 'yup'; @@ -61,10 +65,12 @@ export default function AnimalRegistration() : JSX.Element { message: '', }); - // Layout effects. - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, true); - }, [navigation]); + // Page effects. + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, true); + }, []), + ); // Styled components. const { diff --git a/src/pages/Animal/Success/index.tsx b/src/pages/Animal/Success/index.tsx index ddc3291..b95dac0 100644 --- a/src/pages/Animal/Success/index.tsx +++ b/src/pages/Animal/Success/index.tsx @@ -1,6 +1,6 @@ -import React, { useLayoutEffect } from 'react'; +import React, { useCallback } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; -import { useNavigation } from '@react-navigation/native'; +import { useFocusEffect, useNavigation } from '@react-navigation/native'; import AsyncButton from '../../../components/AsyncButton'; import { Container, Title, Message, ButtonContainer, ButtonText, styles, @@ -11,9 +11,11 @@ import { Theme } from '../../../constants'; export default function AnimalRegistrationSuccess() : JSX.Element { const navigation = useNavigation(); - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, false); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarSecondaryDark, true); + }, []), + ); return ( { - setStatusBarBackgroundColor('transparent', true); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor('transparent', true); + }, []), + ); const { Center, Container, Title, Message, ButtonText, LoginText, LogoContainer, diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 7417180..ffa7a99 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -1,8 +1,12 @@ // Package imports. -import React, { useLayoutEffect, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; -import { StackActions, useNavigation } from '@react-navigation/native'; +import { + StackActions, + useFocusEffect, + useNavigation, +} from '@react-navigation/native'; import * as Yup from 'yup'; import { Formik } from 'formik'; @@ -49,10 +53,12 @@ export default function Login() : JSX.Element { message: '', }); - // Layout effects. - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarPrimary, true); - }, [navigation]); + // Page effects. + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimary, true); + }, []), + ); const signIn = async ({ email, password }: LoginForm): Promise => { try { diff --git a/src/pages/NotificationsList/index.tsx b/src/pages/NotificationsList/index.tsx index 40c8fd6..8c6c5bd 100644 --- a/src/pages/NotificationsList/index.tsx +++ b/src/pages/NotificationsList/index.tsx @@ -1,8 +1,8 @@ // Package imports. -import React, { useEffect, useLayoutEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import { Text, View } from 'react-native'; -import { useNavigation } from '@react-navigation/native'; +import { useFocusEffect, useNavigation } from '@react-navigation/native'; import { TouchableOpacity } from 'react-native-gesture-handler'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import { Theme } from '../../constants'; @@ -21,7 +21,6 @@ import notificationAPI, { NotificationType, NotificationModels } from '../../ser export default function NotificationsList() : JSX.Element { // Variables. const navigation = useNavigation(); - // eslint-disable-next-line @typescript-eslint/no-explicit-any const [fetchedNotifications, setFetchedNotifications] = useState([]); const [fetchedOnce, setFetchedOnce] = useState(false); @@ -35,12 +34,14 @@ export default function NotificationsList() : JSX.Element { }); }; + // Page effects. useEffect(() => fetchNotifications(), []); - // Page effects. - useLayoutEffect(() => { - setStatusBarBackgroundColor('transparent', true); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, true); + }, []), + ); const notificationRenderer = (notification: (NotificationModels)): JSX.Element => { switch (notification.type) { diff --git a/src/pages/Registration/index.tsx b/src/pages/Registration/index.tsx index 1f77257..653fd9b 100644 --- a/src/pages/Registration/index.tsx +++ b/src/pages/Registration/index.tsx @@ -1,5 +1,5 @@ // Package imports. -import React, { useLayoutEffect, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import { Formik } from 'formik'; import { TouchableOpacity, View } from 'react-native'; @@ -12,7 +12,11 @@ import * as Yup from 'yup'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import DateTimePicker from '@react-native-community/datetimepicker'; -import { StackActions, useNavigation } from '@react-navigation/native'; +import { + StackActions, + useFocusEffect, + useNavigation, +} from '@react-navigation/native'; // Service imports. import userAPI from '../../services/user/api'; @@ -94,10 +98,12 @@ export default function Registration() : JSX.Element { passwordConfirmation: '', }; - // Layout effects. - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarPrimary, true); - }, [navigation]); + // Page effects. + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimary, true); + }, []), + ); // Functions declaration. function dateToBrazilianString(date : Date) : string { diff --git a/src/pages/Unauthorized/index.tsx b/src/pages/Unauthorized/index.tsx index 21ea481..6ad2016 100644 --- a/src/pages/Unauthorized/index.tsx +++ b/src/pages/Unauthorized/index.tsx @@ -1,6 +1,6 @@ -import React, { useLayoutEffect } from 'react'; +import React, { useCallback } from 'react'; -import { useNavigation } from '@react-navigation/native'; +import { useFocusEffect, useNavigation } from '@react-navigation/native'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; import AsyncButton from '../../components/AsyncButton'; @@ -16,9 +16,11 @@ export default function Unauthorized(): JSX.Element { ButtonText, Container, Title, Message, } = styledComponents; - useLayoutEffect(() => { - setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, true); - }, [navigation]); + useFocusEffect( + useCallback(() => { + setStatusBarBackgroundColor(Theme.elements.statusBarPrimaryDark, true); + }, []), + ); return (