feat: separate all footer sections into own components

Author: melvin-qte

src/CuteChat.tsx

@@ -59,7 +59,7 @@ export function CuteChat(props: CuteChatProps) {
   const memoizedUser = useMemo(() => ({ _id: user.id, ...user }), [user]);
   const startDate = useMemo(() => new Date(), []);
 
-  const chatRef = useRef<FlatList<IMessage>>(null);
+  const chatListRef = useRef<FlatList<IMessage>>(null);
 
   const setIsLoadingBool = useCallback(
     (isLoading: boolean) => {
@@ -311,7 +311,7 @@ export function CuteChat(props: CuteChatProps) {
             scrollToBottomComponent={props.scrollToBottomComponent}
             scrollToBottomStyle={props.scrollToBottomStyle}
             closeToTop={closeToTop}
-            chatRef={chatRef}
+            chatRef={chatListRef}
           />
           {props.renderChatFooter?.()}
         </>
@@ -321,7 +321,7 @@ export function CuteChat(props: CuteChatProps) {
       user={memoizedUser}
       inverted={true}
       listViewProps={{
-        ref: chatRef,
+        ref: chatListRef,
         onScroll: ({ nativeEvent }: { nativeEvent: NativeScrollEvent }) => {
           if (isCloseToBottom(nativeEvent)) fetchMoreMessages();
 

src/components/ChatFooter/ChatFooter.tsx

@@ -1,12 +1,9 @@
-import { ReactNode, RefObject } from 'react';
-import {
-  FlatList,
-  StyleProp,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
+import React, { ReactNode, RefObject } from 'react';
+import { FlatList, StyleProp, View, ViewStyle } from 'react-native';
 import { IMessage } from 'react-native-gifted-chat';
+import { RightSection } from './RightSection';
+import { MiddleSection } from './MiddleSection';
+import { LeftSection } from './LeftSection';
 
 export const ChatFooter = (props: {
   newMessagesBannerComponent?: () => ReactNode;
@@ -28,48 +25,26 @@ export const ChatFooter = (props: {
         position: 'absolute',
         flexDirection: 'row',
         justifyContent: 'flex-start',
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
         width: '100%',
-        height: 100,
-        bottom: 0,
+        bottom: 40,
         left: 0,
       }}
     >
-      <View style={{ display: 'flex', flex: 1 }}></View>
-      <View style={{ display: 'flex', flex: 1 }}>
-        {!props.closeToTop && props.newMessagesBannerComponent && (
-          <TouchableOpacity
-            onPress={scrollToBottom}
-            style={
-              props.newMessagesBannerStyles ?? {
-                alignSelf: 'center',
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                padding: 10,
-                borderRadius: 100,
-              }
-            }
-          >
-            {props.newMessagesBannerComponent()}
-          </TouchableOpacity>
-        )}
-      </View>
-      <View style={{ display: 'flex', flex: 1 }}>
-        {!props.closeToTop && props.scrollToBottomComponent && (
-          <TouchableOpacity
-            onPress={scrollToBottom}
-            style={
-              props.scrollToBottomStyle ?? {
-                alignSelf: 'flex-end',
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                padding: 10,
-                borderRadius: 100,
-              }
-            }
-          >
-            {props.scrollToBottomComponent()}
-          </TouchableOpacity>
-        )}
-      </View>
+      <LeftSection />
+
+      <MiddleSection
+        newMessagesBannerComponent={props.newMessagesBannerComponent}
+        newMessagesBannerStyles={props.newMessagesBannerStyles}
+        onNewMessagesBannerPress={scrollToBottom}
+        closeToTop={props.closeToTop}
+      />
+
+      <RightSection
+        scrollToBottom={scrollToBottom}
+        scrollToBottomComponent={props.scrollToBottomComponent}
+        scrollToBottomStyle={props.scrollToBottomStyle}
+        closeToTop={props.closeToTop}
+      />
     </View>
   );
 };

src/components/ChatFooter/LeftSection.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export const LeftSection = () => {
+  return <View style={{ display: 'flex', flex: 1 }}></View>;
+};

src/components/ChatFooter/MiddleSection.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
+
+type Props = {
+  newMessagesBannerComponent?: () => ReactNode;
+  newMessagesBannerStyles?: StyleProp<ViewStyle>;
+  onNewMessagesBannerPress?: () => void;
+
+  closeToTop: boolean;
+};
+
+export const MiddleSection = (props: Props) => {
+  return (
+    <View style={{ display: 'flex', flex: 1 }}>
+      {!props.closeToTop && props.newMessagesBannerComponent && (
+        <TouchableOpacity
+          onPress={props.onNewMessagesBannerPress}
+          style={
+            props.newMessagesBannerStyles ?? {
+              alignSelf: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
+              padding: 10,
+              borderRadius: 100,
+            }
+          }
+        >
+          {props.newMessagesBannerComponent()}
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

src/components/ChatFooter/RightSection.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
+
+type Props = {
+  scrollToBottomComponent?: () => ReactNode;
+  scrollToBottomStyle?: StyleProp<ViewStyle>;
+  scrollToBottom?: () => void;
+  closeToTop: boolean;
+};
+
+export const RightSection = (props: Props) => {
+  return (
+    <View style={{ display: 'flex', flex: 1 }}>
+      {!props.closeToTop && props.scrollToBottomComponent && (
+        <TouchableOpacity
+          onPress={props.scrollToBottom}
+          style={
+            props.scrollToBottomStyle ?? {
+              alignSelf: 'flex-end',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
+              padding: 10,
+              borderRadius: 100,
+            }
+          }
+        >
+          {props.scrollToBottomComponent()}
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};