@planningcenter/chat-react-native 3.5.0-rc.0 → 3.5.0

package/src/screens/conversation_details_screen.tsx

@@ -21,7 +21,7 @@ import {
 } from 'react-native'
 import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
 import { Badge, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton } from '../components'
-import { useSuspenseGet, useTheme } from '../hooks'
+import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
   useConversationDelete,
@@ -45,6 +45,7 @@ enum SectionTypes {
   header,
   hidden,
   members,
+  loadingMembers,
   setting,
   view,
 }
@@ -52,6 +53,7 @@ enum SectionTypes {
 type SectionListData = Array<
   | DataItem<{ title: string }, SectionTypes.header>
   | DataItem<MemberResource, SectionTypes.members>
+  | DataItem<any, SectionTypes.loadingMembers>
   | DataItem<ViewProps, SectionTypes.view>
   | DataItem<SettingRowProps, SectionTypes.setting>
   | DataItem<any, SectionTypes.hidden>
@@ -91,7 +93,11 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
 
-  const { data: members } = useSuspenseGet<MemberResource[]>({
+  const {
+    data: members,
+    fetchNextPage: fetchNextPageOfMembers,
+    isFetchingNextPage: isLoadingMembers,
+  } = useSuspensePaginator<MemberResource>({
     url: `/me/conversations/${route.params.conversation_id}/members`,
     data: {
       include: ['person'],
@@ -120,6 +126,16 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     }
   })
 
+  const loadingMemberItems = isLoadingMembers
+    ? [
+        {
+          type: SectionTypes.loadingMembers,
+          data: {},
+          sectionInnerStyle: styles.sectionInnerFirstMember,
+        },
+      ]
+    : []
+
   const childMembers = members.filter(member => member.child)
   const hasChildren = childMembers.length > 0
 
@@ -267,6 +283,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       sectionInnerStyle: styles.sectionInnerChildNotice,
     },
     ...memberItems,
+    ...loadingMemberItems,
   ].filter(item => item.type !== SectionTypes.hidden)
 
   const headerIndices = listData
@@ -310,6 +327,18 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
                   <Person person={{ ...item.data }} />
                 </ListSection>
               )
+            case SectionTypes.loadingMembers:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Text>Loading more...</Text>
+                </ListSection>
+              )
             case SectionTypes.setting:
               return (
                 <ListSection
@@ -338,6 +367,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
               return null
           }
         }}
+        onEndReached={fetchNextPageOfMembers}
       />
     </View>
   )
@@ -408,9 +438,11 @@ function TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps)
         submitBehavior="blurAndSubmit"
       />
       {isEmpty && (
-        <Text variant="footnote" style={styles.inputValidationText}>
-          A title is required for your conversation.
-        </Text>
+        <View style={styles.inputValidationContainer}>
+          <Text variant="footnote" style={styles.inputValidationText}>
+            A title is required for your conversation.
+          </Text>
+        </View>
       )}
     </Pressable>
   )
@@ -561,12 +593,14 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     titleInputDisabled: {
       color: colors.textColorDefaultSecondary,
     },
-    inputValidationText: {
-      color: colors.statusErrorText,
+    inputValidationContainer: {
       paddingTop: 8,
       borderTopWidth: 1,
       borderColor: colors.borderColorStatusError,
     },
+    inputValidationText: {
+      color: colors.statusErrorText,
+    },
     settingRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',

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

@@ -7,11 +7,19 @@ import { useTheme } from '../../../hooks'
 
 interface FormListProps {
   memberData: MemberResource[]
+  loadingMore?: boolean
   FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
   listEmptyText?: string
+  onEndReached?: () => void
 }
 
-export const FormList = ({ memberData, FormContent, listEmptyText }: FormListProps) => {
+export const FormList = ({
+  memberData,
+  loadingMore,
+  FormContent,
+  listEmptyText,
+  onEndReached,
+}: FormListProps) => {
   const styles = useStyles()
 
   return (
@@ -19,9 +27,13 @@ export const FormList = ({ memberData, FormContent, listEmptyText }: FormListPro
       data={memberData}
       ListHeaderComponent={FormContent}
       renderItem={({ item }) => <Person person={item} style={styles.person} />}
+      ListFooterComponent={
+        loadingMore ? <Text style={styles.loadingMore}>Loading more...</Text> : null
+      }
       keyExtractor={item => item.id.toString()}
       estimatedItemSize={45}
       ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
+      onEndReached={onEndReached}
     />
   )
 }
@@ -50,6 +62,10 @@ const useStyles = () => {
       paddingHorizontal: 16,
       paddingBottom: 12,
     },
+    loadingMore: {
+      paddingHorizontal: 16,
+      paddingBottom: 12,
+    },
     emptyTextContainer: {
       alignItems: 'center',
       justifyContent: 'center',

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

@@ -58,6 +58,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     <KeyboardView>
       <FormList
         memberData={groupMemberships.adultMembers}
+        loadingMore={groupMemberships.isFetchingNextPage}
+        onEndReached={groupMemberships.fetchNextPage}
         FormContent={
           <FormContent
             group={group}
@@ -97,12 +99,9 @@ function FormContent({ group, title, setTitle, groupMemberships }: FormContentPr
 
   const childMembers = groupMemberships.childMembers
   const hasChildren = childMembers.length > 0
-  const adultCount = groupMemberships.adultMembers.length
-  const memberCount = isLeader ? membershipsCount : adultCount
-  const memberHeaderLabel = `${pluralize(memberCount, 'member')} selected`
+  const memberHeaderLabel = `${pluralize(membershipsCount, 'member')} selected`
 
   const showMemberError = groupMemberships.isError
-  const showChildNotice = hasChildren && isLeader
 
   return (
     <View style={styles.formContent}>
@@ -124,7 +123,9 @@ function FormContent({ group, title, setTitle, groupMemberships }: FormContentPr
       <Divider />
       <View style={styles.memberSection}>
         <Heading variant="h3">{memberHeaderLabel}</Heading>
-        {showChildNotice && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {hasChildren && (
+          <ChildNotice childMembers={childMembers} showMembers={isLeader} style={styles.banner} />
+        )}
         {showMemberError && (
           <Banner
             appearance="error"

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

@@ -162,7 +162,9 @@ function FormContent({
       <Divider />
       <View style={styles.memberSection}>
         <Heading variant="h3">{pluralize(memberCount, 'member')} selected</Heading>
-        {hasChildren && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {hasChildren && (
+          <ChildNotice childMembers={childMembers} showMembers={true} style={styles.banner} />
+        )}
         {isMemberError && (
           <Banner
             appearance="error"

package/src/screens/conversation_screen.tsx

@@ -55,6 +55,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { repliesDisabled, memberAbility } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
+  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
 
   // Seems to be necessary to define this way so we get the route picked up
   const headerTitle = useCallback(
@@ -70,7 +71,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
 
   return (
     <View style={styles.container}>
-      <KeyboardView style={styles.keyboardView}>
+      <KeyboardView>
         {noMessages ? (
           <EmptyConversationBlankState />
         ) : (
@@ -86,7 +87,13 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                 return <InlineDateSeparator {...item} />
               }
 
-              return <Message {...item} conversation_id={conversation_id} />
+              return (
+                <Message
+                  {...item}
+                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+                  conversation_id={conversation_id}
+                />
+              )
             }}
             onEndReached={() => fetchNextPage()}
           />
@@ -252,9 +259,6 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
-    keyboardView: {
-      flex: 1,
-    },
     listContainer: {
       gap: 12,
       paddingHorizontal: 16,

package/src/screens/conversations/conversations_screen.tsx

@@ -1,7 +1,7 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Conversations } from '../../components'
+import { Conversations, TextButton } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
@@ -54,6 +54,10 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
     })
   }
 
+  const reportABug = () => {
+    return navigation.navigate('BugReport')
+  }
+
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params}>
@@ -63,6 +67,12 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
         visible={canCreateConversations}
         title="New conversation"
         onPress={handleNewConversationNavigation}
+        buttonIconNameLeft="churchCenter.signups"
+        secondaryButton={
+          <TextButton variant="tertiary" onPress={reportABug}>
+            Report a bug
+          </TextButton>
+        }
       />
     </View>
   )

package/src/screens/design_system_screen.tsx

@@ -8,6 +8,7 @@ import {
   Badge,
   Banner,
   BannerCollapsible,
+  BlankState,
   Button,
   ToggleButton,
   Heading,
@@ -20,6 +21,7 @@ import {
   Text,
   TextButton,
   TextInlineButton,
+  ImageAttachmentPreview,
 } from '../components/display'
 import {
   space,
@@ -28,7 +30,7 @@ import {
   platformFontWeightMedium,
 } from '../utils'
 import BannerPrimitive from '../components/primitive/banner_primitive'
-import { BlankState } from '../components/display/blank_state'
+import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 
 // =================================
 // ====== Docs Utils ===============
@@ -696,9 +698,41 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <Image source={{ uri: URL.image }} style={styles.image} alt="" />
         </Row>
       </Group>
+      <Group
+        title="ImageAttachmentPreview"
+        description="Displays an image attachment in different sizes with a close button. It takes a `fileName` prop that gets passed to the image's `alt` attribute."
+      >
+        <Row>
+          <ImageAttachmentPreview
+            size="sm"
+            uri={URL.image}
+            fileName="mountains.jpg"
+            onClosePress={buttonPress}
+          />
+          <ImageAttachmentPreview
+            uri={URL.image}
+            fileName="mountains.jpg"
+            onClosePress={buttonPress}
+          />
+          <ImageAttachmentPreview
+            uri={URL.broken}
+            fileName="broken.jpg"
+            onClosePress={buttonPress}
+          />
+        </Row>
+      </Group>
+      <Group
+        title="VideoAttachmentPreview"
+        description="Displays an video attachment with a close button. It takes a `name` prop and an optional duration."
+      >
+        <Row>
+          <VideoAttachmentPreview name="mountains.mp4" onClosePress={buttonPress} />
+          <VideoAttachmentPreview name="mountains.mp4" duration="1:20" onClosePress={buttonPress} />
+        </Row>
+      </Group>
       <Group
         title="Avatar"
-        description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'
+        description='Displays the profile image for a user in different sizes and has a loading spinner. Can optionally show an online/offline "presence" indicator. Fallback condition and icon are optionally configurable.'
       >
         <Row>
           <Avatar sourceUri={URL.broken} />
@@ -710,10 +744,21 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback} />
           <Avatar presence="offline" sourceUri={URL.avatar} />
         </Row>
+        <Row>
+          <Avatar sourceUri="" />
+          <Avatar sourceUri="" size="md" />
+          <Avatar sourceUri="" size="sm" />
+          <Avatar
+            sourceUri={URL.broken}
+            showFallback={true}
+            fallbackIconName="general.star"
+            size="sm"
+          />
+        </Row>
       </Group>
       <Group
         title="AvatarGroup"
-        description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load."
+        description="Shows 1-4 images in a grid at different sizes. Loading spinner shows until all images successfully load. Fallback condition and icon are optionally configurable."
       >
         <Row>
           <AvatarGroup sourceUris={[URL.broken]} />
@@ -723,6 +768,26 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <AvatarGroup sourceUris={URL.three_avatars} />
           <AvatarGroup sourceUris={URL.four_avatars} />
         </Row>
+        <Row>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="general.person" />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="people.noTextMessage"
+          />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="general.star"
+            size="md"
+          />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="general.heart"
+            size="sm"
+          />
+        </Row>
       </Group>
       <Group
         title="Icon"

package/src/types/resources/denormalized_attachment_resource.ts

@@ -82,8 +82,8 @@ export interface DenormalizedGiphyAttachmentResourceForCreate extends GenericAtt
 
 interface GiphyVariant {
   url: string
-  width: number
-  height: number
+  width: string
+  height: string
   size: string
   frames: string
 }

package/src/types/resources/member_ability.ts

@@ -2,6 +2,7 @@ export interface MemberAbilityResource {
   type: 'MemberAbility'
   canUpdate: boolean
   canDelete: boolean
+  canDeleteNonAuthoredMessages: boolean
   leader: boolean
   canReply: boolean
 }

package/src/utils/request/conversation.ts

@@ -1,8 +1,9 @@
+import { GraphId } from '../../types/resources/group_resource'
 import { GetRequest } from '../client/types'
 
 export interface ConversationRequestArgs {
   gids: string
-  chat_group_graph_id?: string
+  chat_group_graph_id?: GraphId
   group_source_app_name?: string
 }