fix(lib): screen might not be filled with messages on init

feat(lib): add option to render deleted messages instead of filtering them out

Author: Salet

packages/common/src/message-list/message-list.tsx

@@ -40,6 +40,8 @@ export interface CommonMessageListProps {
   fileRenderer?: (file: FileAttachment) => JSX.Element;
   /** This option only works when you use either `messageRenderer` or `bubbleRenderer`. It allows you to apply one of the custom renderers only to the messages selected by the filter. */
   filter?: (message: MessageEnvelope) => boolean;
+  /** Enable this to render deleted messages instead of filtering them out. They can be then customized with one of the renderers. */
+  renderDeleted?: boolean;
 }
 
 /**
@@ -194,16 +196,6 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
     }
   };
 
-  useEffect(() => {
-    if (!pubnub || !channel) return;
-    if (channel === prevChannel) return;
-    if (!initMessagesLoaded[channel]) {
-      fetchHistory().then(() => {
-        setInitMessagesLoaded((curr) => ({ ...curr, [channel]: true }));
-      });
-    }
-  }, [channel, fetchHistory, initMessagesLoaded, messages.length, prevChannel, pubnub]);
-
   useEffect(() => {
     if (!messages?.length || scrolledBottom) return;
     if (messages.length - prevMessages.length !== 1) return;
@@ -237,5 +229,6 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
     unreadMessages,
     users,
     initMessagesLoaded,
+    setInitMessagesLoaded,
   };
 };

packages/react-native/src/message-list/message-list.style.ts

@@ -71,10 +71,6 @@ export default (theme: Themes): MessageListStyle => {
     messageList: {
       backgroundColor: colors.messageListBackground,
     },
-    messageListScroller: {
-      backgroundColor: colors.messageListBackground,
-      flexGrow: 1,
-    },
     message: {
       flexDirection: "row",
       paddingHorizontal: 16,

packages/react-native/src/message-list/message-list.tsx

@@ -56,10 +56,13 @@ export type MessageListProps = CommonMessageListProps & {
 export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
   const {
     addReaction,
+    channel,
     emojiPickerShown,
     fetchHistory,
+    fetchingMessages,
     getTime,
     getUser,
+    initMessagesLoaded,
     isOwnMessage,
     messages,
     onError,
@@ -70,6 +73,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     removeReaction,
     scrolledBottom,
     setEmojiPickerShown,
+    setInitMessagesLoaded,
     setReactingToMessage,
     setScrolledBottom,
     setUnreadMessages,
@@ -88,9 +92,11 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
   const [spinnerShown, setSpinnerShown] = useState(false);
   const [sheetPosition] = useState(new Animated.Value(0));
   const shouldShownSpinner = props.fetchMessages && !paginationEnd;
+  const currentChannelInitMessagesLoaded = initMessagesLoaded[channel];
 
   const rotate = useRotation(shouldShownSpinner && spinnerShown);
   const listRef = useRef<FlatList>(null);
+  const listHeight = useRef(0);
 
   /**
    * Commands
@@ -179,7 +185,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     const deleted = !!Object.keys(actions?.deleted || {}).length;
     const isOwn = isOwnMessage(uuid);
 
-    if (deleted) return;
+    if (deleted && !props.renderDeleted) return;
 
     return (
       <Pressable
@@ -309,7 +315,6 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
       <FlatList
         testID="message-list"
         style={style.messageList}
-        contentContainerStyle={style.messageListScroller}
         data={[
           { timetoken: "children-element", message: { id: "children-element" } },
           ...reverseMessages,
@@ -318,10 +323,26 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
         renderItem={renderItem}
         keyExtractor={(envelope) => envelope.timetoken as string}
         ref={listRef}
-        onEndReached={() => fetchHistory()}
+        onEndReached={() => {
+          if (!fetchingMessages) fetchHistory();
+        }}
         onScroll={handleScroll}
         inverted={true}
         onViewableItemsChanged={onViewableItemsChanged}
+        onContentSizeChange={(_, contentHeight) => {
+          if (
+            contentHeight <= listHeight.current &&
+            !paginationEnd &&
+            !currentChannelInitMessagesLoaded
+          ) {
+            if (!fetchingMessages) fetchHistory();
+          } else {
+            setInitMessagesLoaded((curr) => ({ ...curr, [channel]: true }));
+          }
+        }}
+        onLayout={(ev) => {
+          listHeight.current = ev.nativeEvent.layout.height;
+        }}
       />
       {props.reactionsPicker &&
         cloneElement(props.reactionsPicker, {

packages/react/src/message-list/message-item.tsx

@@ -36,6 +36,7 @@ export type ItemProps = Pick<
     | "filter"
     | "messageRenderer"
     | "reactionsPicker"
+    | "renderDeleted"
   >;
   scrollToBottom: () => void;
 };
@@ -72,11 +73,12 @@ function Item({
     filter,
     messageRenderer,
     reactionsPicker,
+    renderDeleted,
   } = listProps;
 
   const actions = envelope.actions;
   const deleted = !!Object.keys(actions?.deleted || {}).length;
-  if (deleted) return;
+  if (deleted && !renderDeleted) return;
   const uuid = envelope.uuid || envelope.publisher || "";
   const currentUserClass = isOwnMessage(uuid) ? "pn-msg--own" : "";
   const message = isFilePayload(envelope.message) ? envelope.message.message : envelope.message;

packages/react/src/message-list/message-list.tsx

@@ -66,8 +66,11 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     unreadMessages,
     users,
     initMessagesLoaded,
+    setInitMessagesLoaded,
   } = useMessageListCore(props);
 
+  const currentChannelInitMessagesLoaded = initMessagesLoaded[channel];
+  const previousMessagesLength = usePrevious(messages.length);
   const lastMessageUniqueReactions = Object.keys(messages.slice(-1)[0]?.actions?.reaction || {});
   const prevLastMessageUniqueReactions = usePrevious(lastMessageUniqueReactions);
 
@@ -137,9 +140,40 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
    * Lifecycle
    */
   useEffect(() => {
-    if (!isSpinnerVisible || wasSpinnerVisible || !initMessagesLoaded[channel] || fetchingMessages)
-      return;
-    fetchMoreHistory();
+    const { scrollHeight, clientHeight } = listRef.current;
+    const hasScroll = scrollHeight > clientHeight;
+    if (!currentChannelInitMessagesLoaded && (paginationEnd || hasScroll))
+      setInitMessagesLoaded((curr) => ({ ...curr, [channel]: true }));
+    if (
+      pubnub &&
+      channel &&
+      !currentChannelInitMessagesLoaded &&
+      !paginationEnd &&
+      (channel !== prevChannel || (!hasScroll && messages.length !== previousMessagesLength))
+    ) {
+      fetchHistory();
+    }
+  }, [
+    channel,
+    currentChannelInitMessagesLoaded,
+    fetchHistory,
+    messages.length,
+    paginationEnd,
+    prevChannel,
+    previousMessagesLength,
+    pubnub,
+    setInitMessagesLoaded,
+  ]);
+
+  useEffect(() => {
+    if (
+      isSpinnerVisible &&
+      !wasSpinnerVisible &&
+      currentChannelInitMessagesLoaded &&
+      !fetchingMessages
+    ) {
+      fetchMoreHistory();
+    }
 
     async function fetchMoreHistory() {
       const firstMessage = listRef.current?.querySelector(".pn-msg") as HTMLDivElement;
@@ -151,8 +185,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     fetchHistory,
     isSpinnerVisible,
     wasSpinnerVisible,
-    initMessagesLoaded,
-    channel,
+    currentChannelInitMessagesLoaded,
     fetchingMessages,
   ]);
 
@@ -201,6 +234,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
       filter: props.filter,
       messageRenderer: props.messageRenderer,
       reactionsPicker: props.reactionsPicker,
+      renderDeleted: props.renderDeleted,
     },
     pubnub,
     reactingToMessage,