@planningcenter/chat-react-native 2.2.2-rc.1 → 2.3.0-rc.0

package/src/components/conversations.tsx

@@ -7,11 +7,14 @@ import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_event
 import { useConversations } from '../hooks/use_conversations'
 import { formatDatePreview } from '../utils/date'
 import { AvatarGroup, Badge, Heading, Text, TextButton } from './display'
+import { ActionButton } from './display/action_button'
+import { useCanCreateConversations } from '../hooks/use_chat_permissions'
 
 export const Conversations = () => {
   const styles = useStyles()
 
   const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()
+  const canCreateConversations = useCanCreateConversations()
 
   // TODO: Filter using the API
   const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []
@@ -74,6 +77,11 @@ export const Conversations = () => {
         )}
         onEndReached={() => fetchNextPage()}
       />
+      <ActionButton
+        visible={canCreateConversations}
+        title="New conversation"
+        onPress={() => navigation.navigate('Create')}
+      />
     </View>
   )
 }

package/src/components/display/action_button.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Animated, LayoutAnimation, StyleSheet } from 'react-native'
+import { Button } from './button'
+import { useEffect } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../hooks'
+import { Text } from './text'
+
+export const ActionButton = ({
+  visible = true,
+  onPress,
+  title,
+  infoText,
+}: {
+  visible?: boolean
+  onPress: () => void
+  title: string
+  infoText?: string
+}) => {
+  const styles = useStyles()
+  const [show, setShow] = useState(visible)
+
+  useEffect(() => {
+    if (show === visible) return
+
+    setShow(visible)
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+  }, [show, visible])
+
+  if (!visible) return null
+
+  return (
+    <Animated.View style={styles.container}>
+      {Boolean(infoText) && (
+        <Text style={styles.infoText} variant="tertiary">
+          {infoText}
+        </Text>
+      )}
+      <Button variant="fill" size="lg" onPress={onPress} title={title} />
+    </Animated.View>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      paddingVertical: 16,
+      paddingHorizontal: 24,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: colors.fillColorNeutral060,
+      gap: 16,
+    },
+    infoText: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/contexts/api_provider.tsx

@@ -12,9 +12,9 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
     throw new Error('No token present')
   }
 
-  const [url, data, headers] = queryKey as RequestQueryKey
+  const [url, data, headers, app = 'chat'] = queryKey as RequestQueryKey
 
-  return apiClient.chat.get({ url, data, headers })
+  return apiClient[app].get({ url, data, headers })
 }
 
 export const queryClient = new QueryClient({

package/src/hooks/index.ts

@@ -4,3 +4,5 @@ export * from './use_suspense_api'
 export * from './use_current_person'
 export * from './use_font_scale'
 export * from './use_create_android_ripple_color'
+export * from './use_chat_permissions'
+export * from './use_api_client'

package/src/hooks/use_api.ts

@@ -0,0 +1,80 @@
+import {
+  AnyUseSuspenseInfiniteQueryOptions,
+  InfiniteData,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query'
+import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { GetRequest, RequestData } from '../utils/client/types'
+import { useApiClient } from './use_api_client'
+import { getRequestQueryKey } from './use_suspense_api'
+
+interface SuspenseGetOptions extends GetRequest {
+  app?: 'chat' | 'groups'
+}
+
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
+  args: SuspenseGetOptions
+) => {
+  type Resource = ApiResource<T>
+
+  const { data, ...query } = useQuery<Resource, Response>({
+    queryKey: getRequestQueryKey(args),
+  })
+
+  return { ...data, ...query }
+}
+
+type NextMeta = Partial<{
+  offset: string
+  idLt: string
+}>
+
+export type SuspensePaginatorOptions = Omit<
+  AnyUseSuspenseInfiniteQueryOptions,
+  'getNextPageParam' | 'initialPageParam' | 'queryFn' | 'queryKey'
+>
+
+export const useApiPaginator = <T extends ResourceObject>(
+  args: SuspenseGetOptions,
+  opts?: SuspensePaginatorOptions
+) => {
+  const apiClient = useApiClient()
+  const query = useInfiniteQuery<
+    ApiCollection<T>,
+    Response,
+    InfiniteData<ApiCollection<T>>,
+    any,
+    Partial<RequestData> | undefined
+  >({
+    queryKey: getRequestQueryKey(args),
+    queryFn: ({ pageParam }) => {
+      const pageParmWhere = pageParam?.where || {}
+      const argsWhere = args.data.where || {}
+      const where = { ...argsWhere, ...pageParmWhere }
+
+      const offset = pageParam?.offset || args.data.offset
+      const data = { ...args.data, where, offset }
+
+      return apiClient.chat.get({
+        url: args.url,
+        data,
+      })
+    },
+    initialPageParam: {} as Partial<RequestData>,
+    getNextPageParam: lastPage => {
+      const next: NextMeta = lastPage.meta?.next || {}
+      const { offset, idLt } = next
+
+      if (idLt) return { where: { id_lt: idLt } }
+      if (offset) return { offset: Number(offset) }
+
+      return undefined
+    },
+    ...(opts || {}),
+  })
+
+  const data: T[] = query.data?.pages.flatMap(page => page.data) || []
+
+  return { ...query, data }
+}

package/src/hooks/use_api_client.ts

@@ -2,26 +2,24 @@ import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
 
-type App = 'chat' | 'groups'
-const apps: App[] = ['chat', 'groups']
-export type ApiClient = Record<App, Client>
+type App = 'chat' | 'groups' | 'services'
+const apps: App[] = ['chat', 'groups', 'services']
+
+export type ApiClient = { [_K in 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>
-      ),
+      apps.reduce((acc, app) => {
+        acc[app] = new Client({
+          app,
+          session,
+          version: '2018-11-01',
+          onTokenExpired,
+        })
+        return acc
+      }, {} as ApiClient),
     [session, onTokenExpired]
   )
 

package/src/hooks/use_chat_permissions.ts

@@ -0,0 +1,20 @@
+import { AppGrantsResource } from '../types'
+import { useApiGet } from './use_api'
+
+export function useAppGrants() {
+  return useApiGet<AppGrantsResource[]>({
+    url: '/me/app_grants',
+    data: {
+      fields: {
+        AppGrant: ['create_conversations', 'app_name'],
+      },
+    },
+    app: 'chat',
+  })
+}
+
+export function useCanCreateConversations(): boolean {
+  const { data: appGrants = [] } = useAppGrants()
+
+  return appGrants.some(appGrant => appGrant.createConversations)
+}

package/src/hooks/use_conversation.ts

@@ -1,10 +1,9 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
 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'
+import { useApiClient } from './use_api_client'
+import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: string }) => ({
   url: `/me/conversations/${conversation_id}`,
@@ -39,6 +38,7 @@ export const useConversation = ({ conversation_id }) => {
 
 export const useConversationMute = ({ conversation_id }: { conversation_id: string }) => {
   const apiClient = useApiClient()
+  const queryClient = useQueryClient()
   const requestArgs = getConversationRequestArgs({ conversation_id })
   const queryKey = getRequestQueryKey(requestArgs)
   const { data: conversation } = useConversation({ conversation_id })
@@ -82,6 +82,7 @@ export const useConversationMute = ({ conversation_id }: { conversation_id: stri
 
 export const useConversationUpdate = ({ conversation_id }: { conversation_id: string }) => {
   const apiClient = useApiClient()
+  const queryClient = useQueryClient()
   const requestArgs = getConversationRequestArgs({ conversation_id })
   const queryKey = getRequestQueryKey(requestArgs)
 

package/src/hooks/use_suspense_api.ts

@@ -8,7 +8,13 @@ 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) => {
+interface SuspenseGetOptions extends GetRequest {
+  app?: 'chat' | 'groups'
+}
+
+export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
+  args: SuspenseGetOptions
+) => {
   type Resource = ApiResource<T>
 
   const { data, ...query } = useSuspenseQuery<Resource, Response>({
@@ -29,7 +35,7 @@ export type SuspensePaginatorOptions = Omit<
 >
 
 export const useSuspensePaginator = <T extends ResourceObject>(
-  args: GetRequest,
+  args: SuspenseGetOptions,
   opts?: SuspensePaginatorOptions
 ) => {
   const apiClient = useApiClient()
@@ -72,9 +78,15 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data }
 }
 
-export type RequestQueryKey = [GetRequest['url'], GetRequest['data'], GetRequest['headers']]
-export const getRequestQueryKey = (args: GetRequest): RequestQueryKey => [
+export type RequestQueryKey = [
+  SuspenseGetOptions['url'],
+  SuspenseGetOptions['data'],
+  SuspenseGetOptions['headers'],
+  SuspenseGetOptions['app'],
+]
+export const getRequestQueryKey = (args: SuspenseGetOptions): RequestQueryKey => [
   args.url,
   args.data,
   args.headers,
+  args.app || 'chat',
 ]

package/src/index.tsx

@@ -1,4 +1,4 @@
-export { ChatProvider, ChatContext, CreateChatThemeProps } from './contexts'
+export { ChatProvider, ChatContext, CreateChatThemeProps } from './contexts/chat_context'
 export { DesignSystemScreen } from './screens'
 export { ChatStack } from './navigation'
 export {

package/src/navigation/index.tsx

@@ -1,8 +1,7 @@
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
+import { HeaderBackButton } from '@react-navigation/elements'
 import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
-  NativeStackHeaderLeftProps,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
 import React from 'react'
@@ -10,6 +9,12 @@ import { Icon } from '../components'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
 import { ConversationsScreen } from '../screens/conversations_screen'
+import { ConversationCreateScreen } from '../screens/create/conversation_create_screen'
+import {
+  ConversationFilterReceipientsScreenOptions,
+  ConversationFilterRecipientsScreen,
+} from '../screens/create/conversation_filter_recipients_screen'
+import { ConversationSelectRecipientsScreen } from '../screens/create/conversation_select_recipients_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
@@ -19,6 +24,38 @@ import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_sc
 import { HeaderRightButton } from './header'
 import { ScreenLayout } from './screenLayout'
 
+export const CreateConversationStack = createNativeStackNavigator({
+  initialRouteName: 'ConversationSelectRecipients',
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
+  screenLayout: ScreenLayout,
+  screens: {
+    ConversationSelectRecipients: {
+      screen: ConversationSelectRecipientsScreen,
+      options: ({ navigation }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton {...props} onPress={navigation.goBack}>
+            Cancel
+          </HeaderRightButton>
+        ),
+      }),
+    },
+    ConversationFilterRecipients: {
+      screen: ConversationFilterRecipientsScreen,
+      options: ConversationFilterReceipientsScreenOptions,
+    },
+    ConversationCreate: {
+      screen: ConversationCreateScreen,
+      options: {
+        title: 'New conversation',
+        headerLeft: () => null,
+      },
+    },
+  },
+})
+
 export const ChatStack = createNativeStackNavigator({
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
@@ -29,11 +66,6 @@ export const ChatStack = createNativeStackNavigator({
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (
-          <HeaderButton>
-            <Icon name="general.threeReducingHorizontalBars" size={18} color={tintColor} />
-          </HeaderButton>
-        ),
         headerRight: (props: NativeStackHeaderRightProps) => (
           <HeaderBackButton
             backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
@@ -58,6 +90,13 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    Create: {
+      screen: CreateConversationStack,
+      options: {
+        headerShown: false,
+        presentation: 'modal',
+      },
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

package/src/navigation/screenLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ErrorBoundary from '../components/page/error_boundary'
 import { Suspense } from 'react'
-import { ApiProvider } from '../contexts'
+import { ApiProvider } from '../contexts/api_provider'
 import { DefaultLoading } from '../components/page/loading'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {

package/src/screens/create/conversation_create_screen.tsx

@@ -0,0 +1,148 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Text } from '../../components'
+import { ActionButton } from '../../components/display/action_button'
+import { useSuspenseGet, useTheme } from '../../hooks'
+import { useApiClient } from '../../hooks/use_api_client'
+import { useMutation } from '@tanstack/react-query'
+import { GroupsGroupResource } from '../../types'
+
+type ConversationCreateScreenProps = StaticScreenProps<{
+  group_id?: string
+  team_ids?: string[]
+}>
+
+export const ConversationCreateScreen = ({ route }: ConversationCreateScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const [title, setTitle] = useState<string>()
+  const apiClient = useApiClient()
+  const { data: group } = useSuspenseGet<GroupsGroupResource>({
+    url: `/me/groups/${route.params.group_id}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+      include: ['location'],
+    },
+    app: 'groups',
+  })
+  const { mutate: handleSave } = useMutation({
+    throwOnError: true,
+    onSuccess: result => {
+      handleRedirectToConversation({ conversation_id: result.data.id })
+    },
+    mutationFn: () =>
+      apiClient.groups
+        .post({
+          url: `/me/groups/${route.params.group_id}/chat_conversation_payload`,
+          data: {
+            data: {
+              type: '',
+              attributes: {
+                title,
+              },
+            },
+          },
+        })
+        .then(res => res.data.value)
+        .then(payload =>
+          apiClient.chat.post({
+            url: '/me/conversations',
+            data: {
+              data: {
+                type: 'Conversation',
+                attributes: {
+                  payload,
+                },
+              },
+            },
+          })
+        ),
+  })
+
+  const handleRedirectToConversation = useCallback(
+    ({ conversation_id }: { conversation_id: string }) => {
+      // exit from the create stack
+      navigation.getParent()?.goBack()
+      // navigate to the conversation screen
+      navigation.dispatch(
+        StackActions.push('Conversation', {
+          conversation_id,
+        })
+      )
+    },
+    [navigation]
+  )
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <View style={styles.to}>
+          <Text>To:</Text>
+          <View>
+            <Text>{group.name}</Text>
+            <Text>{group.membershipsCount} members</Text>
+          </View>
+        </View>
+        <View style={styles.titleContainer}>
+          <Text style={styles.titleLabel}>Title</Text>
+          <TextInput
+            placeholder="Topic of conversation (required)"
+            value={title}
+            onChangeText={setTitle}
+            style={styles.titleInput}
+          />
+        </View>
+      </View>
+      <ActionButton title="Start Conversation" onPress={() => handleSave()} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      gap: 8,
+    },
+    section: {
+      padding: 16,
+      flex: 1,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    selectTeamsButton: {},
+    routeDebug: {
+      alignContent: 'center',
+      padding: 16,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+    titleContainer: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      gap: 8,
+    },
+    titleInput: {
+      fontSize: 18,
+    },
+    titleLabel: {},
+    to: {
+      flexDirection: 'row',
+      gap: 8,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/create/conversation_filter_recipients_screen.tsx

@@ -0,0 +1,79 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Button } from '../../components'
+import { useTheme } from '../../hooks'
+
+export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents: [0.75],
+  sheetGrabberVisible: true,
+}
+
+type ConversationFilterRecipientsScreenProps = StaticScreenProps<{}>
+
+export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <Button
+          style={styles.selectTeamsButton}
+          onPress={() =>
+            navigation.dispatch(
+              StackActions.popTo('ConversationSelectRecipients', {
+                chat_group_graph_id: 'TBD',
+              })
+            )
+          }
+          title="Redirect to select"
+          variant="outline"
+        />
+
+        <Button
+          style={styles.selectTeamsButton}
+          onPress={() =>
+            navigation.dispatch(
+              StackActions.popTo('ConversationCreate', {
+                chat_group_graph_id: 'TBD',
+              })
+            )
+          }
+          title="Redirect to form"
+          variant="outline"
+        />
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      gap: 8,
+    },
+    section: {
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      flex: 1,
+    },
+    selectTeamsButton: {},
+    routeDebug: {
+      alignContent: 'center',
+      padding: 16,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}