@planningcenter/chat-react-native 3.2.0-rc.9 → 3.3.0

package/src/components/conversation/message_form.tsx

@@ -1,5 +1,5 @@
 import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
 import { IconButton, Text } from '../../components'
 import { useTheme } from '../../hooks'
@@ -7,6 +7,13 @@ import { ConversationResource } from '../../types'
 import { useMessageCreate } from '../../hooks/use_message_create'
 import { ConversationScreenProps } from '../../screens/conversation_screen'
 import { ChatContext } from '../../contexts/chat_context'
+import { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
+import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
+import {
+  DenormalizedAttachmentResourceForCreate,
+  DenormalizedMessageAttachmentResourceForCreate,
+} from '../../types/resources/denormalized_attachment_resource'
+import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -20,7 +27,16 @@ interface MessagesFormRootProps extends ViewProps {
   conversation: ConversationResource
 }
 
-const MessageFormContext = React.createContext({
+const MessageFormContext = React.createContext<{
+  text: string
+  setText: (text: string) => void
+  onSubmit: () => void
+  disabled: boolean
+  canGiphy: boolean
+  usingGiphy: boolean
+  setUsingGiphy: (usingGiphy: boolean) => void
+  attachmentUploader?: ReturnType<typeof useAttachmentUploader>
+}>({
   text: '',
   setText: (_text: string) => {},
   onSubmit: () => {},
@@ -38,7 +54,25 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   const [usingGiphy, setUsingGiphy] = useState(false)
   const navigation = useNavigation()
   const route = useRoute() as ConversationScreenProps['route']
-  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })
+  const {
+    status,
+    isPending,
+    reset: resetMutation,
+    mutate,
+  } = useMessageCreate({
+    conversationId: conversation.id,
+  })
+  const attachmentUploader = useAttachmentUploader({
+    conversationId: conversation.id,
+  })
+  const resetAttachmentUploader = attachmentUploader.reset
+
+  const reset = useCallback(() => {
+    resetAttachmentUploader()
+    resetMutation()
+    setText('')
+    setUsingGiphy(false)
+  }, [resetAttachmentUploader, resetMutation])
 
   useEffect(() => {
     if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
@@ -50,7 +84,6 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   useEffect(() => {
     switch (status) {
       case 'success':
-        setText('')
         reset()
         break
     }
@@ -58,15 +91,16 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
 
   useEffect(() => {
     if (route.params.clear_input) {
-      setText('')
-      setUsingGiphy(false)
+      reset()
       navigation.setParams({ ...route.params, clear_input: false })
     }
-  }, [navigation, route.params])
+  }, [reset, navigation, route.params])
 
   const canSubmit = (() => {
     if (isPending) return false
+    if (attachmentUploader?.pendingUploads) return false
     if (text.length > 0) return true
+    if (attachmentUploader?.attachments?.length) return true
     return false
   })()
   const disabled = !canSubmit
@@ -81,7 +115,16 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
         search_term: text,
       })
     } else {
-      mutate({ text })
+      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []
+      if (attachmentUploader?.attachmentIds) {
+        attachmentsForSubmit = attachmentUploader.attachmentIds.map(
+          (id: string): DenormalizedMessageAttachmentResourceForCreate => ({
+            type: 'MessageAttachment',
+            id,
+          })
+        )
+      }
+      mutate({ text, attachments: attachmentsForSubmit })
     }
   }
 
@@ -95,6 +138,7 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
         canGiphy,
         usingGiphy,
         setUsingGiphy,
+        attachmentUploader,
       }}
     >
       <View style={styles.textInputContainer}>{children}</View>
@@ -102,25 +146,63 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   )
 }
 
+function MessageFormAttachments() {
+  const styles = useMessageFormStyles()
+  const { attachmentUploader } = React.useContext(MessageFormContext)
+  const numberOfAttachments = attachmentUploader?.attachments?.length || 0
+  const attachments = attachmentUploader?.attachments || []
+
+  if (numberOfAttachments === 0) {
+    return null
+  }
+
+  return (
+    <View style={styles.messageFormAttachments}>
+      {attachments.map(attachment => {
+        return (
+          <MessageFormAttachmentImage
+            key={attachment.file.uri}
+            uri={attachment.file.uri}
+            alt={attachment.file.name}
+            status={attachment.status}
+            width={attachment.file.width}
+            height={attachment.file.height}
+            removeAttachment={() => {
+              attachmentUploader?.removeAttachment(attachment)
+            }}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
 function MessageFormInput() {
   const styles = useMessageFormStyles()
-  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)
+  const { text, setText, onSubmit, usingGiphy, attachmentUploader } =
+    React.useContext(MessageFormContext)
+  const attachmentError = attachmentUploader?.errorMessage
 
   return (
-    <View style={styles.textInput}>
-      {usingGiphy ? (
-        <View style={styles.giphyBadge}>
-          <Text>/Giphy</Text>
-        </View>
-      ) : null}
-
-      <TextInput
-        aria-disabled={true}
-        placeholder="Send a message"
-        onChangeText={setText}
-        value={text}
-        onSubmitEditing={onSubmit}
-      />
+    <View style={styles.textInputBoundary}>
+      <MessageFormAttachments />
+      <View style={styles.textInput}>
+        {usingGiphy ? (
+          <View style={styles.giphyBadge}>
+            <Text>/Giphy</Text>
+          </View>
+        ) : null}
+
+        <TextInput
+          aria-disabled={true}
+          placeholder="Send a message"
+          onChangeText={setText}
+          value={text}
+          onSubmitEditing={onSubmit}
+        />
+      </View>
+
+      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
     </View>
   )
 }
@@ -143,19 +225,82 @@ function MessageFormSubmitBtn() {
 }
 
 function MessageFormAttachmentPicker() {
-  const { usingGiphy } = React.useContext(MessageFormContext)
+  const styles = useMessageFormStyles()
+  const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)
+  const [isOpen, setIsOpen] = useState(false)
+
+  function uploadImagePickerResult(result: ImagePickerResult) {
+    if (result.canceled) {
+      return
+    }
+
+    const filteredAssets = result.assets
+      .filter(asset => {
+        return asset.fileSize && asset.fileName && asset.mimeType
+      })
+      .map(asset => {
+        return {
+          uri: asset.uri,
+          name: asset.fileName as string,
+          type: asset.mimeType as string,
+          size: asset.fileSize as number,
+          height: asset.height,
+          width: asset.width,
+        }
+      })
+
+    attachmentUploader?.handleFilesAttached(filteredAssets)
+  }
+
+  const openCamera = async () => {
+    setIsOpen(false)
+    let result = await ImagePicker.openCameraAsync()
+    if (!result.canceled) {
+      uploadImagePickerResult(result)
+    }
+  }
+
+  const pickImage = async () => {
+    setIsOpen(false)
+    let result = await ImagePicker.openImageLibraryAsync()
+    if (!result.canceled) {
+      uploadImagePickerResult(result)
+    }
+  }
 
   if (usingGiphy) {
     return null
   }
 
   return (
-    <IconButton
-      accessibilityLabel="Shazam"
-      size="md"
-      appearance="neutral"
-      name={'general.paperclip'}
-    />
+    // TODO: Design Pass
+    <View style={styles.attachmentPicker}>
+      {isOpen && (
+        <View style={styles.attachmentPickerButtons}>
+          <IconButton
+            accessibilityLabel="Take a photo"
+            size="md"
+            appearance="neutral"
+            name={'general.videoCamera'}
+            onPress={openCamera}
+          />
+          <IconButton
+            accessibilityLabel="Choose a photo"
+            size="md"
+            appearance="neutral"
+            name={'churchCenter.photosIos'}
+            onPress={pickImage}
+          />
+        </View>
+      )}
+      <IconButton
+        accessibilityLabel="File Menu"
+        size="md"
+        appearance="neutral"
+        name={'general.outlinedPlusCircle'}
+        onPress={() => setIsOpen(!isOpen)}
+      />
+    </View>
   )
 }
 
@@ -203,13 +348,16 @@ const useMessageFormStyles = () => {
       alignItems: 'center',
       gap: 12,
     },
-    textInput: {
+    textInputBoundary: {
       borderRadius: 24,
       borderWidth: 1,
       padding: 12,
       paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
+      gap: 12,
+    },
+    textInput: {
       flexDirection: 'row',
       gap: 12,
     },
@@ -224,5 +372,23 @@ const useMessageFormStyles = () => {
       height: 36,
       width: 36,
     },
+    attachmentPicker: {
+      position: 'relative',
+    },
+    attachmentPickerButtons: {
+      position: 'absolute',
+      left: 0,
+      bottom: 40,
+      zIndex: 10,
+      gap: 16,
+    },
+    messageFormAttachments: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    inputErrorMessage: {
+      color: theme.colors.statusErrorText,
+      fontSize: 14,
+    },
   })
 }

package/src/components/conversations/conversation_actions.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
+import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
@@ -22,7 +22,7 @@ export function ConversationActions({
   children: ReactNode
   conversation: ConversationResource
   onPress: () => void
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 }) {
   const swipeableRef = useRef<SwipeableMethods>(null)
   const styles = useStyles()

package/src/components/conversations/conversation_preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, ViewStyle } from 'react-native'
 import { ConversationResource } from '../../types'
 import { AvatarGroup, Heading, Text, Badge } from '../display'
 import { formatDatePreview } from '../../utils/date'
@@ -12,12 +12,14 @@ interface ConversationPreviewProps {
   conversation: ConversationResource
   onPress: () => void
   showBadges?: boolean
+  style?: ViewStyle
 }
 
 export const ConversationPreview = ({
   conversation,
   onPress,
   showBadges = true,
+  style,
 }: ConversationPreviewProps) => {
   const styles = useStyles()
   const {
@@ -32,7 +34,11 @@ export const ConversationPreview = ({
   } = conversation
 
   return (
-    <ConversationActions conversation={conversation} style={styles.previewRow} onPress={onPress}>
+    <ConversationActions
+      conversation={conversation}
+      style={[styles.previewRow, style]}
+      onPress={onPress}
+    >
       <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} />
       <View style={styles.conversationBody}>
         <Heading numberOfLines={1} variant="h3" style={styles.title}>

package/src/components/display/action_button.tsx

@@ -8,11 +8,13 @@ import { Text } from './text'
 
 export const ActionButton = ({
   visible = true,
+  disabled = false,
   onPress,
   title,
   infoText,
 }: {
   visible?: boolean
+  disabled?: boolean
   onPress: () => void
   title: string
   infoText?: string
@@ -32,11 +34,11 @@ export const ActionButton = ({
   return (
     <Animated.View style={styles.container}>
       {Boolean(infoText) && (
-        <Text style={styles.infoText} variant="tertiary">
+        <Text style={styles.infoText} variant="footnote">
           {infoText}
         </Text>
       )}
-      <Button variant="fill" size="lg" onPress={onPress} title={title} />
+      <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} />
     </Animated.View>
   )
 }
@@ -56,7 +58,6 @@ const useStyles = () => {
     },
     infoText: {
       textAlign: 'center',
-      color: colors.textColorDefaultSecondary,
     },
   })
 }

package/src/components/display/banner.tsx

@@ -3,6 +3,7 @@ import BannerPrimitive, {
   type BannerStatusIconProps,
   type BannerRootProps,
 } from '../primitive/banner_primitive'
+import { ViewStyle } from 'react-native'
 
 type descriptionUnion = string | ReactElement | undefined
 
@@ -29,6 +30,10 @@ export interface BannerProps {
    * Hides the status icon. By default, the status icon is shown.
    */
   showIcon?: boolean
+  /**
+   * Adds a style to the banner.
+   */
+  style?: ViewStyle
 }
 
 export function Banner({
@@ -37,12 +42,13 @@ export function Banner({
   heading,
   iconName,
   showIcon = true,
+  style,
 }: BannerProps) {
   if (!description && !heading) return null
 
   return (
     <BannerPrimitive.Root appearance={appearance}>
-      <BannerPrimitive.StaticLayout>
+      <BannerPrimitive.StaticLayout style={style}>
         {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}
         <BannerPrimitive.Content>
           {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}

package/src/components/display/banner_collapsible.tsx

@@ -20,6 +20,7 @@ export function BannerCollapsible({
   heading,
   iconName,
   showIcon = true,
+  style,
 }: BannerCollapsibleProps) {
   const [expanded, setExpanded] = React.useState(false)
 
@@ -31,7 +32,11 @@ export function BannerCollapsible({
 
   return (
     <BannerPrimitive.Root appearance={appearance}>
-      <BannerPrimitive.CollapsibleLayout onPress={toggleCollapsible} expanded={expanded}>
+      <BannerPrimitive.CollapsibleLayout
+        onPress={toggleCollapsible}
+        expanded={expanded}
+        style={style}
+      >
         {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}
         <BannerPrimitive.Content>
           {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}

package/src/components/display/child_notice.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { MemberResource } from '../../types'
 import { BannerCollapsible } from './banner_collapsible'
 import BannerPrimitive from '../primitive/banner_primitive'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, type ViewStyle } from 'react-native'
 import { Avatar } from './avatar'
 import { platformFontWeightMedium, pluralize } from '../../utils'
 import { Text } from './text'
@@ -13,14 +13,20 @@ import { Text } from './text'
 
 interface ChildNoticeProps {
   childMembers: MemberResource[]
+  style?: ViewStyle
 }
 
-export function ChildNotice({ childMembers }: ChildNoticeProps) {
+export function ChildNotice({ childMembers, style }: ChildNoticeProps) {
   const styles = useStyles()
   const heading = `${pluralize(childMembers.length, 'member')} under age 13`
 
   return (
-    <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading}>
+    <BannerCollapsible
+      appearance="warning"
+      iconName="general.shieldExclamation"
+      heading={heading}
+      style={style}
+    >
       <BannerPrimitive.Text>
         Under age members cannot chat. They won't see conversations or notifications.
       </BannerPrimitive.Text>

package/src/components/group_conversation_list.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { useConversations } from '../hooks/use_conversations'
+import { ConversationPreview } from './conversations/conversation_preview'
+import { ConversationRequestArgs } from '../utils/request/conversation'
+import { useTheme } from '../hooks'
+import { Icon, Text } from './display'
+
+interface GroupConversationsProps extends Partial<ConversationRequestArgs> {
+  limit?: number
+  onConversationPress: (conversation: any) => void
+  style?: ViewStyle
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  ListOverflowFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+}
+
+/**
+ * GroupConversations is a component that displays a list of conversations
+ * for a specific group.
+ *
+ * Originally designed for use in CCA.
+ */
+export const GroupConversations = ({
+  limit,
+  onConversationPress,
+  style,
+  ListHeaderComponent,
+  ListOverflowFooterComponent,
+  chat_group_graph_id,
+}: GroupConversationsProps) => {
+  const styles = useStyles()
+  const { conversations = [] } = useConversations({
+    chat_group_graph_id,
+    group_source_app_name: undefined,
+  })
+
+  return (
+    <View style={style}>
+      <>{ListHeaderComponent}</>
+      {conversations.length === 0 && (
+        <View style={styles.listEmpty}>
+          <Icon size={24} name="general.textMessage" style={styles.listEmptyIcon} />
+          <Text variant="secondary">No conversations found</Text>
+        </View>
+      )}
+      {conversations.slice(0, limit).map(conversation => (
+        <ConversationPreview
+          style={styles.conversation}
+          key={conversation.id}
+          showBadges={false}
+          conversation={conversation}
+          onPress={() => onConversationPress(conversation)}
+        />
+      ))}
+      {conversations.length > (limit || 0) && <>{ListOverflowFooterComponent}</>}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    constainer: {},
+    conversation: {
+      borderBottomWidth: 0,
+    },
+    listItem: { color: colors.fillColorNeutral020 },
+    listEmpty: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 16,
+      gap: 8,
+    },
+    listEmptyIcon: {
+      color: colors.fillColorNeutral020,
+    },
+  })
+}

package/src/components/index.tsx

@@ -1,3 +1,4 @@
 export * from './conversations/conversations'
 export * from './page/error_boundary'
 export * from './display'
+export * from './group_conversation_list'

package/src/components/primitive/banner_primitive.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, FC, ReactNode, useContext } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, StyleSheet, View, ViewStyle } from 'react-native'
 import {
   useStatusColorAppearanceMap,
   type StatusAppearanceUnion,
@@ -94,13 +94,14 @@ BannerRoot.displayName = 'Banner.Root'
 
 interface BannerStaticLayoutProps {
   children: ReactNode
+  style?: ViewStyle
 }
 
-function BannerStaticLayout({ children }: BannerStaticLayoutProps) {
+function BannerStaticLayout({ children, style }: BannerStaticLayoutProps) {
   const { appearance } = useBannerContext()
   const styles = useStyles({ appearance })
 
-  return <View style={styles.staticLayout}>{children}</View>
+  return <View style={[styles.staticLayout, style]}>{children}</View>
 }
 
 BannerStaticLayout.displayName = 'Banner.StaticLayout'
@@ -113,9 +114,15 @@ interface BannerCollapsibleLayoutProps {
   children: ReactNode
   expanded?: boolean
   onPress?: () => void
+  style?: ViewStyle
 }
 
-function BannerCollapsibleLayout({ children, expanded, onPress }: BannerCollapsibleLayoutProps) {
+function BannerCollapsibleLayout({
+  children,
+  expanded,
+  onPress,
+  style,
+}: BannerCollapsibleLayoutProps) {
   const { appearance = 'neutral' } = useBannerContext()
   const styles = useStyles({ appearance })
   const iconName = expanded ? 'general.upCaret' : 'general.downCaret'
@@ -127,7 +134,7 @@ function BannerCollapsibleLayout({ children, expanded, onPress }: BannerCollapsi
   return (
     <Pressable
       onPress={onPress}
-      style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle]}
+      style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle, style]}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       accessibilityState={{ expanded }}
       accessibilityRole="button"

package/src/contexts/api_provider.tsx

@@ -17,7 +17,7 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
   return apiClient[app].get({ url, data, headers })
 }
 
-export const queryClient = new QueryClient({
+export const chatQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
@@ -35,10 +35,10 @@ export function ApiProvider({ children }: ViewProps) {
   useEffect(() => {
     if (!sessionChanged) return
 
-    queryClient.clear()
+    chatQueryClient.clear()
   }, [sessionChanged])
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  return <QueryClientProvider client={chatQueryClient}>{children}</QueryClientProvider>
 }
 
 function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): boolean {