Chat list, chat API, functionalities to chat page and bug fixes

src/components/AnimalCard/styles.ts

@@ -29,7 +29,7 @@ export const CardTitle = styled.Text<TextProps>`
     text-align-vertical: center;
     font-family: Roboto_500Medium;
     font-size: 16px;
-    color: ${Theme.elements.headerText};
+    color: ${Theme.elements.textDark};
 `;
 
 export const CardOptions = styled.View<ViewProps>`

src/components/DrawerContent/index.tsx

@@ -180,7 +180,8 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
             />
             <List.Item
               title="Chat"
-              titleStyle={styles.ListItemTextDisabled}
+              onPress={() => navigateTo('ChatList')}
+              titleStyle={styles.ListItemText}
             />
           </List.Accordion>
         </List.Section>

src/components/DrawerContent/styles.ts

@@ -47,7 +47,7 @@ export const styledComponents = {
     font-family: 'Roboto_400Medium';
     font-size: 14px;
     text-transform: uppercase;
-    color: ${Theme.elements.buttonText};
+    color: ${Theme.elements.textDark};
   `,
 };
 
@@ -62,12 +62,12 @@ export const styles = {
   SectionTitle: {
     fontFamily: 'Roboto_400Medium',
     fontSize: 14,
-    color: Theme.elements.buttonText,
+    color: Theme.elements.textDark,
   },
   ListItemText: {
     fontFamily: 'Roboto_400Regular',
     fontSize: 14,
-    color: Theme.elements.buttonText,
+    color: Theme.elements.textDark,
   },
   ListItemTextDisabled: {
     fontFamily: 'Roboto_400Regular',

src/components/InfiniteScroll/index.tsx

@@ -1,8 +1,10 @@
 // Component to implement an infinite scroll for any type of content.
 
 // Package imports.
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import useIsMounted from 'ismounted';
 import { ActivityIndicator, FlatList } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 
 // Style imports.
 import { defaultProps, styledComponents } from './styles';
@@ -26,6 +28,7 @@ interface IInfiniteScroll<T> {
   formatContent: (queryResponseData : T) => JSX.Element,
   keyExtractorFunction: (item: T) => string,
   loadingContainerStyles?: Record<string, unknown>,
+  noDataFoundContainerStyles?: Record<string, unknown>,
   numColumns: number,
 }
 
@@ -47,9 +50,11 @@ const InfiniteScroll = <T, _>({
   formatContent,
   keyExtractorFunction,
   loadingContainerStyles,
+  noDataFoundContainerStyles,
   numColumns,
 }: IInfiniteScroll<T>): JSX.Element => {
   // Variable declaration.
+  const isMounted = useIsMounted();
   const [infiniteScrollState, setInfiniteScrollState] = useState<InfiniteScrollState<T>>({
     allDataFetched: false,
     data: [],
@@ -64,48 +69,50 @@ const InfiniteScroll = <T, _>({
       .then((response) => {
         const contentReceived = response;
 
-        if (contentReceived.length === 0) {
+        if (isMounted.current) {
+          if (contentReceived.length === 0) {
+            setInfiniteScrollState({
+              allDataFetched: true,
+              data: [],
+              error: null,
+              loadingMore: false,
+              page: 1,
+            });
+          } else {
+            setInfiniteScrollState({
+              allDataFetched: false,
+              data: contentReceived,
+              error: null,
+              loadingMore: false,
+              page: 2,
+            });
+          }
+        }
+      })
+      .catch((err) => {
+        if (isMounted.current) {
           setInfiniteScrollState({
             allDataFetched: true,
             data: [],
-            error: null,
+            error: err,
             loadingMore: false,
             page: 1,
           });
-        } else {
-          setInfiniteScrollState({
-            allDataFetched: false,
-            data: contentReceived,
-            error: null,
-            loadingMore: false,
-            page: 2,
-          });
         }
-      })
-      .catch((err) => {
-        setInfiniteScrollState({
-          allDataFetched: true,
-          data: [],
-          error: err,
-          loadingMore: false,
-          page: 1,
-        });
       });
-  }, [contentBatchSize, dataFetchQuery]);
+  }, [contentBatchSize, dataFetchQuery, isMounted]);
 
   // Function declarations.
-  function componentDidMount() : () => void {
-    let mounted = true;
-
-    if (mounted) fetchInitialData();
-
-    return function cleanUp() : void {
-      mounted = false;
-    };
-  }
+  const onComponentFocus = useCallback(() : void => {
+    fetchInitialData();
+  }, [fetchInitialData]);
 
   function fetchMoreData() : void {
-    if (!infiniteScrollState.loadingMore && !infiniteScrollState.allDataFetched) {
+    if (
+      !infiniteScrollState.loadingMore
+      && !infiniteScrollState.allDataFetched
+      && isMounted.current
+    ) {
       setInfiniteScrollState({
         ...infiniteScrollState,
         loadingMore: true,
@@ -118,30 +125,34 @@ const InfiniteScroll = <T, _>({
         .then((response) => {
           const contentReceived = response;
 
-          if (contentReceived.length === 0) {
+          if (isMounted.current) {
+            if (contentReceived.length === 0) {
+              setInfiniteScrollState({
+                ...infiniteScrollState,
+                allDataFetched: true,
+                loadingMore: false,
+                error: null,
+              });
+            } else {
+              setInfiniteScrollState({
+                ...infiniteScrollState,
+                data: infiniteScrollState.data.concat(contentReceived),
+                error: null,
+                loadingMore: false,
+                page: infiniteScrollState.page + 1,
+              });
+            }
+          }
+        })
+        .catch((err) => {
+          if (isMounted.current) {
             setInfiniteScrollState({
               ...infiniteScrollState,
               allDataFetched: true,
+              error: err,
               loadingMore: false,
-              error: null,
-            });
-          } else {
-            setInfiniteScrollState({
-              ...infiniteScrollState,
-              data: infiniteScrollState.data.concat(contentReceived),
-              error: null,
-              loadingMore: false,
-              page: infiniteScrollState.page + 1,
             });
           }
-        })
-        .catch((err) => {
-          setInfiniteScrollState({
-            ...infiniteScrollState,
-            allDataFetched: true,
-            error: err,
-            loadingMore: false,
-          });
         });
     }
   }
@@ -163,7 +174,7 @@ const InfiniteScroll = <T, _>({
   function renderLoading() : JSX.Element {
     if (infiniteScrollState.allDataFetched) {
       return (
-        <TextContainer>
+        <TextContainer style={{ ...noDataFoundContainerStyles }}>
           <NoDataFoundMessage>Não há dados para exibir!</NoDataFoundMessage>
         </TextContainer>
       );
@@ -183,7 +194,7 @@ const InfiniteScroll = <T, _>({
   }
 
   // Component effects.
-  useEffect(componentDidMount, [fetchInitialData]);
+  useFocusEffect(onComponentFocus);
 
   // JSX returned.
   return (

src/components/InfiniteScroll/styles.ts

@@ -22,6 +22,10 @@ export const defaultProps = {
 
   },
 
+  noDataFoundContainerStyles: {
+
+  },
+
   numColumns: 1,
 };
 

src/constants/theme.ts

@@ -12,10 +12,9 @@ const Theme = {
   },
   elements: {
     text: '#757575',
-    buttonText: '#434343',
+    textDark: '#434343',
+    textFaded: '#BDBDBD',
     buttonTextDisabled: '#999',
-    invalidText: '#BDBDBD',
-    placeholderText: '#BDBDBD',
     fieldText: '#575756',
     labelPrimary: '#589B9B',
     labelSecondary: '#F7A800',
@@ -27,7 +26,6 @@ const Theme = {
     headerPrimaryDark: '#88C9BF',
     headerSecondary: '#FEE29B',
     headerSecondaryDark: '#FFD358',
-    headerText: '#434343',
     headerLeftIcon: '#434343',
     muted: '#ADB5BD',
     active: '#FFD358',
@@ -43,12 +41,13 @@ const Theme = {
     animalPhotosInputBackground: '#F1F2F2',
     icon: '#757575',
     iconBackground: '#E6E7E7',
-    cardText: '#434343',
-    titleText: '#434343',
     sectionBreak: '#E0E0E0',
     adoptionButton: '#FDCF58',
     floatingButton: '#FAFAFA',
     notificationCounter: '#D55',
+    chatListEntrySeparator: '#E6E7E8',
+    chatListEntryTitle: '#589B9B',
+    chatListEntryTitleFaded: '#88C9BF',
     chatTextInput: '#FFFFFF',
     chatBackground: '#F1F2F2',
     chatSendIcon: '#FFFFFF',

src/layouts/HeaderLayout/index.tsx

@@ -171,7 +171,7 @@ HeaderLayout.defaultProps = {
   titleStyles: {
     fontFamily: 'Roboto_500Medium',
     fontSize: '20px',
-    color: Theme.elements.headerText,
+    color: Theme.elements.textDark,
   },
   drawerRoutes: [],
   drawerUser: true,

src/pages/Animal/Details/index.tsx

@@ -32,6 +32,7 @@ import * as CarouselTypes from '../../../types/carousel';
 import * as RouteTypes from '../../../types/routes';
 
 // Utils imports.
+import { concatenateNames } from '../../../utils/concatenateNames';
 import { formatLocation } from '../../../utils/formatTexts';
 
 // Component export.
@@ -100,10 +101,6 @@ export default function AnimalDetails() : JSX.Element {
     return 'Não';
   }
 
-  function concatenateNames(names : Array<string>) : string {
-    return names.length === 2 ? names.join(' e ') : names.join(', ');
-  }
-
   function determinePageBehavior() : void {
     function describeAnimalAdoptionRequirements(
       adoptionRequirements : AnimalTypes.AdoptionRequirements,
@@ -316,8 +313,7 @@ export default function AnimalDetails() : JSX.Element {
                         callback={() => navigation.navigate('Chat', {
                           /* eslint-disable camelcase */
                           title: owner.data()?.full_name,
-                          targetUserUID: animalData.owner.id,
-                          animalUID: animal.id,
+                          targetUserUID: ownerID,
                         })}
                       >
                         <ButtonTextStrong>Chat</ButtonTextStrong>

src/pages/Animal/Details/styles.ts

@@ -32,7 +32,7 @@ export const styledComponents = {
   `,
 
   ButtonTextStrong: styled.Text<TextProps>`
-    color: ${Theme.elements.buttonText};
+    color: ${Theme.elements.textDark};
     font-family: 'Roboto_500Medium';
     font-size: 12px;
     text-transform: uppercase;
@@ -130,7 +130,7 @@ export const styledComponents = {
   `,
 
   TitleText: styled.Text<TextProps>`
-    color: ${Theme.elements.titleText}
+    color: ${Theme.elements.textDark}
     font-family: 'Roboto_500Medium';
     font-size: 16px;
     margin-top: 16px;
@@ -150,7 +150,7 @@ export const styles = {
   },
 
   floatingButtonIcon: {
-    color: Theme.elements.buttonText,
+    color: Theme.elements.textDark,
   },
 
   headerLayoutHeaderPrimaryStyles: {

src/pages/Animal/Feed/index.tsx

@@ -65,7 +65,7 @@ const FeedPets = (): JSX.Element => {
         <MaterialCommunityIcons
           name="heart-outline"
           size={24}
-          color={Theme.elements.headerText}
+          color={Theme.elements.textDark}
         />
       )}
       headerBackground={Theme.elements.headerSecondary}

src/pages/Animal/Feed/styles.ts

@@ -6,7 +6,7 @@ import styled from 'styled-components/native';
 import { Theme } from '../../../constants';
 
 export const CardText = styled.Text<TextProps>`
-  color: ${Theme.elements.cardText};
+  color: ${Theme.elements.textDark};
   font-family: 'Roboto_400Regular';
   font-size: 12px;
   text-transform: uppercase;