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

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),

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 {

package/src/contexts/chat_context.tsx

@@ -6,11 +6,12 @@ import { ENV, PartialToken, ResponseError, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
 export type ChatContextValue = {
-  token?: PartialToken
-  onUnauthorizedResponse: (_response: ResponseError) => void
-  theme: ChatTheme
   env?: ENV
+  giphyApiKey?: string
+  onUnauthorizedResponse: (_response: ResponseError) => void
   session: Session
+  theme: ChatTheme
+  token?: PartialToken
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
@@ -18,15 +19,16 @@ export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'th
 }
 
 export const ChatContext = createContext<ChatContextValue>({
-  theme: defaultTheme('light'),
-  token: undefined,
   env: undefined,
+  giphyApiKey: undefined,
   onUnauthorizedResponse: () => {},
   session: new Session(),
+  theme: defaultTheme('light'),
+  token: undefined,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse } = value
+  const { env, token, onUnauthorizedResponse, giphyApiKey } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(() => new Session({ token, env }), [env, token])
 
@@ -36,6 +38,7 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
     onUnauthorizedResponse,
     session,
     theme,
+    giphyApiKey,
   }
 
   return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>
@@ -46,6 +49,10 @@ export interface CreateChatThemeProps {
   colorScheme?: ColorSchemeName
 }
 
+export const useChatContext = () => {
+  return React.useContext(ChatContext)
+}
+
 export const useCreateChatTheme = ({
   theme: customTheme = {},
   colorScheme: appColorScheme,

package/src/contexts/conversations_context.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import { useConversations, UseConversationsValue } from '../hooks/use_conversations'
+import {
+  FetchNextPageOptions,
+  InfiniteQueryObserverResult,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { ApiCollection, ConversationResource } from '../types'
+import { useConversationsJoltEvents } from '../hooks/use_conversations_jolt_events'
+
+interface ConversationsContextValue extends UseConversationsValue {
+  activeConversationId?: number
+  setActiveConversationId: (_id: number) => void
+  args: ConversationFiltersParams
+}
+
+const defaultQueryValue: UseConversationsValue = {
+  conversations: [],
+  refetch: () => Promise.resolve(null),
+  error: null,
+  isError: false,
+  fetchNextPage,
+  hasNextPage: false,
+  isFetching: false,
+  isFetched: false,
+  isRefetching: false,
+}
+
+const ConversationsContext = createContext<ConversationsContextValue>({
+  args: {},
+  activeConversationId: undefined,
+  setActiveConversationId: () => {},
+  ...defaultQueryValue,
+})
+
+export const ConversationsContextProvider = ({
+  children,
+  args,
+}: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
+  const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
+  const { chat_group_graph_id, group_source_app_name } = args
+
+  const query = useConversations({ chat_group_graph_id, group_source_app_name })
+
+  const value = useMemo(
+    () => ({
+      args,
+      activeConversationId,
+      setActiveConversationId,
+      ...query,
+    }),
+    [args, activeConversationId, query]
+  )
+
+  useConversationsJoltEvents(args)
+
+  return <ConversationsContext.Provider value={value}>{children}</ConversationsContext.Provider>
+}
+
+function fetchNextPage(
+  _options?: FetchNextPageOptions
+): Promise<
+  InfiniteQueryObserverResult<InfiniteData<ApiCollection<ConversationResource>, unknown>, Response>
+> {
+  throw new Error('Function not implemented.')
+}
+
+export const useConversationsContext = () => useContext(ConversationsContext)

package/src/hooks/groups/use_group_members_for_new_conversation.ts

@@ -0,0 +1,62 @@
+import { MemberBadge, MemberResource } from '../../types'
+import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
+import { useApiPaginator } from '../use_api'
+import { useCurrentPerson } from '../use_current_person'
+
+/**
+ * This is specifically for the new conversation screen because we assign
+ * the "Conversation owner" badge to the current person.
+ */
+export function useGroupMembersForNewConversation({ id }: { id: number }) {
+  const currentPerson = useCurrentPerson()
+  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'],
+      },
+    },
+    app: 'groups',
+  })
+
+  const { data: memberships = [] } = response
+  const members: MemberResource[] = memberships.map(membership => {
+    const { person } = membership
+    return {
+      type: 'Member',
+      avatar: person.avatarUrl,
+      badges: buildBadges(membership, currentPerson.id),
+      child: person.child,
+      id: +person.id,
+      name: `${person.firstName} ${person.lastName}`,
+      source: [],
+    }
+  })
+  const adultMembers = members.filter(member => !member.child)
+  const childMembers = members.filter(member => member.child)
+
+  return {
+    ...response,
+    data: members,
+    adultMembers,
+    childMembers,
+  }
+}
+
+function buildBadges(
+  membership: GroupsGroupMemberResource,
+  currentPersonId: number
+): MemberBadge[] {
+  const { person } = membership
+  const badges = []
+  if (membership.role === 'leader') {
+    badges.push({ title: 'Leader' })
+  }
+  if (person.id === currentPersonId) {
+    badges.push({ title: 'Conversation owner' })
+  }
+  return badges
+}

package/src/hooks/groups/use_groups_conversation_create.ts

@@ -0,0 +1,50 @@
+import { useMutation } from '@tanstack/react-query'
+import { ApiResource, ConversationResource, ResourceObject } from '../../types'
+import { useApiClient } from '../use_api_client'
+
+interface Props {
+  groupId: number
+  title?: string
+  onSuccess: (conversationId: number) => void
+}
+
+export function useGroupsConversationCreate({ groupId, title, onSuccess }: Props) {
+  const apiClient = useApiClient()
+  return useMutation({
+    throwOnError: true,
+    onSuccess: result => {
+      onSuccess && onSuccess(result.data.id)
+    },
+    mutationFn: () =>
+      apiClient.groups
+        .post<ApiResource<ChatConversationPayload>>({
+          url: `/me/groups/${groupId}/chat_conversation_payload`,
+          data: {
+            data: {
+              type: '',
+              attributes: {
+                title,
+              },
+            },
+          },
+        })
+        .then(res => res.data.value)
+        .then(payload =>
+          apiClient.chat.post<ApiResource<ConversationResource>>({
+            url: '/me/conversations',
+            data: {
+              data: {
+                type: 'Conversation',
+                attributes: {
+                  payload,
+                },
+              },
+            },
+          })
+        ),
+  })
+}
+
+interface ChatConversationPayload extends ResourceObject {
+  value: string
+}