@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.20

package/src/components/conversation/message_form.tsx

@@ -1,13 +1,12 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native'
-import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
-import React from 'react'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
+import React, { useContext, useEffect, useState } from 'react'
 import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
-import { IconButton } from '../../components'
+import { IconButton, Text } from '../../components'
 import { useTheme } from '../../hooks'
-import { useApiClient } from '../../hooks/use_api_client'
-import { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages'
-import { ApiCollection, ApiResource, ConversationResource, MessageResource } from '../../types'
-import { updateOrCreateRecordInPagesData } from '../../utils'
+import { ConversationResource } from '../../types'
+import { useMessageCreate } from '../../hooks/use_message_create'
+import { ConversationScreenProps } from '../../screens/conversation_screen'
+import { ChatContext } from '../../contexts/chat_context'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -26,51 +25,77 @@ const MessageFormContext = React.createContext({
   setText: (_text: string) => {},
   onSubmit: () => {},
   disabled: false,
+  canGiphy: false,
+  usingGiphy: false,
+  setUsingGiphy: (_usingGiphy: boolean) => {},
 })
 
 function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
+  const { giphyApiKey } = useContext(ChatContext)
+  const canGiphy = !!giphyApiKey
   const styles = useMessageFormStyles()
   const [text, setText] = React.useState('')
-  const apiClient = useApiClient()
-  const queryClient = useQueryClient()
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: async () => {
-      const requestParams = getMessagesRequestArgs({ conversation_id: conversation.id })
-      const fieldsWithValueJoined = Object.fromEntries(
-        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
-      )
-
-      return apiClient.chat.post<ApiResource<MessageResource>>({
-        url: `/me/conversations/${conversation.id}/messages`,
-        data: {
-          ...requestParams.data,
-          data: {
-            type: 'Message',
-            attributes: { text },
-          },
-          fields: fieldsWithValueJoined,
-        },
-      })
-    },
-    onSuccess: (result: ApiResource<MessageResource>) => {
-      const updatedMessage = result.data
-      type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({ conversation_id: conversation.id })
-
+  const [usingGiphy, setUsingGiphy] = useState(false)
+  const navigation = useNavigation()
+  const route = useRoute() as ConversationScreenProps['route']
+  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })
+
+  useEffect(() => {
+    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
+      setUsingGiphy(true)
       setText('')
-      queryClient.setQueryData<QueryData>(queryKey, data =>
-        updateOrCreateRecordInPagesData({
-          data,
-          record: updatedMessage,
-        })
-      )
-    },
-  })
+    }
+  }, [canGiphy, text, usingGiphy])
+
+  useEffect(() => {
+    switch (status) {
+      case 'success':
+        setText('')
+        reset()
+        break
+    }
+  }, [reset, status])
+
+  useEffect(() => {
+    if (route.params.clear_input) {
+      setText('')
+      setUsingGiphy(false)
+      navigation.setParams({ ...route.params, clear_input: false })
+    }
+  }, [navigation, route.params])
+
+  const canSubmit = (() => {
+    if (isPending) return false
+    if (text.length > 0) return true
+    return false
+  })()
+  const disabled = !canSubmit
+
+  const handleSubmit = () => {
+    if (!canSubmit) return
+
+    if (canGiphy && usingGiphy) {
+      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
+      navigation.navigate('SendGiphy', {
+        conversation_id: conversation.id,
+        search_term: text,
+      })
+    } else {
+      mutate({ text })
+    }
+  }
 
   return (
     <MessageFormContext.Provider
-      value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}
+      value={{
+        text,
+        setText,
+        onSubmit: handleSubmit,
+        disabled,
+        canGiphy,
+        usingGiphy,
+        setUsingGiphy,
+      }}
     >
       <View style={styles.textInputContainer}>{children}</View>
     </MessageFormContext.Provider>
@@ -79,38 +104,51 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
 
 function MessageFormInput() {
   const styles = useMessageFormStyles()
-  const { text, setText, onSubmit } = React.useContext(MessageFormContext)
+  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
-    <TextInput
-      aria-disabled={true}
-      placeholder="Send a message"
-      onChangeText={setText}
-      value={text}
-      style={styles.textInput}
-      onSubmitEditing={onSubmit}
-    />
+    <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>
   )
 }
 
 function MessageFormSubmitBtn() {
   const styles = useMessageFormStyles()
-  const { onSubmit, disabled } = React.useContext(MessageFormContext)
+  const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
     <IconButton
       disabled={disabled}
-      accessibilityLabel="Send message"
+      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}
       size="md"
       appearance="neutral"
       style={styles.textInputSend}
-      name={'general.upArrow'}
+      name={usingGiphy ? 'general.search' : 'general.upArrow'}
       onPress={onSubmit}
     />
   )
 }
 
 function MessageFormAttachmentPicker() {
+  const { usingGiphy } = React.useContext(MessageFormContext)
+
+  if (usingGiphy) {
+    return null
+  }
+
   return (
     <IconButton
       accessibilityLabel="Shazam"
@@ -122,8 +160,32 @@ function MessageFormAttachmentPicker() {
 }
 
 function MessageFormCommands() {
+  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
+
+  if (!canGiphy) {
+    return null
+  }
+
+  if (usingGiphy) {
+    return (
+      <IconButton
+        accessibilityLabel="Exit Giphy Search"
+        size="md"
+        appearance="neutral"
+        name={'general.x'}
+        onPress={() => setUsingGiphy(false)}
+      />
+    )
+  }
+
   return (
-    <IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.bolt'} />
+    <IconButton
+      accessibilityLabel="Search Giphy"
+      size="md"
+      appearance="neutral"
+      name={'general.bolt'}
+      onPress={() => setUsingGiphy(true)}
+    />
   )
 }
 
@@ -148,12 +210,19 @@ const useMessageFormStyles = () => {
       paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
+      flexDirection: 'row',
+      gap: 12,
+    },
+    giphyBadge: {
+      backgroundColor: theme.colors.fillColorNeutral050Base,
+      borderRadius: 24,
+      padding: 8,
+      paddingHorizontal: 12,
     },
     textInputSend: {
       borderRadius: 24,
       height: 36,
       width: 36,
-      backgroundColor: theme.colors.fillColorNeutral040,
     },
   })
 }

package/src/components/conversations/action_toggle_button.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Pressable, StyleSheet, type PressableProps } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { Pressable, type PressableProps } from 'react-native-gesture-handler'
 import { Icon, IconString, Spinner, Text } from '../display'
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
 import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'

package/src/components/conversations/conversation_actions.tsx

@@ -1,13 +1,17 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { Platform, View, StyleSheet, ViewStyle, Pressable } from 'react-native'
+import { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
+import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { ActionToggleButton } from './action_toggle_button'
-import { tokens } from '../../vendor/tapestry/tokens'
+import {
+  useConversationsMarkRead,
+  useConversationsMute,
+} from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
-import { useConversationActionsContext } from '../../contexts/swipeable_active_conversation'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { ActionToggleButton } from './action_toggle_button'
 
 export function ConversationActions({
   children,
@@ -22,7 +26,7 @@ export function ConversationActions({
 }) {
   const swipeableRef = useRef<SwipeableMethods>(null)
   const styles = useStyles()
-  const { activeConversationId, setActiveConversationId } = useConversationActionsContext()
+  const { activeConversationId, setActiveConversationId } = useConversationsContext()
   const [disabled, setDisabled] = useState(false)
   const overshootLeft = Platform.OS === 'ios'
 
@@ -75,23 +79,45 @@ interface LeftActionsProps {
 
 function LeftActions({ conversation, onClose }: LeftActionsProps) {
   const styles = useStyles()
-  const [muted, setMuted] = useState(conversation.muted)
+  const emptyConversation = conversation.lastMessageCreatedAt === null
+
+  const muteToggleContent = {
+    true: { iconName: 'general.bell', label: 'Unmute' },
+    false: { iconName: 'general.bellMuted', label: 'Mute' },
+  } as const
+
+  const latestMessageUnreadToggleContent = {
+    true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },
+    false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },
+  } as const
+  const { muted, setMuted, isPending } = useConversationsMute({ conversation })
+  const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation })
 
   const handleMute = useCallback(() => {
     setMuted(!muted)
     onClose()
-  }, [muted, onClose])
+  }, [muted, onClose, setMuted])
+
+  const handleLatestMessageUnread = useCallback(() => {
+    markRead(!read)
+    onClose()
+  }, [read, onClose, markRead])
 
   return (
     <View style={styles.actionButtonContainer}>
       <ActionToggleButton
-        loading={false}
+        loading={markReadPending}
+        disabled={emptyConversation}
+        toggled={!read}
+        onPress={handleLatestMessageUnread}
+        toggleContent={latestMessageUnreadToggleContent}
+        backgroundColor={tokens.fillColorInteractionSwipeDefault}
+      />
+      <ActionToggleButton
+        loading={isPending}
         toggled={muted}
-        toggleContent={{
-          true: { iconName: 'general.bellMuted', label: 'Mute' },
-          false: { iconName: 'general.bell', label: 'Unmute' },
-        }}
-        onPress={() => handleMute()}
+        onPress={handleMute}
+        toggleContent={muteToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeSecondary}
       />
     </View>
@@ -99,6 +125,7 @@ function LeftActions({ conversation, onClose }: LeftActionsProps) {
 }
 
 const ACTION_BUTTON_WIDTH = 120
+const ACTION_BUTTON_COUNT = 2
 
 const useStyles = () => {
   const { colors } = useTheme()
@@ -109,7 +136,7 @@ const useStyles = () => {
     actionButtonContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: ACTION_BUTTON_WIDTH,
+      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,
       alignContent: 'stretch',
     },
     swipeableContainer: {

package/src/components/conversations/conversations.tsx

@@ -2,71 +2,58 @@ import { useNavigation } from '@react-navigation/native'
 import { FlashList } from '@shopify/flash-list'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { useConversationsJoltEvents } from '../../hooks/use_conversation_jolt_events'
-import { useConversations } from '../../hooks/use_conversations'
 import { Text } from '../display'
-import { ConversationRequestArgs } from '../../utils/request/conversation'
 import { ConversationPreview } from './conversation_preview'
-import { ConversationActionsProvider } from '../../contexts/swipeable_active_conversation'
 
-type ListHeaderComponent =
-  | React.ComponentType<any>
-  | React.ReactElement<any, string | React.JSXElementConstructor<any>>
-  | null
-
-interface ConversationsProps extends Partial<Omit<ConversationRequestArgs, 'group'>> {
-  chat_group_graph_id?: string
-  ListHeaderComponent?: ListHeaderComponent
+interface ConversationsProps {
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | null
+    | undefined
 }
 
-export const Conversations = ({
-  ListHeaderComponent,
-  filter,
-  chat_group_graph_id,
-  gids,
-  group_source_app_name,
-}: ConversationsProps) => {
+export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
   const styles = useStyles()
 
-  const { conversations, fetchNextPage, refetch, isRefetching, isFetched } = useConversations({
-    filter,
-    group: chat_group_graph_id,
-    gids,
-    group_source_app_name,
-  })
+  const {
+    conversations,
+    fetchNextPage,
+    refetch,
+    isRefetching,
+    isFetched,
+    args: { chat_group_graph_id },
+  } = useConversationsContext()
   const navigation = useNavigation()
 
-  useConversationsJoltEvents()
-
   const showBadges = !chat_group_graph_id
 
   return (
-    <ConversationActionsProvider>
-      <View style={styles.container}>
-        <FlashList
-          data={conversations}
-          estimatedItemSize={97}
-          contentContainerStyle={styles.contentContainer}
-          onRefresh={refetch}
-          refreshing={!isFetched && isRefetching}
-          ListHeaderComponent={ListHeaderComponent}
-          ListEmptyComponent={
-            <View style={styles.listEmpty}>
-              <Text variant="secondary">No conversations found</Text>
-            </View>
-          }
-          renderItem={({ item }) => (
-            <ConversationPreview
-              conversation={item}
-              onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
-              showBadges={showBadges}
-            />
-          )}
-          onEndReached={() => fetchNextPage()}
-        />
-      </View>
-    </ConversationActionsProvider>
+    <View style={styles.container}>
+      <FlashList
+        data={conversations}
+        estimatedItemSize={97}
+        contentContainerStyle={styles.contentContainer}
+        onRefresh={refetch}
+        refreshing={!isFetched && isRefetching}
+        ListHeaderComponent={ListHeaderComponent}
+        ListEmptyComponent={
+          <View style={styles.listEmpty}>
+            <Text variant="secondary">No conversations found</Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <ConversationPreview
+            conversation={item}
+            onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
+            showBadges={showBadges}
+          />
+        )}
+        onEndReached={() => fetchNextPage()}
+      />
+    </View>
   )
 }
 

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/display/person.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, type ViewStyle } from 'react-native'
 import { platformFontWeightMedium } from '../../utils/styles'
 import { MemberResource } from '../../types'
 import { Avatar } from './avatar'
@@ -13,13 +13,14 @@ import { space } from '../../utils'
 
 interface PersonProps {
   person: MemberResource
+  style?: ViewStyle
 }
 
-export function Person({ person }: PersonProps) {
+export function Person({ person, style }: PersonProps) {
   const styles = useStyles()
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, style]}>
       <Avatar sourceUri={person.avatar} />
       <View style={styles.content}>
         <Text style={styles.name}>{person.name}</Text>

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"
@@ -271,7 +278,6 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
       padding: space(1.5),
       gap: space(1),
       borderRadius: tokens.borderRadiusMd,
-      flex: 1,
     },
     content: {
       gap: space(0.5),