Merge pull request #104 from Hugo-NF/041_status_bar_refactor

Status bar refactoring and other minor changes
Hugo-NF · May 14, 2021 · 4fe17e8 · 4fe17e8
2 parents af3c29b + 920aaab
commit 4fe17e8
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 74 deletions.
diff --git a/src/layouts/HeaderLayout/index.tsx b/src/layouts/HeaderLayout/index.tsx
@@ -93,7 +93,7 @@ export default function HeaderLayout({
         );
       case 'search':
         return (
-          <ActionButton onPress={() => navigation.goBack()}>
+          <ActionButton>
             <Ionicons
               name="search"
               size={24}
@@ -103,7 +103,7 @@ export default function HeaderLayout({
         );
       case 'options':
         return (
-          <ActionButton onPress={() => null}>
+          <ActionButton>
             <MaterialCommunityIcons
               name="dots-vertical"
               size={24}

diff --git a/src/pages/Animal/Details/index.tsx b/src/pages/Animal/Details/index.tsx
@@ -1,13 +1,18 @@
 // Package imports.
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { setStatusBarBackgroundColor } from 'expo-status-bar';
 import Lodash from 'lodash';
 import {
   ActivityIndicator, Alert, Dimensions, ImageSourcePropType, ViewProps,
 } from 'react-native';
 import Carousel, { Pagination } from 'react-native-snap-carousel';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 
 // Service imports.
 import adoptionAPI from '../../../services/adoption/api';
@@ -95,13 +100,14 @@ export default function AnimalDetails() : JSX.Element {
     TitleText,
   } = styledComponents;
 
-  // Function declaration.
-  function booleanToString(value : boolean) : string {
-    if (value === true) return 'Sim';
-    return 'Não';
-  }
+  // Callback declaration.
+  const determinePageBehavior = useCallback(() : void => {
+    // 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)));
                         }}
                       >
                         <ButtonText>Ver interessados</ButtonText>
@@ -375,16 +381,17 @@ export default function AnimalDetails() : JSX.Element {
         }
       })
       .catch(() => errorAlert());
-  }
+  }, [animalUID, navigation]);
 
+  // Function declaration.
   function displayAnimalImage(
     { item } : CarouselTypes.CarouselRenderItem,
   ) : JSX.Element {
     return (<AnimalImage source={item} />);
   }
 
   // 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
@@ -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
@@ -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
@@ -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',
       }}
     >
       <Container>

diff --git 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
@@ -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 (
     <HeaderLayout

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/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 HeaderLayout from '../../layouts/HeaderLayout';
@@ -12,9 +12,11 @@ import { Images, Theme } from '../../constants';
 export default function Home() : JSX.Element {
   const navigation = useNavigation();
 
-  useLayoutEffect(() => {
-    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
@@ -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<void> => {
     try {

diff --git 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<NotificationModels[]>([]);
   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) {