@planningcenter/chat-react-native 3.5.1-rc.2 → 3.6.0-rc.0

package/src/hooks/use_conversation.ts

@@ -13,11 +13,13 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
       Conversation: [
         'created_at',
         'badges',
+        'conversation_membership',
         'groups',
         'last_message_author_id',
         'last_message_author_name',
         'last_message_created_at',
         'last_message_text_preview',
+        'latest_read_message_sort_key',
         'preview_avatar_urls',
         'member_ability',
         'muted',
@@ -33,10 +35,11 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'can_reply',
         'can_delete_non_authored_messages',
       ],
+      ConversationMembership: ['last_read_message_sort_key'],
       ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
       Group: ['type', 'id', 'links', 'name', 'source_app_name', 'source_type'],
     },
-    include: ['badges', 'member_ability', 'groups'],
+    include: ['badges', 'conversation_membership', 'member_ability', 'groups'],
   },
 })
 

package/src/hooks/use_conversation_jolt_events.ts

@@ -0,0 +1,52 @@
+import { JoltConversationEvent } from '../types/jolt_events'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+import { getConversationRequestArgs, useConversation } from './use_conversation'
+import { useQueryClient } from '@tanstack/react-query'
+import { ApiResource, ConversationResource } from '../types'
+import { getRequestQueryKey } from './use_suspense_api'
+
+interface Props {
+  conversationId: number
+}
+
+export function useConversationJoltEvents({ conversationId }: Props) {
+  const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
+  const { refetch } = useConversation({ conversation_id: conversationId })
+  const queryClient = useQueryClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id: conversationId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  function updateLastRead(e: JoltConversationEvent) {
+    e.data.data.latest_read_message_sort_key
+
+    queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+      if (!prev?.data) return prev
+
+      return {
+        ...prev,
+        data: {
+          ...prev.data,
+          last_read_message_sort_key: e.data.data.latest_read_message_sort_key,
+        },
+      }
+    })
+  }
+
+  function removeFromCache() {
+    queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+      if (!prev?.data) return prev
+
+      return {
+        ...prev,
+        data: {
+          ...prev.data,
+          deleted: true,
+        },
+      }
+    })
+  }
+
+  useJoltEvent(joltChannel, 'conversation.updated', () => refetch())
+  useJoltEvent(joltChannel, 'conversation.read', updateLastRead)
+  useJoltEvent(joltChannel, 'conversation.destroyed', removeFromCache)
+}

package/src/hooks/use_live_relative_time.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import moment from 'moment'
+import { relativeTime, type DateProps } from '../utils/date'
+
+const MINUTE = 60
+const HOUR = MINUTE * 60
+const DAY = HOUR * 24
+
+export function useLiveRelativeTime(date: DateProps) {
+  const [timeNow, setTimeNow] = useState(Date.now())
+
+  useEffect(() => {
+    const tick = () => {
+      const then = moment(date).valueOf()
+      const seconds = Math.round(Math.abs(timeNow - then) / 1000)
+
+      const periodInMinutes = seconds < HOUR ? 1 : seconds < DAY ? 60 : 0
+
+      if (periodInMinutes) {
+        return setTimeout(() => setTimeNow(Date.now()), periodInMinutes * 60000)
+      }
+
+      return 0
+    }
+    const timeoutId = tick()
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [date, timeNow])
+
+  useEffect(() => {
+    setTimeNow(Date.now())
+  }, [date])
+
+  return relativeTime(date)
+}

package/src/hooks/use_mark_latest_message_read.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from 'react'
+import { ConversationResource, MessageResource } from '../types'
+import { useCurrentPerson } from './use_current_person'
+import { useAppState } from './use_app_state'
+import { useConversationsMarkRead } from './use_conversations_actions'
+
+interface Props {
+  conversation: ConversationResource
+  messages: MessageResource[]
+}
+
+export function useMarkLatestMessageRead({ conversation, messages }: Props) {
+  const currentPerson = useCurrentPerson()
+  const { markRead } = useConversationsMarkRead({ conversation })
+
+  const latestOtherPersonMessageId = useMemo(
+    () => messages.find(message => message.author.id !== currentPerson.id)?.id,
+    [currentPerson.id, messages]
+  )
+  const [lastReadMessageId, setLastReadMessageId] = useState(
+    conversation.conversationMembership?.lastReadMessageSortKey
+  )
+  const appState = useAppState()
+  const isActive = appState === 'active'
+
+  /**
+   * Handle marking the conversation as read.
+   *   * The app needs to be active
+   *   * The latest message from someone else is newer than the last read message
+   */
+  useEffect(() => {
+    if (!isActive || !latestOtherPersonMessageId) return
+    if (!lastReadMessageId || latestOtherPersonMessageId > lastReadMessageId) {
+      markRead(true, {
+        onSuccess: () => {
+          setLastReadMessageId(latestOtherPersonMessageId)
+        },
+      })
+    }
+  }, [isActive, latestOtherPersonMessageId, lastReadMessageId, markRead])
+}

package/src/navigation/index.tsx

@@ -128,6 +128,13 @@ export const ChatStack = createNativeStackNavigator({
       screen: ConversationScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderBackButton
+            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
+            onPress={() => navigation.getParent()?.goBack()}
+            {...props}
+          />
+        ),
         headerLeft: props => (
           <HeaderBackButton
             displayMode="minimal"

package/src/screens/conversation_screen.tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
@@ -28,7 +27,9 @@ import {
   MemberDisabledRepliesBanner,
 } from '../components/conversation/disabled_replies_banners'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
+import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
+import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 
 type ConversationRouteProps = {
   conversation_id: number
@@ -48,8 +49,10 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
   })
+  useConversationJoltEvents({ conversationId: conversation_id })
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
+  useMarkLatestMessageRead({ conversation, messages })
   const messagesWithSeparators = groupMessages(messages)
   const noMessages = messagesWithSeparators.length === 0
 
@@ -70,6 +73,16 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
     navigation.setOptions({ headerTitle, title: conversation?.title })
   }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])
 
+  if (!conversation || conversation.deleted) {
+    return (
+      <View style={styles.container}>
+        <Text variant="plain" style={styles.deletedAlert}>
+          This conversation has been deleted.
+        </Text>
+      </View>
+    )
+  }
+
   return (
     <View style={styles.container}>
       <KeyboardView>
@@ -93,6 +106,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                   {...item}
                   canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
                   conversation_id={conversation_id}
+                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
                 />
               )
             }}
@@ -209,13 +223,15 @@ const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
   return (
     <PlatformPressable
       style={styles.container}
-      onPress={() =>
+      onPress={() => {
+        if (conversation.deleted) return
+
         navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })
-      }
+      }}
     >
       <View style={styles.titleWrapper}>
         <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>
-        <Icon name="general.downChevron" size={12} />
+        {!conversation.deleted && <Icon name="general.downChevron" size={12} />}
       </View>
       <Badge
         variant="metaSubtle"
@@ -264,6 +280,10 @@ const useStyles = () => {
       gap: 12,
       paddingVertical: 12,
     },
+    deletedAlert: {
+      textAlign: 'center',
+      padding: 16,
+    },
   })
 }
 

package/src/types/datetime-fmt.d.ts

@@ -0,0 +1,20 @@
+type DateProps = string | number | Date
+
+type options = Partial<{
+  dateFirst: boolean
+  hour12: boolean
+  timeZone: string
+  showTimeZone: 'automatic' | boolean // 'automatic'/true/false
+  style: string
+  year: boolean
+  yearSeparator: string
+  truncateSameMonth: boolean
+  truncateSameYear: boolean
+  anchorDate: Date // very optional - only used to anchor relative dates from a date other than `moment()` (current datetime), primarily for tests
+}>
+
+declare module '@planningcenter/datetime-fmt' {
+  export const datetime: (d: DateProps, opts: options) => string
+  export const date: (d: DateProps, opts: options) => string
+  export const time: (d: DateProps, opts?: options) => string
+}

package/src/types/resources/conversation.ts

@@ -6,6 +6,9 @@ export interface ConversationResource {
   type: 'Conversation'
   id: number
   badges?: ConversationBadgeResource[]
+  conversationMembership?: {
+    lastReadMessageSortKey: string
+  }
   createdAt: string
   deleted?: boolean
   groups?: GroupResource[]
@@ -14,6 +17,7 @@ export interface ConversationResource {
   lastMessageAuthorName?: string
   lastMessageCreatedAt?: string
   lastMessageTextPreview?: string
+  latestReadMessageSortKey?: string
   memberAbility?: MemberAbilityResource
   muted: boolean
   repliesDisabled: boolean

package/src/utils/date.ts

@@ -1,8 +1,7 @@
-// @ts-expect-error
-import { date as formatDate } from '@planningcenter/datetime-fmt'
+import { date as formatDate, time as formatTime } from '@planningcenter/datetime-fmt'
 import moment from 'moment-timezone'
 
-type DateProps = string | number | Date
+export type DateProps = string | number | Date
 
 export function formatDatePreview(date?: DateProps) {
   if (!date) return ''
@@ -34,3 +33,31 @@ export function getRelativeDateStatus(date: DateProps) {
 
   return { isToday, isThisWeek, isThisYear }
 }
+
+export function relativeDateTime(dateTimeString: string): string {
+  const date = new Date(dateTimeString)
+  const now = new Date()
+
+  const isToday = date.toDateString() === now.toDateString()
+  const isThisYear = date.getFullYear() === now.getFullYear()
+
+  if (isToday) {
+    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true })
+  } else if (isThisYear) {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  } else {
+    return date.toLocaleDateString('en-US')
+  }
+}
+
+export function relativeTime(date: DateProps): string {
+  const now = moment()
+  const then = moment(date)
+  const duration = moment.duration(now.diff(then))
+
+  if (duration.asDays() < 1) {
+    return then.fromNow()
+  } else {
+    return formatTime(date)
+  }
+}