@planningcenter/chat-react-native 4.2.0 → 4.2.1-qa-staging.0

package/build/screens/conversation_screen.js

@@ -20,10 +20,12 @@ import { useConversation } from '../hooks/use_conversation';
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events';
+import { useFetchNewerMessages } from '../hooks/use_fetch_newer_messages';
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read';
 import { analyticsEvents, normalizeAnalyticsMetadata, usePublishProductAnalyticsEvent } from '../hooks/use_product_analytics';
 import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge';
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events';
+import { gatedMessageCache } from '../utils/gated_message_cache';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ConversationScreen(t0) {
   const $ = _c(13);
@@ -95,11 +97,9 @@ export function ConversationScreen(t0) {
   }
   return t6;
 }
-function ConversationScreenContent(t0) {
-  const $ = _c(80);
-  const {
-    route
-  } = t0;
+function ConversationScreenContent({
+  route
+}) {
   const styles = useStyles();
   const navigation = useNavigation();
   const {
@@ -111,62 +111,46 @@ function ConversationScreenContent(t0) {
   const {
     data: conversation
   } = useConversation(route.params);
-  let t1;
-  if ($[0] !== conversation_id || $[1] !== reply_root_id) {
-    t1 = {
-      conversation_id,
-      reply_root_id
-    };
-    $[0] = conversation_id;
-    $[1] = reply_root_id;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
   const {
     messages,
     fetchNextPage,
-    hasNextPage
-  } = useConversationMessages(t1);
-  let t2;
-  if ($[3] !== conversation_id) {
-    t2 = {
-      conversationId: conversation_id
-    };
-    $[3] = conversation_id;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  useConversationJoltEvents(t2);
-  let t3;
-  if ($[5] !== conversation_id) {
-    t3 = {
-      conversationId: conversation_id
-    };
-    $[5] = conversation_id;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  useConversationMessagesJoltEvents(t3);
+    hasNextPage,
+    queryKey
+  } = useConversationMessages({
+    conversation_id,
+    reply_root_id
+  });
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false);
+  const readingHistory = showJumpToBottomButton;
+  const skippedNewMessages = useRef(false);
+  const messageCaches = [gatedMessageCache({
+    queryKey,
+    acceptNewMessages: !readingHistory,
+    onSkippedNewMessage: () => {
+      skippedNewMessages.current = true;
+    }
+  })];
+  const newestMessageId = messages[0]?.id;
+  useConversationJoltEvents({
+    conversationId: conversation_id
+  });
+  useConversationMessagesJoltEvents({
+    conversationId: conversation_id,
+    messageCaches
+  });
   const {
     markHandledByMessageForm
   } = useVideoModerationJoltEvents();
   useEnsureConversationsRouteExists();
-  let t4;
-  if ($[7] !== conversation || $[8] !== messages) {
-    t4 = {
-      conversation,
-      messages
-    };
-    $[7] = conversation;
-    $[8] = messages;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  useMarkLatestMessageRead(t4);
+  useMarkLatestMessageRead({
+    conversation,
+    messages
+  });
+  const fetchNewer = useFetchNewerMessages({
+    conversation_id,
+    reply_root_id,
+    queryKey
+  });
   const noMessages = messages.length === 0;
   const {
     repliesDisabled,
@@ -176,294 +160,123 @@ function ConversationScreenContent(t0) {
   } = conversation;
   const canReply = memberAbility?.canReply;
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled;
-  let t5;
-  if ($[10] !== editing_message_id || $[11] !== messages) {
-    let t6;
-    if ($[13] !== editing_message_id) {
-      t6 = m => String(m.id) === String(editing_message_id);
-      $[13] = editing_message_id;
-      $[14] = t6;
-    } else {
-      t6 = $[14];
-    }
-    t5 = messages.find(t6);
-    $[10] = editing_message_id;
-    $[11] = messages;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  const currentlyEditingMessage = t5;
-  let t6;
-  if ($[15] !== reply_root_author_name) {
-    t6 = reply_root_author_name?.split(" ")[0];
-    $[15] = reply_root_author_name;
-    $[16] = t6;
-  } else {
-    t6 = $[16];
-  }
-  const replyRootAuthorFirstName = t6;
-  const replyHeaderTitle = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : "Reply";
+  const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id));
+  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0];
+  const replyHeaderTitle = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply';
+  // Prefer the membership for optimistic updates.
   const muted = conversation.conversationMembership?.muted ?? conversation.muted;
   const listRef = useRef(null);
-  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false);
-  let t7;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = event => {
-      const offsetY = event.nativeEvent.contentOffset.y;
-      setShowJumpToBottomButton(offsetY > 200);
-    };
-    $[17] = t7;
-  } else {
-    t7 = $[17];
-  }
-  const trackScroll = t7;
-  let t8;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = {
-      listRef,
-      enabled: Platform.OS === "ios"
-    };
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
+  const trackScroll = event => {
+    const offsetY = event.nativeEvent.contentOffset.y;
+    setShowJumpToBottomButton(offsetY > 200);
+  };
   const {
     restOffset,
     onLayout,
     onContentSizeChange,
     onMomentumScrollEnd,
     onScrollEndDrag
-  } = useRestAwayFromDismissEdge(t8);
-  let t9;
-  if ($[19] !== restOffset) {
-    t9 = () => {
-      listRef.current?.scrollToOffset({
-        offset: restOffset
-      });
-    };
-    $[19] = restOffset;
-    $[20] = t9;
-  } else {
-    t9 = $[20];
-  }
-  const handleReturnToBottom = t9;
-  let t10;
-  if ($[21] !== badges?.[0] || $[22] !== conversation.deleted || $[23] !== muted || $[24] !== navigation || $[25] !== replyHeaderTitle || $[26] !== reply_root_id || $[27] !== title) {
-    t10 = () => {
-      if (reply_root_id) {
-        navigation.setParams({
-          title: replyHeaderTitle
-        });
-      } else {
-        navigation.setParams({
-          title,
-          badge: badges?.[0],
-          deleted: conversation?.deleted,
-          muted
-        });
-      }
-    };
-    $[21] = badges?.[0];
-    $[22] = conversation.deleted;
-    $[23] = muted;
-    $[24] = navigation;
-    $[25] = replyHeaderTitle;
-    $[26] = reply_root_id;
-    $[27] = title;
-    $[28] = t10;
-  } else {
-    t10 = $[28];
-  }
-  const t11 = conversation?.deleted;
-  let t12;
-  if ($[29] !== badges || $[30] !== muted || $[31] !== navigation || $[32] !== replyHeaderTitle || $[33] !== reply_root_id || $[34] !== t11 || $[35] !== title) {
-    t12 = [navigation, title, badges, t11, reply_root_id, replyHeaderTitle, muted];
-    $[29] = badges;
-    $[30] = muted;
-    $[31] = navigation;
-    $[32] = replyHeaderTitle;
-    $[33] = reply_root_id;
-    $[34] = t11;
-    $[35] = title;
-    $[36] = t12;
-  } else {
-    t12 = $[36];
-  }
-  useEffect(t10, t12);
-  if (!conversation || conversation.deleted) {
-    let t13;
-    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-      t13 = /*#__PURE__*/_jsx(BlankState.Imagery, {
-        name: "general.outlinedTextMessage"
+  } = useRestAwayFromDismissEdge({
+    listRef,
+    enabled: Platform.OS === 'ios'
+  });
+  const handleReturnToBottom = useCallback(() => {
+    listRef.current?.scrollToOffset({
+      offset: restOffset
+    });
+  }, [restOffset]);
+  const jumpToLatest = useCallback(() => {
+    setShowJumpToBottomButton(false);
+    handleReturnToBottom();
+  }, [handleReturnToBottom]);
+  useEffect(() => {
+    if (readingHistory || !newestMessageId || !skippedNewMessages.current) return;
+    skippedNewMessages.current = false;
+    fetchNewer(newestMessageId);
+  }, [fetchNewer, newestMessageId, readingHistory]);
+  useEffect(() => {
+    if (reply_root_id) {
+      navigation.setParams({
+        title: replyHeaderTitle
       });
-      $[37] = t13;
     } else {
-      t13 = $[37];
-    }
-    let t14;
-    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = /*#__PURE__*/_jsx(BlankState.Content, {
-        children: /*#__PURE__*/_jsx(BlankState.Heading, {
-          children: "This conversation has been deleted"
-        })
+      navigation.setParams({
+        title: title,
+        badge: badges?.[0],
+        deleted: conversation?.deleted,
+        muted
       });
-      $[38] = t14;
-    } else {
-      t14 = $[38];
     }
-    let t15;
-    if ($[39] !== navigation.goBack) {
-      t15 = /*#__PURE__*/_jsxs(BlankState.Root, {
-        children: [t13, t14, /*#__PURE__*/_jsx(BlankState.Button, {
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted]);
+  if (!conversation || conversation.deleted) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsxs(BlankState.Root, {
+        children: [/*#__PURE__*/_jsx(BlankState.Imagery, {
+          name: "general.outlinedTextMessage"
+        }), /*#__PURE__*/_jsx(BlankState.Content, {
+          children: /*#__PURE__*/_jsx(BlankState.Heading, {
+            children: "This conversation has been deleted"
+          })
+        }), /*#__PURE__*/_jsx(BlankState.Button, {
           onPress: navigation.goBack,
           title: "Back to conversations",
           accessibilityHint: "Navigates back to the conversations list",
           accessibilityRole: "link"
         })]
-      });
-      $[39] = navigation.goBack;
-      $[40] = t15;
-    } else {
-      t15 = $[40];
-    }
-    let t16;
-    if ($[41] !== styles.container || $[42] !== t15) {
-      t16 = /*#__PURE__*/_jsx(View, {
-        style: styles.container,
-        children: t15
-      });
-      $[41] = styles.container;
-      $[42] = t15;
-      $[43] = t16;
-    } else {
-      t16 = $[43];
-    }
-    return t16;
-  }
-  let t13;
-  if ($[44] !== conversation || $[45] !== conversation_id || $[46] !== fetchNextPage || $[47] !== hasNextPage || $[48] !== messages || $[49] !== noMessages || $[50] !== onContentSizeChange || $[51] !== onLayout || $[52] !== onMomentumScrollEnd || $[53] !== onScrollEndDrag || $[54] !== reply_root_id || $[55] !== styles.emptyState) {
-    t13 = noMessages ? /*#__PURE__*/_jsx(View, {
-      style: styles.emptyState,
-      children: /*#__PURE__*/_jsx(ConversationStartBanner, {
-        conversation: conversation,
-        hasMessages: false
       })
-    }) : /*#__PURE__*/_jsx(MessageList, {
-      listRef: listRef,
-      conversation: conversation,
-      conversationId: conversation_id,
-      messages: messages,
-      replyRootId: reply_root_id,
-      hasNextPage: hasNextPage,
-      onEndReached: () => fetchNextPage(),
-      onScroll: trackScroll,
-      onLayout: onLayout,
-      onContentSizeChange: onContentSizeChange,
-      onScrollEndDrag: onScrollEndDrag,
-      onMomentumScrollEnd: onMomentumScrollEnd
     });
-    $[44] = conversation;
-    $[45] = conversation_id;
-    $[46] = fetchNextPage;
-    $[47] = hasNextPage;
-    $[48] = messages;
-    $[49] = noMessages;
-    $[50] = onContentSizeChange;
-    $[51] = onLayout;
-    $[52] = onMomentumScrollEnd;
-    $[53] = onScrollEndDrag;
-    $[54] = reply_root_id;
-    $[55] = styles.emptyState;
-    $[56] = t13;
-  } else {
-    t13 = $[56];
-  }
-  let t14;
-  if ($[57] !== handleReturnToBottom || $[58] !== showJumpToBottomButton) {
-    t14 = /*#__PURE__*/_jsx(JumpToBottomButton, {
-      onPress: handleReturnToBottom,
-      visible: showJumpToBottomButton
-    });
-    $[57] = handleReturnToBottom;
-    $[58] = showJumpToBottomButton;
-    $[59] = t14;
-  } else {
-    t14 = $[59];
   }
-  let t15;
-  if ($[60] !== noMessages) {
-    t15 = !noMessages && /*#__PURE__*/_jsx(TypingIndicator, {});
-    $[60] = noMessages;
-    $[61] = t15;
-  } else {
-    t15 = $[61];
-  }
-  let t16;
-  if ($[62] !== showLeaderDisabledReplyBanner) {
-    t16 = showLeaderDisabledReplyBanner && /*#__PURE__*/_jsx(LeaderMessagesDisabledBanner, {});
-    $[62] = showLeaderDisabledReplyBanner;
-    $[63] = t16;
-  } else {
-    t16 = $[63];
-  }
-  let t17;
-  if ($[64] !== canReply || $[65] !== conversation || $[66] !== currentlyEditingMessage || $[67] !== markHandledByMessageForm || $[68] !== replyRootAuthorFirstName || $[69] !== reply_root_id) {
-    t17 = /*#__PURE__*/_jsx(ConversationBottomBar, {
-      conversation: conversation,
-      canReply: canReply,
-      replyRootAuthorFirstName: replyRootAuthorFirstName,
-      replyRootId: reply_root_id,
-      currentlyEditingMessage: currentlyEditingMessage,
-      onFlaggedInMessageForm: markHandledByMessageForm
-    });
-    $[64] = canReply;
-    $[65] = conversation;
-    $[66] = currentlyEditingMessage;
-    $[67] = markHandledByMessageForm;
-    $[68] = replyRootAuthorFirstName;
-    $[69] = reply_root_id;
-    $[70] = t17;
-  } else {
-    t17 = $[70];
-  }
-  let t18;
-  if ($[71] !== t13 || $[72] !== t14 || $[73] !== t15 || $[74] !== t16 || $[75] !== t17) {
-    t18 = /*#__PURE__*/_jsxs(KeyboardView, {
-      children: [t13, t14, t15, t16, t17]
-    });
-    $[71] = t13;
-    $[72] = t14;
-    $[73] = t15;
-    $[74] = t16;
-    $[75] = t17;
-    $[76] = t18;
-  } else {
-    t18 = $[76];
-  }
-  let t19;
-  if ($[77] !== styles.container || $[78] !== t18) {
-    t19 = /*#__PURE__*/_jsx(View, {
-      style: styles.container,
-      children: t18
-    });
-    $[77] = styles.container;
-    $[78] = t18;
-    $[79] = t19;
-  } else {
-    t19 = $[79];
-  }
-  return t19;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(KeyboardView, {
+      children: [noMessages ? /*#__PURE__*/_jsx(View, {
+        style: styles.emptyState,
+        children: /*#__PURE__*/_jsx(ConversationStartBanner, {
+          conversation: conversation,
+          hasMessages: false
+        })
+      }) : /*#__PURE__*/_jsx(MessageList, {
+        listRef: listRef,
+        conversation: conversation,
+        conversationId: conversation_id,
+        messages: messages,
+        replyRootId: reply_root_id,
+        hasNextPage: hasNextPage,
+        onEndReached: () => fetchNextPage(),
+        onScroll: trackScroll,
+        onLayout: onLayout,
+        onContentSizeChange: onContentSizeChange,
+        onScrollEndDrag: onScrollEndDrag,
+        onMomentumScrollEnd: onMomentumScrollEnd,
+        maintainVisibleContentPosition: readingHistory ? {
+          minIndexForVisible: 0
+        } : undefined
+      }), /*#__PURE__*/_jsx(JumpToBottomButton, {
+        onPress: jumpToLatest,
+        visible: showJumpToBottomButton
+      }), !noMessages && /*#__PURE__*/_jsx(TypingIndicator, {}), showLeaderDisabledReplyBanner && /*#__PURE__*/_jsx(LeaderMessagesDisabledBanner, {}), /*#__PURE__*/_jsx(ConversationBottomBar, {
+        conversation: conversation,
+        canReply: canReply,
+        replyRootAuthorFirstName: replyRootAuthorFirstName,
+        replyRootId: reply_root_id,
+        currentlyEditingMessage: currentlyEditingMessage,
+        onFlaggedInMessageForm: markHandledByMessageForm,
+        onBeforeSubmit: jumpToLatest
+      })]
+    })
+  });
 }
 function ConversationBottomBar(t0) {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     conversation,
     canReply,
     replyRootAuthorFirstName,
     replyRootId,
     currentlyEditingMessage,
-    onFlaggedInMessageForm
+    onFlaggedInMessageForm,
+    onBeforeSubmit
   } = t0;
   const messageLink = useMessageAvailableMembersAction(conversation);
   if (conversation.disabled) {
@@ -513,24 +326,26 @@ function ConversationBottomBar(t0) {
     t5 = $[7];
   }
   let t6;
-  if ($[8] !== conversation || $[9] !== currentlyEditingMessage || $[10] !== onFlaggedInMessageForm || $[11] !== replyRootAuthorFirstName || $[12] !== replyRootId || $[13] !== t1) {
+  if ($[8] !== conversation || $[9] !== currentlyEditingMessage || $[10] !== onBeforeSubmit || $[11] !== onFlaggedInMessageForm || $[12] !== replyRootAuthorFirstName || $[13] !== replyRootId || $[14] !== t1) {
     t6 = /*#__PURE__*/_jsxs(MessageForm.Root, {
       replyRootAuthorFirstName: replyRootAuthorFirstName,
       conversation: conversation,
       replyRootId: replyRootId,
       currentlyEditingMessage: currentlyEditingMessage,
       onFlaggedInMessageForm: onFlaggedInMessageForm,
+      onBeforeSubmit: onBeforeSubmit,
       children: [t2, t3, t4, t5]
     }, t1);
     $[8] = conversation;
     $[9] = currentlyEditingMessage;
-    $[10] = onFlaggedInMessageForm;
-    $[11] = replyRootAuthorFirstName;
-    $[12] = replyRootId;
-    $[13] = t1;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
+    $[10] = onBeforeSubmit;
+    $[11] = onFlaggedInMessageForm;
+    $[12] = replyRootAuthorFirstName;
+    $[13] = replyRootId;
+    $[14] = t1;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
   }
   return t6;
 }