@planningcenter/chat-react-native 4.4.1-qa-staging.5 → 4.4.1-qa-staging.7

package/src/components/conversation/message.tsx

@@ -30,6 +30,7 @@ import { Haptic } from '../../utils/native_adapters'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  MESSAGE_BACKGROUND_OUTSET,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import { ComponentErrorBoundary } from '../page/component_error_boundary'
@@ -225,7 +226,14 @@ export const Message = memo(function MessageRow({
       onAccessibilityAction={isReplyRootMessage ? handleAccessibilityAction : undefined}
       disabled={isDeletedReplyRootMessage || isDeleting}
     >
-      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+      <View style={styles.message}>
+        <Animated.View
+          style={[
+            styles.background,
+            { bottom: messageBottomMargin - MESSAGE_BACKGROUND_OUTSET },
+            animatedBackgroundColor,
+          ]}
+        />
         {!message.mine && (
           <View>
             {renderAuthor ? (
@@ -348,7 +356,7 @@ export const Message = memo(function MessageRow({
         {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
-      </Animated.View>
+      </View>
     </Pressable>
   )
 })
@@ -368,6 +376,12 @@ const useMessageStyles = (mine: boolean, isDeleting: boolean) => {
       paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
       opacity: isDeleting ? 0.5 : 1,
     },
+    background: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: -MESSAGE_BACKGROUND_OUTSET,
+    },
     messageContent: {
       flex: 1,
       gap: 4,

package/src/components/conversation/reply_shadow_message.tsx

@@ -24,11 +24,14 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MAX_FONT_SIZE_MULTIPLIER,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  MESSAGE_BACKGROUND_OUTSET,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
+const SPACE_BELOW_MESSAGE = 12
+
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
   conversation_id: number
@@ -104,7 +107,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
-      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+      <View style={styles.message}>
+        <Animated.View style={[styles.background, animatedBackgroundColor]} />
         {!message.mine && (
           <View>
             <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
@@ -145,7 +149,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
         {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
-      </Animated.View>
+      </View>
     </Pressable>
   )
 }
@@ -287,10 +291,17 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
       flexDirection: mine ? 'row-reverse' : 'row',
       paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
     },
+    background: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: -MESSAGE_BACKGROUND_OUTSET,
+      bottom: SPACE_BELOW_MESSAGE - MESSAGE_BACKGROUND_OUTSET,
+    },
     messageContent: {
       flex: 1,
       gap: 4,
-      marginBottom: 12,
+      marginBottom: SPACE_BELOW_MESSAGE,
     },
     avatarWrapper: {
       width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,

package/src/hooks/groups/use_group_members_for_new_conversation.ts

@@ -1,15 +1,14 @@
+import { keepPreviousData } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { MemberResource, ResourceObject } from '../../types'
 import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
+import { useApiPaginator } from '../use_api'
 import { useEnrichPeople } from '../use_enrich_people'
-import { useSuspensePaginator } from '../use_suspense_api'
 
-type UseSuspensePaginatorResult<T extends ResourceObject> = ReturnType<
-  typeof useSuspensePaginator<T>
->
+type UseApiPaginatorResult<T extends ResourceObject> = ReturnType<typeof useApiPaginator<T>>
 
 export type GroupMembersForNewConversationResult = Omit<
-  UseSuspensePaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
+  UseApiPaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
   'data'
 > & {
   data: MemberResource[]
@@ -24,19 +23,22 @@ export function useGroupMembersForNewConversation({
   id: number
   gender: string | null
 }) {
-  const response = useSuspensePaginator<GroupsGroupMemberResource>({
-    url: `/me/groups/${id}/memberships`,
-    data: {
-      perPage: 100,
-      include: ['person'],
-      fields: {
-        Membership: ['person, role'],
-        Person: ['avatar_url', 'name', 'first_name', 'last_name', 'child', 'gender'],
+  const response = useApiPaginator<GroupsGroupMemberResource>(
+    {
+      url: `/me/groups/${id}/memberships`,
+      data: {
+        perPage: 100,
+        include: ['person'],
+        fields: {
+          Membership: ['person, role'],
+          Person: ['avatar_url', 'name', 'first_name', 'last_name', 'child', 'gender'],
+        },
+        ...(gender ? { where: { gender } } : {}),
       },
-      ...(gender ? { where: { gender } } : {}),
+      app: 'groups',
     },
-    app: 'groups',
-  })
+    { throwOnError: true, placeholderData: keepPreviousData }
+  )
 
   const { data: memberships = [] } = response
   const personIds = useMemo(() => memberships.map(m => +m.person.id), [memberships])

package/src/hooks/use_api.ts

@@ -1,4 +1,4 @@
-import { InfiniteData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { InfiniteData, keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { useContext } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
@@ -17,6 +17,7 @@ export type ApiGetQueryOptions = {
   gcTime?: number
   enabled?: boolean
   throwOnError?: boolean | ((error: ResponseError) => boolean)
+  placeholderData?: typeof keepPreviousData
 }
 
 export const useApiGet = <T extends ResourceObject | ResourceObject[]>(

package/src/screens/conversation_new/components/groups_form.tsx

@@ -125,6 +125,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
         memberData={groupMemberships.adultMembers}
         loadingMore={groupMemberships.isFetchingNextPage}
         onEndReached={groupMemberships.fetchNextPage}
+        listEmptyText={groupMemberships.isLoading ? 'Loading members...' : undefined}
         FormContent={
           <FormContent
             group={group}

package/src/utils/styles.ts

@@ -6,6 +6,7 @@ export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers,
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
+export const MESSAGE_BACKGROUND_OUTSET = 2
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,