@planningcenter/chat-react-native 2.1.1 → 2.2.0-rc.1

package/src/hooks/use_api_client.ts

@@ -0,0 +1,29 @@
+import { useContext, useMemo } from 'react'
+import { ChatContext } from '../contexts'
+import { Client } from '../utils'
+
+type App = 'chat' | 'groups'
+const apps: App[] = ['chat', 'groups']
+export type ApiClient = Record<App, Client>
+
+export const useApiClient = () => {
+  const { session, onTokenExpired } = useContext(ChatContext)
+  const api = useMemo(
+    () =>
+      apps.reduce(
+        (acc, app) => {
+          acc[app] = new Client({
+            app,
+            session,
+            version: '2018-11-01',
+            onTokenExpired,
+          })
+          return acc
+        },
+        {} as Record<App, Client>
+      ),
+    [session, onTokenExpired]
+  )
+
+  return api
+}

package/src/hooks/use_conversation.ts

@@ -0,0 +1,113 @@
+import { useMutation } from '@tanstack/react-query'
+import { ApiResource, ConversationResource } from '../types'
+import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
+import { queryClient } from '../contexts'
+import { useApiClient } from './use_api_client'
+import { transformGetToPost } from '../utils/client/request_helpers'
+import { useState } from 'react'
+
+export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: string }) => ({
+  url: `/me/conversations/${conversation_id}`,
+  data: {
+    fields: {
+      Conversation: [
+        'created_at',
+        'badges',
+        'groups',
+        'last_message_author_id',
+        'last_message_author_name',
+        'last_message_created_at',
+        'last_message_text_preview',
+        'preview_avatar_urls',
+        'member_ability',
+        'muted',
+        'replies_disabled',
+        'title',
+        'unread_count',
+        'updated_at',
+      ],
+      MemberAbility: ['can_update', 'can_delete'],
+      ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
+    },
+    include: ['badges', 'member_ability'],
+  },
+})
+
+export const useConversation = ({ conversation_id }) => {
+  return useSuspenseGet<ConversationResource>(getConversationRequestArgs({ conversation_id }))
+}
+
+export const useConversationMute = ({ conversation_id }: { conversation_id: string }) => {
+  const apiClient = useApiClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id })
+  const queryKey = getRequestQueryKey(requestArgs)
+  const { data: conversation } = useConversation({ conversation_id })
+  const [value, setValue] = useState<boolean>(conversation.muted)
+
+  const { mutate: setMuted, ...mutation } = useMutation({
+    onMutate: async (muted: boolean) => {
+      return queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (!prev?.data) return prev
+        setValue(muted)
+        prev.data.muted = muted
+
+        return prev
+      })
+    },
+    mutationKey: ['muteConversation'],
+    mutationFn: async (muted: boolean) => {
+      const action = muted ? 'mute' : 'unmute'
+
+      return apiClient.chat.post({
+        url: `/me/conversations/${conversation_id}/${action}`,
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (!prev?.data) return prev
+
+        // Posting to the mute action endpoint can't return all the fields
+        // so we need to set only the fields we require
+        prev.data.muted = response.data.muted
+        setValue(response.data.muted)
+
+        return prev
+      })
+    },
+  })
+
+  return { muted: value, setMuted, ...mutation }
+}
+
+export const useConversationUpdate = ({ conversation_id }: { conversation_id: string }) => {
+  const apiClient = useApiClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    onMutate: async (update: Partial<ConversationResource>) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (prev?.data) {
+          prev.data = {
+            ...prev.data,
+            ...update,
+          }
+        }
+
+        return prev
+      })
+    },
+    mutationKey: ['mutateConversation'],
+    mutationFn: async (update: Partial<ConversationResource>) => {
+      const postArgs = transformGetToPost(requestArgs).data
+      return apiClient.chat.patch({
+        url: `/me/conversations/${conversation_id}/`,
+        data: { data: { type: '', attributes: update }, ...postArgs },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, () => response)
+    },
+  })
+}

package/src/hooks/use_conversation_jolt_events.ts

@@ -1,9 +1,8 @@
 import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
-import { useContext } from 'react'
-import { ChatContext } from '../contexts'
 import { ApiCollection, ApiResource, ConversationResource } from '../types'
 import { deleteRecordInPagesData, updateRecordInPagesData } from '../utils'
+import { useApiClient } from './use_api_client'
 import { getConversationsRequestArgs } from './use_conversations'
 import { useCurrentPerson } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
@@ -17,7 +16,7 @@ interface JoltConversationsEvent extends CustomMessage {
 }
 
 export function useConversationsJoltEvents() {
-  const { client } = useContext(ChatContext)
+  const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
@@ -27,7 +26,7 @@ export function useConversationsJoltEvents() {
 
   const fetchConversation = async ({ id }: ConversationResource) => {
     const { data: argsData } = conversationsRequestArgs
-    const { data } = await client.get<ApiResource<ConversationResource>>({
+    const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({
       url: `/me/conversations/${id}`,
       data: {
         fields: argsData.fields,

package/src/hooks/use_font_scale.ts

@@ -1,6 +1,8 @@
 import { useWindowDimensions } from 'react-native'
 
-export const useFontScale = ({ maxFontSizeMultiplier }: { maxFontSizeMultiplier?: number }) => {
+export const useFontScale = ({
+  maxFontSizeMultiplier,
+}: { maxFontSizeMultiplier?: number } = {}) => {
   const { fontScale: nativeFontScale } = useWindowDimensions()
   const scaleLimit = maxFontSizeMultiplier || nativeFontScale
   const fontScale = Math.min(scaleLimit, nativeFontScale)

package/src/hooks/use_jolt.ts

@@ -1,13 +1,13 @@
 import JoltClient from '@planningcenter/jolt-client'
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
-import { useContext, useEffect, useState } from 'react'
-import { ChatContext } from '../contexts'
-import { ApiResource } from '../types'
+import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import {
   FetchSubscribeToken,
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
-import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { ApiResource } from '../types'
+import { useApiClient } from './use_api_client'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -16,12 +16,12 @@ interface JoltResponse {
 }
 
 export const useJoltClient = (): JoltClient | undefined => {
-  const { client } = useContext(ChatContext)
+  const apiClient = useApiClient()
   const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
     refetchOnMount: false,
     queryKey: ['jolt-token'],
     queryFn: () => {
-      return client.post({
+      return apiClient.chat.post({
         url: '/me/jolt_authorize',
         data: {
           data: {
@@ -38,7 +38,7 @@ export const useJoltClient = (): JoltClient | undefined => {
   }
 
   const fetchSubscribeTokenFn: FetchSubscribeToken = (channel: string, connectionId: string) => {
-    return client
+    return apiClient.chat
       .post({
         url: '/me/jolt_subscribe',
         data: {
@@ -66,7 +66,7 @@ export const useJoltClient = (): JoltClient | undefined => {
           fetchAuthTokenFn,
           fetchSubscribeTokenFn,
         },
-        { logToConsole: true }
+        { logToConsole: false }
       )
     },
   })

package/src/hooks/use_suspense_api.ts

@@ -4,10 +4,9 @@ import {
   useSuspenseInfiniteQuery,
   useSuspenseQuery,
 } from '@tanstack/react-query'
-import { useContext } from 'react'
-import { ChatContext } from '../contexts'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
+import { useApiClient } from './use_api_client'
 
 export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(args: GetRequest) => {
   type Resource = ApiResource<T>
@@ -33,7 +32,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   args: GetRequest,
   opts?: SuspensePaginatorOptions
 ) => {
-  const { client } = useContext(ChatContext)
+  const apiClient = useApiClient()
   const query = useSuspenseInfiniteQuery<
     ApiCollection<T>,
     Response,
@@ -50,7 +49,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return client.get({
+      return apiClient.chat.get({
         url: args.url,
         data,
       })

package/src/navigation/header.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { HeaderButton, HeaderButtonProps, Text } from '@react-navigation/elements'
+import { StyleSheet, TextProps, TextStyle } from 'react-native'
+
+type HeaderRightButtonProps = HeaderButtonProps & {
+  children: TextProps['children']
+  textStyle?: TextStyle
+}
+
+export const HeaderRightButton = (props: HeaderRightButtonProps) => {
+  const styles = StyleSheet.create({
+    text: {
+      fontSize: 16,
+    },
+  })
+
+  return (
+    <HeaderButton {...props} style={props.style}>
+      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>
+        {props.children}
+      </Text>
+    </HeaderButton>
+  )
+}

package/src/navigation/index.tsx

@@ -1,21 +1,23 @@
-import React from 'react'
+import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
 import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
   NativeStackHeaderLeftProps,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
-import { NotFound } from '../screens/not_found'
-import { ScreenLayout } from './screenLayout'
-import { ConversationsScreen } from '../screens/conversations_screen'
-import { ConversationScreen } from '../screens/conversation_screen'
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
+import React from 'react'
 import { Icon } from '../components'
+import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
+import { ConversationScreen } from '../screens/conversation_screen'
+import { ConversationsScreen } from '../screens/conversations_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
+import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
+import { HeaderRightButton } from './header'
+import { ScreenLayout } from './screenLayout'
 
 export const ChatStack = createNativeStackNavigator({
   screenOptions: {
@@ -44,6 +46,18 @@ export const ChatStack = createNativeStackNavigator({
     Conversation: {
       screen: ConversationScreen,
     },
+    ConversationDetails: {
+      screen: ConversationDetailsScreen,
+      options: ({ navigation }) => ({
+        presentation: 'modal',
+        title: 'Conversation details',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton {...props} onPress={navigation.goBack}>
+            Done
+          </HeaderRightButton>
+        ),
+      }),
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

package/src/screens/conversation_details_screen.tsx

@@ -0,0 +1,205 @@
+import {
+  StaticScreenProps,
+  useNavigation,
+  useTheme as useNavigationTheme,
+} from '@react-navigation/native'
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { FlatList, StyleSheet, TextInput, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'
+import { useSuspenseGet, useTheme } from '../hooks'
+import {
+  useConversation,
+  useConversationMute,
+  useConversationUpdate,
+} from '../hooks/use_conversation'
+import { MemberResource } from '../types'
+import { HeaderRightButton } from '../navigation/header'
+
+export type ConversationDetailsScreenProps = StaticScreenProps<{
+  conversation_id: string
+}>
+
+export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: conversation } = useConversation(route.params)
+  const canUpdate = conversation.memberAbility?.canUpdate
+
+  const { data: members } = useSuspenseGet<MemberResource[]>({
+    url: `/me/conversations/${route.params.conversation_id}/members`,
+    data: {
+      include: ['person'],
+      fields: {
+        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],
+      },
+    },
+  })
+
+  const { muted, setMuted } = useConversationMute(route.params)
+  const { mutate: saveTitle } = useConversationUpdate(route.params)
+  const [title, setTitle] = useState(conversation.title)
+  const HeaderRight = useCallback(() => {
+    return (
+      <HeaderRightButton
+        onPress={() => {
+          saveTitle({ title })
+          navigation.goBack()
+        }}
+      >
+        Done
+      </HeaderRightButton>
+    )
+  }, [navigation, saveTitle, title])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: HeaderRight,
+    })
+  }, [HeaderRight, navigation])
+
+  return (
+    <View style={styles.container}>
+      <SectionList>
+        <View style={styles.titleContainer}>
+          <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
+            <Text variant="tertiary">Title</Text>
+            {!canUpdate && <Icon name="general.lock" />}
+          </View>
+          <TextInput
+            editable={canUpdate}
+            onChangeText={setTitle}
+            style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
+            value={title}
+          />
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader>Settings</SectionListHeader>
+        <View style={styles.muteContainer}>
+          <Text variant="plain" style={styles.muteText}>
+            Mute
+          </Text>
+          <Switch value={muted} onChange={() => setMuted(!muted)} />
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader divider={false}>Members</SectionListHeader>
+        <FlatList
+          data={members}
+          renderItem={({ item }) => (
+            <View style={styles.member}>
+              <Avatar sourceUri={item.avatar} />
+              <View style={styles.memberBody}>
+                <Text style={styles.memberName}>{item.name}</Text>
+                <View style={styles.memberBadges}>
+                  {item.badges?.map((badge, index) => (
+                    <View key={index} style={styles.memberBadge}>
+                      <Badge label={badge.title} />
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </View>
+          )}
+          keyExtractor={item => item.id}
+          contentContainerStyle={styles.listContainer}
+        />
+      </SectionList>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 16,
+      paddingHorizontal: 16,
+      backgroundColor: theme.colors.fillColorNeutral080,
+      paddingBottom: bottom,
+      gap: 16,
+    },
+    listContainer: {
+      gap: 12,
+    },
+    member: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    memberBody: {
+      gap: 4,
+    },
+    memberName: {
+      lineHeight: 16,
+    },
+    memberBadges: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    memberBadge: {},
+    muteContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    muteText: {
+      lineHeight: 20,
+    },
+    titleContainer: {},
+    titleLabel: {},
+    titleLabelContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    titleInput: {
+      color: theme.colors.textColorDefaultPrimary,
+    },
+    titleInputDisabled: { opacity: 0.7 },
+  })
+}
+
+const SectionList = ({ children }: PropsWithChildren) => {
+  const styles = useSectionListStyles()
+
+  return <View style={styles.container}>{children}</View>
+}
+
+const SectionListHeader = ({
+  children,
+  divider = true,
+}: PropsWithChildren & { divider?: boolean }) => {
+  const styles = useSectionListStyles()
+
+  return (
+    <Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
+      {children}
+    </Heading>
+  )
+}
+
+const useSectionListStyles = () => {
+  const theme = useTheme()
+  const navigationTheme = useNavigationTheme()
+
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+      backgroundColor: navigationTheme.colors.card,
+      borderRadius: 8,
+      flexDirection: 'column',
+      gap: 8,
+    },
+    heading: {
+      paddingBottom: 12,
+    },
+    headingDivider: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/conversation_screen.tsx

@@ -1,44 +1,46 @@
+import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   StaticScreenProps,
   useNavigation,
   useTheme as useNavigationTheme,
+  useRoute,
 } from '@react-navigation/native'
-import React, { useEffect } from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
+import React, { useCallback, useEffect } from 'react'
+import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Icon, Text } from '../components'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { KeyboardView } from '../components/display/keyboard_view'
+import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
-import { useSuspenseGet } from '../hooks/use_suspense_api'
-import { ConversationResource } from '../types'
 
-export type ConversationScreenProps = StaticScreenProps<{
+type ConversationRouteProps = {
   conversation_id: string
-  chat_group_graph_id: string
-}>
+  chat_group_graph_id?: string
+}
+
+export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
-  const navigation = useNavigation()
-  const { conversation_id } = route.params
   const styles = useStyles()
+  const navigation = useNavigation()
 
-  const { data: conversation } = useSuspenseGet<ConversationResource>({
-    url: `/me/conversations/${conversation_id}`,
-    data: {
-      fields: {
-        Conversation: ['title'],
-      },
-    },
-  })
-
+  const { conversation_id } = route.params
+  const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
   })
 
+  // Seems to be necessary to define this way so we get the route picked up
+  const headerTitle = useCallback(
+    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,
+    []
+  )
+
   useEffect(() => {
-    navigation.setOptions({ title: conversation?.title })
-  }, [conversation, conversation_id, navigation])
+    navigation.setOptions({ headerTitle, title: conversation?.title })
+  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])
 
   return (
     <View style={styles.container}>
@@ -64,6 +66,49 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   )
 }
 
+const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
+  const styles = usePressableHeaderStyle()
+  const navigation = useNavigation()
+
+  const route = useRoute() as ConversationScreenProps['route']
+
+  const { data: conversation } = useConversation(route.params)
+  const badge = conversation.badges?.[0]
+  const subtitle = [badge?.pcoResourceType, badge?.text].filter(f => f).join(': ')
+
+  return (
+    <PlatformPressable
+      style={styles.container}
+      onPress={() =>
+        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })
+      }
+    >
+      <View style={styles.titleWrapper}>
+        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>
+        <Icon name="general.downChevron" size={12} />
+      </View>
+      <Text variant="tertiary">{subtitle}</Text>
+    </PlatformPressable>
+  )
+}
+
+const usePressableHeaderStyle = () => {
+  return StyleSheet.create({
+    container: {
+      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
+    },
+    titleWrapper: {
+      alignItems: 'center',
+      columnGap: 8,
+      flexDirection: 'row',
+    },
+    title: {
+      padding: 0,
+      margin: 0,
+    },
+  })
+}
+
 const useStyles = () => {
   const navigationTheme = useNavigationTheme()
   const { bottom } = useSafeAreaInsets()