@planningcenter/chat-react-native 2.0.1-rc.0 → 2.1.0-rc.1

package/src/components/display/tabs.tsx

@@ -0,0 +1,142 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, Easing, StyleSheet, View, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface TabsProps<ItemT> {
+  data: ArrayLike<ItemT> | null | undefined
+  activeTab?: ItemT
+  keyExtractor?: (_item: ItemT, _index?: number) => string
+  onTabPress?: (_item: ItemT) => void
+  renderItem: (_: { item: ItemT; index: number }) => React.ReactNode
+  style?: ViewStyle
+  contentContainerStyle?: ViewStyle
+}
+
+const defaultKeyExtractor = (item: any, index?: number) => {
+  if (typeof item === 'string') return item
+
+  return item.id || index?.toString() || item.toString()
+}
+
+export function Tabs<ItemT>({
+  activeTab = { id: '' } as ItemT,
+  contentContainerStyle,
+  data,
+  keyExtractor = defaultKeyExtractor,
+  onTabPress,
+  renderItem,
+  style,
+}: TabsProps<ItemT>) {
+  const [tabDimSet, setTabDimensions] = useState<Set<{ index: number; width: number }>>(new Set())
+  const tabDimensions = Array.from(tabDimSet)
+  const [tabHeight, setTabHeight] = useState(0)
+  const styles = useStyles()
+  const opacity = useRef(new Animated.Value(0)).current
+  const tabCursorPosition = useRef(new Animated.Value(0)).current
+  const dataArray = Array.from(data || [])
+  const activeTabIndex = dataArray.findIndex(
+    (item, index) => keyExtractor(item, index) === keyExtractor(activeTab)
+  )
+  const gap = 8
+  const tabCursorSpacing = tabDimensions
+    .slice(0, activeTabIndex)
+    .reduce((acc, { width }) => acc + width + gap, 0)
+
+  Animated.timing(tabCursorPosition, {
+    toValue: tabCursorSpacing,
+    easing: Easing.inOut(Easing.ease),
+    duration: 100,
+    useNativeDriver: true,
+  }).start()
+
+  useEffect(() => {
+    if (activeTabIndex === -1) return
+
+    Animated.timing(opacity, {
+      toValue: 1,
+      easing: Easing.inOut(Easing.ease),
+      duration: 500,
+      useNativeDriver: true,
+    }).start()
+  }, [opacity, activeTabIndex])
+
+  return (
+    <View style={[styles.container, style]}>
+      <Animated.View style={[styles.contentContainer, contentContainerStyle]}>
+        <View
+          style={styles.tabsContainer}
+          onLayout={event => {
+            const { height } = event.nativeEvent.layout
+            setTabHeight(height)
+          }}
+        >
+          {dataArray.map((item, index) => {
+            return (
+              <PlatformPressable
+                key={index}
+                style={styles.tab}
+                onPress={() => {
+                  onTabPress?.(item)
+                }}
+              >
+                <View
+                  onLayout={event => {
+                    const { width } = event.nativeEvent.layout
+                    setTabDimensions(dimensions => dimensions.add({ index, width }))
+                  }}
+                >
+                  {renderItem({ item, index })}
+                </View>
+              </PlatformPressable>
+            )
+          })}
+        </View>
+        <Animated.View
+          style={[
+            styles.cursor,
+            {
+              opacity,
+              top: tabHeight - 5,
+              width: tabDimensions[activeTabIndex]?.width || 0,
+              transform: [{ translateX: tabCursorPosition }],
+            },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    contentContainer: {},
+    cursor: {
+      borderBottomWidth: 3,
+      borderBottomColor: theme.colors.interaction,
+      height: 5,
+      flex: 1,
+      position: 'absolute',
+      zIndex: 5,
+    },
+    tab: {},
+    tabsContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      gap: 8,
+    },
+  })
+}

package/src/components/index.tsx

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

package/src/components/page/error_boundary.tsx

@@ -0,0 +1,135 @@
+import { useNavigation } from '@react-navigation/native'
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import React, { PropsWithChildren, useEffect, useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Button, Heading, Icon, Text } from '../display'
+import { useTheme } from '../../hooks'
+
+type ErrorBoundaryState = {
+  error: Response | Error | null
+  unsubscriber: () => void
+}
+
+class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
+  state: ErrorBoundaryState = {
+    error: null,
+    unsubscriber: () => {},
+  }
+
+  componentDidCatch(error: any) {
+    this.handleError(error)
+  }
+
+  handleError(error: any) {
+    this.setState({ error })
+  }
+
+  handleReset = () => {
+    this.props.onReset?.()
+    this.setState({ error: null })
+  }
+
+  render() {
+    if (this.state.error) {
+      return <ErrorView error={this.state.error} onReset={this.handleReset} />
+    } else {
+      return this.props.children
+    }
+  }
+}
+
+function ErrorView({ error, onReset }: { error: Error | Response; onReset: () => void }) {
+  const { reset } = useQueryErrorResetBoundary()
+  useEffect(() => {
+    if (!reset) return
+
+    return () => {
+      onReset()
+      reset()
+    }
+  }, [reset, onReset])
+
+  if (error instanceof Response) {
+    return <ResponseErrorView error={error} onReset={onReset} />
+  }
+
+  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
+}
+
+function ResponseErrorView({ error: response }: { error: Response; onReset: () => void }) {
+  const { status } = response
+  const heading = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Permission required'
+      case 404:
+        return 'Content not found'
+      default:
+        return 'Oops!'
+    }
+  }, [status])
+
+  const body = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Contact your administrator for access.'
+      case 404:
+        return 'If you believe something should be here, please reach out to your administrator.'
+      default:
+        return 'Something unexpected happened.'
+    }
+  }, [status])
+
+  return <ErrorContent heading={heading} body={body} />
+}
+
+function ErrorContent({ heading, body }: { heading: string; body: string }) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.container}>
+      <Icon name="general.outlinedTextMessage" size={32} color={styles.icon.color} />
+      <View style={styles.information}>
+        <Heading variant="h3" style={styles.heading}>
+          {heading}
+        </Heading>
+        <Text style={styles.body}>{body}</Text>
+      </View>
+      <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md" />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { bottom } = useSafeAreaInsets()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 24,
+      paddingHorizontal: 16,
+      paddingBottom: bottom,
+    },
+    information: {
+      alignItems: 'center',
+      gap: 8,
+    },
+    heading: {
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    body: {
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    icon: {
+      color: theme.colors.iconColorDefaultDisabled,
+    },
+  })
+}
+
+export default ErrorBoundary

package/src/components/page/loading.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Spinner } from '../display'
+
+export function DefaultLoading() {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <Spinner size={48} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loading: {
+      color: theme.colors.text,
+    },
+  })
+}

package/src/contexts/api_provider.tsx

@@ -2,8 +2,8 @@ import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-quer
 import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
 import { Client } from '../utils'
-import { GetRequest } from '../utils/client/types'
 import { ChatContext, ChatContextValue } from './chat_context'
+import { RequestQueryKey } from '../hooks'
 
 let apiClient: Client | undefined
 
@@ -12,9 +12,9 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
     throw new Error('No token present')
   }
 
-  const data = queryKey[0] as GetRequest
+  const [url, data, headers] = queryKey as RequestQueryKey
 
-  return apiClient.get(data)
+  return apiClient.get({ url, data, headers })
 }
 
 export const queryClient = new QueryClient({

package/src/hooks/use_conversation_jolt_events.ts

@@ -0,0 +1,67 @@
+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 { getConversationsRequestArgs } from './use_conversations'
+import { useCurrentPerson } from './use_current_person'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+import { getRequestQueryKey } from './use_suspense_api'
+
+type QueryData = InfiniteData<ApiCollection<ConversationResource>>
+interface JoltConversationsEvent extends CustomMessage {
+  data: {
+    data: ConversationResource
+  }
+}
+
+export function useConversationsJoltEvents() {
+  const { client } = useContext(ChatContext)
+  const queryClient = useQueryClient()
+  const currentPerson = useCurrentPerson()
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
+
+  const conversationsRequestArgs = getConversationsRequestArgs()
+  const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
+
+  const fetchConversation = async ({ id }: ConversationResource) => {
+    const { data: argsData } = conversationsRequestArgs
+    const { data } = await client.get<ApiResource<ConversationResource>>({
+      url: `/me/conversations/${id}`,
+      data: {
+        fields: argsData.fields,
+        include: argsData.include,
+      },
+    })
+
+    return data
+  }
+
+  const handleConversationUpdateOrCreate = async (e: JoltConversationsEvent) => {
+    const conversation = await fetchConversation(e.data.data).catch(c => c)
+
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      updateRecordInPagesData({
+        data: prev,
+        record: conversation,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    )
+  }
+
+  const handleConversationDestroy = (e: JoltConversationsEvent) => {
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      deleteRecordInPagesData({
+        data: prev,
+        record: e.data.data,
+      })
+    )
+  }
+
+  useJoltEvent(joltChannel, 'conversation.updated', handleConversationUpdateOrCreate)
+  useJoltEvent(joltChannel, 'conversation.created', handleConversationUpdateOrCreate)
+  useJoltEvent(joltChannel, 'conversation.destroyed', handleConversationDestroy)
+}

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,9 @@
 import { MessageResource } from '../types'
-import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
+import {
+  getRequestQueryKey,
+  SuspensePaginatorOptions,
+  useSuspensePaginator,
+} from './use_suspense_api'
 
 export const useConversationMessages = (
   { conversation_id }: { conversation_id: string },
@@ -39,5 +43,5 @@ export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: s
 
 export const getMessagesQueryKey = ({ conversation_id }: { conversation_id: string }) => {
   const requestArgs = getMessagesRequestArgs({ conversation_id })
-  return [requestArgs.url, requestArgs.data]
+  return getRequestQueryKey(requestArgs)
 }

package/src/hooks/use_conversations.ts

@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+import { ConversationResource } from '../types'
+import { GetRequest } from '../utils/client/types'
+import { useSuspensePaginator } from './use_suspense_api'
+
+export const getConversationsRequestArgs = (): GetRequest => ({
+  url: '/me/conversations',
+  data: {
+    perPage: 20,
+    order: '-last_message',
+    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',
+      ],
+      ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
+    },
+    include: ['badges'],
+  },
+})
+
+export function useConversations() {
+  const requestArgs = getConversationsRequestArgs()
+  const { data, ...rest } = useSuspensePaginator<ConversationResource>(requestArgs)
+
+  const conversations = useMemo(
+    () =>
+      data.sort((a, b) => {
+        const dateA = a.lastMessageCreatedAt || a.createdAt
+        const dateB = b.lastMessageCreatedAt || b.createdAt
+        if (a.lastMessageCreatedAt && !b.lastMessageCreatedAt) return 1
+        if (!a.lastMessageCreatedAt && b.lastMessageCreatedAt) return -1
+        if (dateB > dateA) return 1
+        if (dateB < dateA) return -1
+        return 0
+      }),
+    [data]
+  )
+
+  return { conversations, ...rest }
+}

package/src/hooks/use_jolt.ts

@@ -0,0 +1,101 @@
+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 {
+  FetchSubscribeToken,
+  JoltSubscription,
+} from '@planningcenter/jolt-client/dist/types/JoltSubscription'
+import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+
+interface JoltResponse {
+  type: 'JoltToken'
+  id: string
+  wssUrl: string
+}
+
+export const useJoltClient = (): JoltClient | undefined => {
+  const { client } = useContext(ChatContext)
+  const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
+    refetchOnMount: false,
+    queryKey: ['jolt-token'],
+    queryFn: () => {
+      return client.post({
+        url: '/me/jolt_authorize',
+        data: {
+          data: {
+            type: 'JoltToken',
+            attributes: {},
+          },
+        },
+      })
+    },
+  })
+
+  const fetchAuthTokenFn = async () => {
+    return joltToken.data.id || ''
+  }
+
+  const fetchSubscribeTokenFn: FetchSubscribeToken = (channel: string, connectionId: string) => {
+    return client
+      .post({
+        url: '/me/jolt_subscribe',
+        data: {
+          data: {
+            type: 'JoltSubscribeToken',
+            attributes: { channel, cid: connectionId },
+          },
+        },
+      })
+      .then((res: ApiResource<JoltResponse>) => res.data.id)
+  }
+
+  const { data: joltClient } = useQuery({
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    enabled: Boolean(joltToken),
+    queryKey: ['jolt-client'],
+    queryFn: async () => {
+      if (!joltToken) return undefined
+
+      return new JoltClient(
+        joltToken?.data.wssUrl,
+        {
+          fetchAuthTokenFn,
+          fetchSubscribeTokenFn,
+        },
+        { logToConsole: true }
+      )
+    },
+  })
+
+  return joltClient
+}
+
+export function useJoltChannel(channelName: string) {
+  const [joltChannel, setJoltChannel] = useState<JoltSubscription>()
+  const jolt = useJoltClient()
+
+  useEffect(() => {
+    setJoltChannel(jolt?.subscribe(channelName))
+    return () => jolt?.unsubscribe(channelName)
+  }, [channelName, jolt])
+
+  return joltChannel
+}
+
+type UserCallbackFn<T> = (_event: T) => void
+
+export function useJoltEvent<T extends CustomMessage>(
+  channel: JoltSubscription | undefined,
+  eventName: string,
+  callback: UserCallbackFn<T>
+) {
+  useEffect(() => {
+    if (!channel) return () => {}
+
+    return channel.bind(eventName, e => callback(e as T))
+  }, [channel, eventName, callback])
+}

package/src/hooks/use_suspense_api.ts

@@ -10,10 +10,10 @@ import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
 
 export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(args: GetRequest) => {
-  type Resource = T extends ResourceObject ? ApiResource<T> : ApiCollection<T>
+  type Resource = ApiResource<T>
 
   const { data, ...query } = useSuspenseQuery<Resource, Response>({
-    queryKey: [args],
+    queryKey: getRequestQueryKey(args),
   })
 
   return { ...data, ...query }
@@ -41,7 +41,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
     any,
     Partial<RequestData> | undefined
   >({
-    queryKey: [args.url, args.data],
+    queryKey: getRequestQueryKey(args),
     queryFn: ({ pageParam }) => {
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
@@ -72,3 +72,10 @@ export const useSuspensePaginator = <T extends ResourceObject>(
 
   return { ...query, data }
 }
+
+export type RequestQueryKey = [GetRequest['url'], GetRequest['data'], GetRequest['headers']]
+export const getRequestQueryKey = (args: GetRequest): RequestQueryKey => [
+  args.url,
+  args.data,
+  args.headers,
+]

package/src/navigation/index.tsx

@@ -1,30 +1,42 @@
 import React from 'react'
 import { StaticParamList } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+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 { Icon } from '../components'
-import { MessageActionsScreen, ReactScreenOptions } from '../screens/message_actions_screen'
+import {
+  MessageActionsScreen,
+  MessageActionsScreenOptions,
+} from '../screens/message_actions_screen'
+import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 
 export const ChatStack = createNativeStackNavigator({
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayout,
   screens: {
     Conversations: {
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-        headerLeft: () => (
+        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (
           <HeaderButton>
-            <Icon name="general.threeReducingHorizontalBars" size={18} />
+            <Icon name="general.threeReducingHorizontalBars" size={18} color={tintColor} />
           </HeaderButton>
         ),
-        headerRight: () => (
+        headerRight: (props: NativeStackHeaderRightProps) => (
           <HeaderBackButton
+            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
             onPress={navigation.goBack}
-            backImage={() => <Icon name="general.x" size={18} />}
+            {...props}
           />
         ),
       }),
@@ -35,7 +47,11 @@ export const ChatStack = createNativeStackNavigator({
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS
-      options: ReactScreenOptions,
+      options: MessageActionsScreenOptions,
+    },
+    Reactions: {
+      screen: ReactionsScreen,
+      options: ReactionsScreenOptions,
     },
     NotFound: {
       screen: NotFound,