fix(lib): fix fetchHistory not being called when a live message showe… (#113)

* fix(lib): fix fetchHistory not being called when a live message showed up

* fix(lib): revert one condition

Author: piotr-suwala

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

@@ -71,6 +71,8 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
   const [fetchingMessages, setFetchingMessages] = useState(false);
   const [reactingToMessage, setReactingToMessage] = useState(null);
   const [emojiPickerShown, setEmojiPickerShown] = useState(false);
+  // https://pubnub.atlassian.net/browse/UI-1843
+  const [initMessagesLoaded, setInitMessagesLoaded] = useState({});
 
   /*
   /* Helper functions
@@ -195,8 +197,12 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
   useEffect(() => {
     if (!pubnub || !channel) return;
     if (channel === prevChannel) return;
-    if (!messages?.length) fetchHistory();
-  }, [channel, fetchHistory, messages?.length, prevChannel, pubnub]);
+    if (!initMessagesLoaded[channel]) {
+      fetchHistory().then(() => {
+        setInitMessagesLoaded((curr) => ({ ...curr, [channel]: true }));
+      });
+    }
+  }, [channel, fetchHistory, initMessagesLoaded, messages.length, prevChannel, pubnub]);
 
   useEffect(() => {
     if (!messages?.length || scrolledBottom) return;
@@ -230,5 +236,6 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
     theme,
     unreadMessages,
     users,
+    initMessagesLoaded,
   };
 };

packages/common/src/state-atoms.ts

@@ -39,12 +39,15 @@ export const CurrentChannelMessagesAtom = atom(
 );
 
 export const CurrentChannelPaginationAtom = atom(
-  (get) => get(PaginationAtom)[get(CurrentChannelAtom)] || false,
-  (get, set, value) =>
-    set(
+  (get) => {
+    return get(PaginationAtom)[get(CurrentChannelAtom)] || false;
+  },
+  (get, set, value) => {
+    return set(
       PaginationAtom,
       Object.assign({}, get(PaginationAtom), { [get(CurrentChannelAtom)]: value })
-    )
+    );
+  }
 );
 
 export const CurrentChannelTypingIndicatorAtom = atom(

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

@@ -65,6 +65,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     theme,
     unreadMessages,
     users,
+    initMessagesLoaded,
   } = useMessageListCore(props);
 
   const lastMessageUniqueReactions = Object.keys(messages.slice(-1)[0]?.actions?.reaction || {});
@@ -136,7 +137,8 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
    * Lifecycle
    */
   useEffect(() => {
-    if (!isSpinnerVisible || wasSpinnerVisible || !messages.length || fetchingMessages) return;
+    if (!isSpinnerVisible || wasSpinnerVisible || !initMessagesLoaded[channel] || fetchingMessages)
+      return;
     fetchMoreHistory();
 
     async function fetchMoreHistory() {
@@ -147,11 +149,11 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
     }
   }, [
     fetchHistory,
-    fetchingMessages,
     isSpinnerVisible,
-    messages,
-    paginationEnd,
     wasSpinnerVisible,
+    initMessagesLoaded,
+    channel,
+    fetchingMessages,
   ]);
 
   useEffect(() => {

samples/react/group-chat/src/index.tsx

@@ -15,6 +15,7 @@ import "./index.css";
 const hash = document.location.hash.split("?")[1];
 const params = new URLSearchParams(hash);
 const uuid = params.get("uuid");
+
 const pubnubKeys = {
   publishKey: params.get("pubkey") || (import.meta.env.REACT_APP_PUB_KEY as string),
   subscribeKey: params.get("subkey") || (import.meta.env.REACT_APP_SUB_KEY as string),