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

package/src/navigation/screenLayout.tsx

@@ -1,20 +1,15 @@
 import React from 'react'
-import { QueryErrorResetBoundary } from '@tanstack/react-query'
-import ErrorBoundary from '../components/error_boundary'
+import ErrorBoundary from '../components/page/error_boundary'
 import { Suspense } from 'react'
-import { Text } from '../components/display'
 import { ApiProvider } from '../contexts'
+import { DefaultLoading } from '../components/page/loading'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {
   return (
     <ApiProvider>
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary onReset={reset}>
-            <Suspense fallback={<Text>loading...</Text>}>{children}</Suspense>
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>
+      <ErrorBoundary>
+        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
+      </ErrorBoundary>
     </ApiProvider>
   )
 }

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/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/build/components/error_boundary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGhD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;IACtF,KAAK;;;MAGJ;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,MAAM;CAOP;AAED,eAAe,aAAa,CAAA"}

package/build/components/error_boundary.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-class ErrorBoundary extends React.Component {
-    state = {
-        error: null,
-        unsubscriber: () => { },
-    };
-    componentDidCatch(error) {
-        this.handleError(error);
-    }
-    handleError(error) {
-        this.setState({ error });
-    }
-    render() {
-        if (this.state.error) {
-            return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>;
-        }
-        else {
-            return this.props.children;
-        }
-    }
-}
-export default ErrorBoundary;
-//# sourceMappingURL=error_boundary.js.map

package/build/components/error_boundary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,MAAM,aAAc,SAAQ,KAAK,CAAC,SAAsD;IACtF,KAAK,GAAG;QACN,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;KACvB,CAAA;IAED,iBAAiB,CAAC,KAAU;QAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,WAAW,CAAC,KAAU;QACpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC5B,CAAC;IACH,CAAC;CACF;AAED,eAAe,aAAa,CAAA","sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { Text } from 'react-native'\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {\n  state = {\n    error: null,\n    unsubscriber: () => {},\n  }\n\n  componentDidCatch(error: any) {\n    this.handleError(error)\n  }\n\n  handleError(error: any) {\n    this.setState({ error })\n  }\n\n  render() {\n    if (this.state.error) {\n      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>\n    } else {\n      return this.props.children\n    }\n  }\n}\n\nexport default ErrorBoundary\n"]}

package/src/components/error_boundary.tsx

@@ -1,27 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { Text } from 'react-native'
-
-class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
-  state = {
-    error: null,
-    unsubscriber: () => {},
-  }
-
-  componentDidCatch(error: any) {
-    this.handleError(error)
-  }
-
-  handleError(error: any) {
-    this.setState({ error })
-  }
-
-  render() {
-    if (this.state.error) {
-      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>
-    } else {
-      return this.props.children
-    }
-  }
-}
-
-export default ErrorBoundary