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

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

@@ -7,7 +7,11 @@ 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({
   screenLayout: ScreenLayout,
@@ -35,7 +39,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,

package/src/screens/message_actions_screen.tsx

@@ -15,7 +15,7 @@ import { ReactionCountResource } from '../types/resources/reaction'
 import { updateRecordInPagesData } from '../utils'
 import { Clipboard } from '../utils/native_adapters'
 
-export const ReactScreenOptions: NativeStackNavigationOptions = {
+export const MessageActionsScreenOptions: NativeStackNavigationOptions = {
   presentation: 'formSheet',
   headerShown: false,
   sheetAllowedDetents: [0.25],

package/src/screens/reactions_screen.tsx

@@ -0,0 +1,131 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React from 'react'
+import { FlatList, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Avatar, Text } from '../components'
+import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
+import { Tabs } from '../components/display/tabs'
+import { useSuspenseGet, useTheme } from '../hooks'
+import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { MemberResource } from '../types'
+import { ReactionCountResource } from '../types/resources/reaction'
+
+export const ReactionsScreenOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents: [0.5],
+  sheetGrabberVisible: true,
+}
+
+export type ReactionScreenProps = StaticScreenProps<{
+  message_id: string
+  conversation_id: string
+  reaction_value?: string
+}>
+
+export function ReactionsScreen({ route }: ReactionScreenProps) {
+  const { conversation_id, message_id, reaction_value } = route.params
+  const styles = useStyles()
+
+  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
+  const { data: members } = useSuspenseGet<MemberResource[]>({
+    url: `/me/conversations/${conversation_id}/members`,
+    data: {
+      fields: {
+        Member: ['id', 'name', 'avatar', 'badges', 'child', 'role'],
+      },
+    },
+  })
+  const message = messages.find(m => m.id === message_id)
+  const reactionCounts = message?.reactionCounts || []
+  const initialReactionCount =
+    reactionCounts.find(r => r.value === reaction_value) || reactionCounts[0]
+  const [reactionCount, setReactionCount] =
+    React.useState<ReactionCountResource>(initialReactionCount)
+
+  const authorIds = reactionCount.authorIds
+  const authors = members.filter(member => authorIds.includes(member.id))
+
+  return (
+    <View style={styles.container}>
+      <Tabs
+        data={reactionCounts}
+        activeTab={reactionCount}
+        onTabPress={setReactionCount}
+        renderItem={({ item }) => (
+          <Reaction
+            active={reactionCount.id === item.id}
+            reaction={item}
+            onPress={() => setReactionCount(item)}
+          />
+        )}
+        style={styles.actions}
+      />
+      <FlatList
+        data={authors}
+        keyExtractor={item => item.id}
+        renderItem={({ item: author }) => (
+          <View style={styles.authorList}>
+            <Avatar size={'md'} sourceUri={author.avatar} />
+            <Text key={author.id}>{author.name}</Text>
+          </View>
+        )}
+      />
+    </View>
+  )
+}
+
+const Reaction = ({
+  reaction,
+}: {
+  active: boolean
+  reaction: ReactionCountResource
+  onPress: () => void
+}) => {
+  const styles = useStyles()
+  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })
+
+  return (
+    <View key={reaction.value} style={styles.reaction}>
+      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { height } = useWindowDimensions()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    container: {
+      justifyContent: 'flex-start',
+      paddingTop: 12,
+      paddingBottom: bottom,
+      width: '100%',
+      backgroundColor: theme.colors.fillColorNeutral100Inverted,
+      height,
+      gap: 8,
+    },
+    authorList: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+    },
+    reaction: {
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      flexDirection: 'row',
+      gap: 4,
+    },
+    actions: {
+      minHeight: 48,
+      borderBottomColor: theme.colors.fillColorNeutral040,
+      borderBottomWidth: 1,
+    },
+  })
+}

package/src/types/resources/app_name.ts

@@ -0,0 +1 @@
+export type AppName = 'Services' | 'Groups'

package/src/types/resources/conversation.ts

@@ -1,15 +1,23 @@
-import type { ResourceObject } from '../api_primitives'
+import { ConversationBadgeResource } from './conversation_badge'
+import { GroupResource } from './group_resource'
+import { MemberAbilityResource } from './member_ability'
 
-export interface ConversationResource extends ResourceObject {
-  title: string
-  subtitle: string
+export interface ConversationResource {
+  type: 'Conversation'
+  id: string
+  badges?: ConversationBadgeResource[]
   createdAt: string
-  updatedAt: string
+  deleted?: boolean
+  groups?: GroupResource[]
+  previewAvatarUrls?: string[]
+  lastMessageAuthorId?: string
+  lastMessageAuthorName?: string
+  lastMessageCreatedAt?: string
+  lastMessageTextPreview?: string
+  memberAbility?: MemberAbilityResource
+  muted: boolean
   repliesDisabled: boolean
-  lastMessageAuthorId: string
-  lastMessageAuthorName: string
-  lastMessageCreatedAt: string
-  lastMessageTextPreview: string
+  title: string
   unreadCount: number
-  muted: boolean
+  updatedAt: string
 }

package/src/types/resources/conversation_badge.ts

@@ -0,0 +1,10 @@
+import { AppName } from './app_name'
+
+export interface ConversationBadgeResource {
+  type: 'ConversationBadge'
+  id: string
+  links: { self: string }
+  text: string | null
+  appName: AppName
+  pcoResourceType: string
+}

package/src/types/resources/group_resource.ts

@@ -0,0 +1,10 @@
+import { AppName } from './app_name'
+
+export interface GroupResource {
+  type: 'Group'
+  id: string
+  links: { self: string }
+  name: string | null
+  sourceAppName: AppName
+  sourceType: string
+}

package/src/types/resources/index.ts

@@ -1,4 +1,5 @@
 export * from './conversation'
+export * from './member'
 export * from './message'
-export * from './person'
 export * from './oauth_token'
+export * from './person'

package/src/types/resources/member.ts

@@ -0,0 +1,24 @@
+export interface MemberResource {
+  type: 'Member'
+  id: string
+  name: string
+  avatar: string
+  badges: MemberBadge[]
+  child: boolean
+  role?: string
+}
+
+export interface MemberResourceWithPerson extends MemberResource {
+  person: {
+    firstName: string
+    lastName: string
+    avatarUrl: string
+    child: boolean
+    id: string
+    type: 'Person'
+  }
+}
+
+export interface MemberBadge {
+  title: string
+}

package/src/types/resources/member_ability.ts

@@ -0,0 +1,5 @@
+export interface MemberAbilityResource {
+  type: 'MemberAbility'
+  canUpdate: boolean
+  canDelete: boolean
+}

package/src/types/resources/reaction.ts

@@ -5,5 +5,5 @@ export interface ReactionCountResource {
   count: number
   mine: number
   messageId: string
-  authorIds: number[]
+  authorIds: string[]
 }

package/src/utils/cache/page_mutations.ts

@@ -17,7 +17,7 @@ export function updateRecordInPagesData<T extends ResourceObject>({
 }: {
   data?: { pages: ApiCollection<T>[]; pageParams: any }
   record: T
-  processRecord?: (_record: T) => T
+  processRecord?: (_next: T, _prev?: T) => T
 }) {
   if (!data) return data
 
@@ -26,7 +26,7 @@ export function updateRecordInPagesData<T extends ResourceObject>({
     const newData = page.data.map(message => {
       if (message.id === record.id) {
         foundRecord = true
-        return processRecord(record)
+        return processRecord(record, message)
       }
       return message
     })
@@ -37,9 +37,9 @@ export function updateRecordInPagesData<T extends ResourceObject>({
   if (!foundRecord) {
     // Can be used to add as well but it's not at all efficient. It's better to use addRecordInPagesData.
     // This is a fallback for when the record is not found in the cache.
-    const lastPage = { ...newPages[newPages.length - 1] }
-    lastPage.data = [...lastPage.data, processRecord(record)]
-    newPages[newPages.length - 1] = lastPage
+    const firstPage = { ...newPages[0] }
+    firstPage.data = [processRecord(record), ...firstPage.data]
+    newPages[0] = firstPage
   }
 
   return { ...data, pages: newPages }
@@ -52,15 +52,38 @@ export function addRecordInPagesData<T extends ResourceObject>({
 }: {
   data?: { pages: ApiCollection<T>[]; pageParams: any }
   record: T
-  processRecord?: (_record: T) => T
+  processRecord?: (_next: T, _prev?: T) => T
 }) {
   if (!data) return data
 
   const newPages = [...data.pages]
-  const lastPage = { ...newPages[newPages.length - 1] }
-  lastPage.data = [...lastPage.data, processRecord(record)]
+  const firstPage = { ...newPages[0] }
+  firstPage.data = [processRecord(record), ...firstPage.data]
 
-  newPages[newPages.length - 1] = lastPage
+  newPages[0] = firstPage
+
+  return { ...data, pages: newPages }
+}
+
+/**
+ * deleteRecordInPagesData
+ */
+export function deleteRecordInPagesData<T extends ResourceObject>({
+  data,
+  record,
+}: {
+  data?: { pages: ApiCollection<T>[]; pageParams: any }
+  record: T
+}) {
+  if (!data) return data
+
+  const newPages = data.pages.map(page => {
+    const newData = page.data.filter(message => {
+      return message.id !== record.id
+    })
+
+    return { ...page, data: newData }
+  })
 
   return { ...data, pages: newPages }
 }

package/src/utils/client/client.ts

@@ -1,6 +1,6 @@
 import { ApiCollection, ApiResource } from '../../types'
 import { Session } from '../session'
-import Uri from '../uri'
+import { Uri } from '../uri'
 import {
   concatRecords,
   ensureNoQueryParamsInDev,

package/src/utils/date.ts

@@ -0,0 +1,25 @@
+import { date as formatDate } from '@planningcenter/datetime-fmt'
+import moment from 'moment-timezone'
+
+type DateProps = string | number | Date
+
+export function formatDatePreview(date?: DateProps) {
+  if (!date) return ''
+
+  const now = moment()
+  const isToday = now.isSame(date, 'day')
+  const isThisWeek = now.isSame(date, 'week')
+  const isThisYear = now.isSame(date, 'year')
+
+  if (isToday) return moment(date).format('h:mm a')
+  if (isThisWeek) return formatDate(date, { style: 'relative-short' })
+  if (isThisYear) return formatDate(date, { style: 'abbreviated' })
+
+  // TODO: Org date format
+  return formatShorterDate(date)
+}
+
+const formatShorterDate = (date: DateProps) => {
+  // Drop the century from the year
+  return formatDate(date, { style: 'short', year: true }).replace(/20(\d{2})/, '$1')
+}

package/src/utils/session.ts

@@ -2,18 +2,11 @@ import { OAuthToken } from '../types'
 
 export type ENV = 'production' | 'staging' | 'development'
 
-export const baseUrlMap = {
-  production: 'api.planningcenteronline.com',
-  staging: 'api-staging.planningcenteronline.com',
-  development: 'api.pco.test',
-}
-
 type SessionProps = { env?: ENV; token?: OAuthToken } | undefined
 
 /**
  * Session class to track the environment and token
  * Not intended to make network requests or handle authentication
- * - returns urls for convenience only
  */
 export class Session {
   env: ENV

package/src/utils/uri.ts

@@ -7,7 +7,7 @@ const systemVersion = DeviceInfo.getSystemVersion()
 const readableVersion = DeviceInfo.getReadableVersion()
 const appName = DeviceInfo.getApplicationName()
 
-export default class Uri {
+export class Uri {
   session: Session
   app?: string