feat: only show newMessagesBanner if new messages have been registered

Author: melvin-qte

src/CuteChat.tsx

@@ -55,6 +55,7 @@ export function CuteChat(props: CuteChatProps) {
   const [initializing, setInitializing] = useState(true);
   const [lastMessageDoc, setLastMessageDoc] =
     useState<FirebaseFirestore.DocumentSnapshot | null>(null);
+  const [hasNewMessages, setHasNewMessages] = useState(false);
 
   const memoizedUser = useMemo(() => ({ _id: user.id, ...user }), [user]);
   const startDate = useMemo(() => new Date(), []);
@@ -153,6 +154,8 @@ export function CuteChat(props: CuteChatProps) {
             console.log('New messages');
             const snapshotChanges = await prepareSnapshot(snapshot, chatId);
             setMessages((old) => appendSnapshot(old, snapshotChanges));
+
+            setHasNewMessages(true);
           }
         },
         (error: Error) => console.error('Error fetching documents: ', error)
@@ -310,6 +313,8 @@ export function CuteChat(props: CuteChatProps) {
             newMessagesBannerStyles={props.newMessagesBannerStyles}
             scrollToBottomComponent={props.scrollToBottomComponent}
             scrollToBottomStyle={props.scrollToBottomStyle}
+            hasNewMessages={hasNewMessages}
+            markNewMessagesAsSeen={() => setHasNewMessages(false)}
             closeToTop={closeToTop}
             chatRef={chatListRef}
           />

src/components/ChatFooter/ChatFooter.tsx

@@ -12,12 +12,19 @@ export const ChatFooter = (props: {
   scrollToBottomStyle?: StyleProp<ViewStyle>;
 
   closeToTop: boolean;
+  hasNewMessages: boolean;
+  markNewMessagesAsSeen: () => void;
   chatRef: RefObject<FlatList<IMessage>>;
 }) => {
   const scrollToBottom = () => {
     props.chatRef.current?.scrollToOffset({ offset: 0, animated: true });
   };
 
+  const onNewMessagesBannerPress = () => {
+    scrollToBottom();
+    props.markNewMessagesAsSeen();
+  };
+
   return (
     <View
       style={{
@@ -35,8 +42,9 @@ export const ChatFooter = (props: {
       <MiddleSection
         newMessagesBannerComponent={props.newMessagesBannerComponent}
         newMessagesBannerStyles={props.newMessagesBannerStyles}
-        onNewMessagesBannerPress={scrollToBottom}
+        onNewMessagesBannerPress={onNewMessagesBannerPress}
         closeToTop={props.closeToTop}
+        hasNewMessages={props.hasNewMessages}
       />
 
       <RightSection

src/components/ChatFooter/MiddleSection.tsx

@@ -7,12 +7,16 @@ type Props = {
   onNewMessagesBannerPress?: () => void;
 
   closeToTop: boolean;
+  hasNewMessages: boolean;
 };
 
 export const MiddleSection = (props: Props) => {
+  const shouldDisplayNewMessagesBanner =
+    !props.closeToTop && props.hasNewMessages;
+
   return (
     <View style={{ display: 'flex', flex: 1 }}>
-      {!props.closeToTop && props.newMessagesBannerComponent && (
+      {shouldDisplayNewMessagesBanner && props.newMessagesBannerComponent && (
         <TouchableOpacity
           onPress={props.onNewMessagesBannerPress}
           style={