@planningcenter/chat-react-native 3.1.0-rc.2 → 3.1.0-rc.4

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -15,7 +15,7 @@ import { JoltReactionEvent } from '../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
 
 interface Props {
-  conversationId: string
+  conversationId: number
 }
 
 export function useConversationMessagesJoltEvents({ conversationId }: Props) {

package/src/hooks/use_current_person.ts

@@ -6,7 +6,7 @@ export const useCurrentPerson = () => {
     url: '/me',
     data: {
       fields: {
-        Person: ['id', 'name', 'avatar', 'unread_count', 'pco_chat_enabled'],
+        Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
       },
     },
   })

package/src/screens/conversation_details_screen.tsx

@@ -6,6 +6,7 @@ import React, {
   type SetStateAction,
   type Dispatch,
   type ReactNode,
+  useRef,
 } from 'react'
 import {
   StyleSheet,
@@ -14,6 +15,7 @@ import {
   type TextStyle,
   type ViewStyle,
   type ViewProps,
+  Pressable,
 } from 'react-native'
 import { Heading, Icon, Person, Switch, Text } from '../components'
 import { useSuspenseGet, useTheme } from '../hooks'
@@ -26,6 +28,7 @@ import { MemberResource, isDefined } from '../types'
 import { HeaderRightButton } from '../navigation/header'
 import { FlashList } from '@shopify/flash-list'
 import { space } from '../utils'
+import { tokens } from '../vendor/tapestry/tokens'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -58,7 +61,7 @@ interface DataItem<T, TName extends SectionTypes> {
 // =================================
 
 export type ConversationDetailsScreenProps = StaticScreenProps<{
-  conversation_id: string
+  conversation_id: number
 }>
 
 export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
@@ -70,6 +73,9 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { muted, setMuted } = useConversationMute(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
 
+  const trimmedTitle = title.trim()
+  const emptyTitle = trimmedTitle === '' || title === null
+
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const { data: members } = useSuspenseGet<MemberResource[]>({
     url: `/me/conversations/${route.params.conversation_id}/members`,
@@ -90,14 +96,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     return (
       <HeaderRightButton
         onPress={() => {
-          saveTitle({ title })
+          saveTitle({ title: trimmedTitle || conversation.title })
           navigation.goBack()
         }}
       >
         Done
       </HeaderRightButton>
     )
-  }, [navigation, saveTitle, title])
+  }, [conversation.title, navigation, saveTitle, trimmedTitle])
 
   useEffect(() => {
     navigation.setOptions({
@@ -109,8 +115,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: SectionTypes.view,
       data: {
-        children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,
-        style: styles.titleContainer,
+        children: (
+          <TitleInput
+            canUpdate={canUpdate}
+            title={title}
+            setTitle={setTitle}
+            isEmpty={emptyTitle}
+          />
+        ),
       },
     },
     {
@@ -215,23 +227,45 @@ interface InputProps {
   canUpdate: boolean
   title: string
   setTitle: Dispatch<SetStateAction<string>>
+  style?: ViewStyle
+  isEmpty: boolean
 }
 
-function TitleInput({ canUpdate, title, setTitle }: InputProps) {
+function TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps) {
   const styles = useStyles()
+  const textRef = useRef<TextInput>(null)
+
+  const handleFocus = () => {
+    if (textRef.current) {
+      textRef.current.focus()
+    }
+  }
+
   return (
-    <>
-      <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
-        <Text variant="tertiary">Title</Text>
-        {!canUpdate && <Icon name="general.lock" />}
+    <Pressable style={[styles.titleContainer, style]} onPress={() => handleFocus()}>
+      <View style={styles.titleLabelContainer}>
+        <Text variant="tertiary" style={styles.titleLabel}>
+          Title
+        </Text>
+        {!canUpdate && <Icon name="general.lock" style={styles.titleDisabledIcon} />}
       </View>
       <TextInput
+        ref={textRef}
         editable={canUpdate}
         onChangeText={setTitle}
         style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
         value={title}
+        multiline
+        maxLength={255} // Matches Chat Web
+        enterKeyHint="done"
+        submitBehavior="blurAndSubmit"
       />
-    </>
+      {isEmpty && (
+        <Text variant="footnote" style={styles.inputValidationText}>
+          A title is required for your conversation.
+        </Text>
+      )}
+    </Pressable>
   )
 }
 
@@ -298,17 +332,33 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     addBottomBorder: {
       borderBottomWidth: isEnd ? 0 : 1,
     },
-    titleContainer: {},
-    titleLabel: {},
+    titleContainer: {
+      gap: 4,
+    },
     titleLabelContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 8,
+      gap: 4,
+    },
+    titleLabel: {
+      color: colors.textColorDefaultSecondary,
+    },
+    titleDisabledIcon: {
+      color: colors.iconColorDefaultSecondary,
     },
     titleInput: {
       color: colors.textColorDefaultPrimary,
+      fontSize: tokens.fontSizeMd,
+    },
+    titleInputDisabled: {
+      color: colors.textColorDefaultSecondary,
+    },
+    inputValidationText: {
+      color: colors.statusErrorText,
+      paddingTop: 8,
+      borderTopWidth: 1,
+      borderColor: colors.borderColorStatusError,
     },
-    titleInputDisabled: { opacity: 0.7 },
     header: {
       paddingVertical: space(1.5),
     },

package/src/screens/conversation_screen.tsx

@@ -16,7 +16,7 @@ import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 
 type ConversationRouteProps = {
-  conversation_id: string
+  conversation_id: number
   chat_group_graph_id?: string
 }
 

package/src/screens/create/conversation_create_screen.tsx

@@ -64,7 +64,7 @@ export const ConversationCreateScreen = ({ route }: ConversationCreateScreenProp
   })
 
   const handleRedirectToConversation = useCallback(
-    ({ conversation_id }: { conversation_id: string }) => {
+    ({ conversation_id }: { conversation_id: number }) => {
       // exit from the create stack
       navigation.getParent()?.goBack()
       // navigate to the conversation screen

package/src/screens/design_system_screen.tsx

@@ -52,7 +52,7 @@ const URL = {
 }
 
 const personAdult = {
-  id: '1',
+  id: 1,
   type: 'Member' as const,
   name: 'John Doe',
   avatar: URL.avatar,
@@ -61,7 +61,7 @@ const personAdult = {
 }
 
 const personChild = {
-  id: '2',
+  id: 2,
   type: 'Member' as const,
   name: 'Kid McChild',
   avatar: URL.two_avatars[1],

package/src/screens/message_actions_screen.tsx

@@ -24,7 +24,7 @@ export const MessageActionsScreenOptions: NativeStackNavigationOptions = {
 
 export type ReactionScreenProps = StaticScreenProps<{
   message_id: string
-  conversation_id: string
+  conversation_id: number
 }>
 
 export function MessageActionsScreen({ route }: ReactionScreenProps) {

package/src/screens/reactions_screen.tsx

@@ -20,7 +20,7 @@ export const ReactionsScreenOptions: NativeStackNavigationOptions = {
 
 export type ReactionScreenProps = StaticScreenProps<{
   message_id: string
-  conversation_id: string
+  conversation_id: number
   reaction_value?: string
 }>
 
@@ -45,7 +45,7 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
     React.useState<ReactionCountResource>(initialReactionCount)
 
   const authorIds = reactionCount.authorIds
-  const authors = members.filter(member => authorIds.includes(member.id))
+  const authors = members.filter(member => authorIds.includes(member.id.toString()))
 
   return (
     <View style={styles.container}>
@@ -64,7 +64,7 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
       />
       <FlatList
         data={authors}
-        keyExtractor={item => item.id}
+        keyExtractor={item => item.id.toString()}
         renderItem={({ item: author }) => (
           <View style={styles.authorList}>
             <Avatar size={'md'} sourceUri={author.avatar} />

package/src/types/api_primitives.ts

@@ -1,5 +1,5 @@
 export interface ResourceObject {
-  id: string
+  id: string | number
   type: string
 }
 

package/src/types/resources/app_grant.ts

@@ -1,6 +1,8 @@
 import { ResourceObject } from '../api_primitives'
 
 export interface AppGrantsResource extends ResourceObject {
+  type: 'AppGrant'
+  id: number
   createConversations: boolean
   appName: string
 }

package/src/types/resources/conversation.ts

@@ -4,7 +4,7 @@ import { MemberAbilityResource } from './member_ability'
 
 export interface ConversationResource {
   type: 'Conversation'
-  id: string
+  id: number
   badges?: ConversationBadgeResource[]
   createdAt: string
   deleted?: boolean

package/src/types/resources/groups/groups_group_resource.ts

@@ -1,6 +1,8 @@
 import { ResourceObject } from '../../api_primitives'
 
 export interface GroupsGroupResource extends ResourceObject {
+  id: string
+  type: 'Group'
   headerImage: {
     thumbnail: string
     medium: string

package/src/types/resources/member.ts

@@ -1,6 +1,6 @@
 export interface MemberResource {
   type: 'Member'
-  id: string
+  id: number
   name: string
   avatar: string
   badges: MemberBadge[]

package/src/types/resources/person.ts

@@ -1,6 +1,8 @@
 import { ResourceObject } from '../api_primitives'
 
 export interface PersonResource extends ResourceObject {
+  id: number
+  type: 'Person'
   name: string
   avatar: string
 }

package/src/types/resources/reaction.ts

@@ -5,5 +5,5 @@ export interface ReactionCountResource {
   count: number
   mine: number
   messageId: string
-  authorIds: string[]
+  authorIds: string[] // These is in fact a string array
 }

package/src/utils/cache/page_mutations.ts

@@ -101,7 +101,7 @@ export function deleteRecordInPagesData<T extends ResourceObject>({
   record,
 }: {
   data?: { pages: ApiCollection<T>[]; pageParams: any }
-  record: T
+  record: { id: string | number }
 }) {
   if (!data) return data
 

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -8,7 +8,7 @@ export function transformMessageEventDataToMessageResource({
   currentPersonId,
 }: {
   data: MessageCreatedEvent['data']['data']
-  currentPersonId: string
+  currentPersonId: number
 }): MessageResource {
   return {
     type: 'Message',
@@ -18,11 +18,11 @@ export function transformMessageEventDataToMessageResource({
     createdAt: data.created_at,
     deletedAt: data.deleted_at,
     textEditedAt: data.text_edited_at,
-    mine: data.author_id.toString() === currentPersonId.toString(),
+    mine: data.author_id === currentPersonId,
     attachments: deepCamelCaseKeys<DenormalizedAttachmentResource[]>(data.attachments) || [],
     author: {
       type: 'Person',
-      id: data.author_id.toString(),
+      id: data.author_id,
       name: data.author_name,
       avatar: data.author_avatar,
     },

package/src/utils/jolt/transform_reaction_event_data_to_reaction_count_resource.ts

@@ -6,7 +6,7 @@ interface Props {
   data: ReactionCreatedEvent['data']['data']
   oldData?: ReactionCountResource
   event: JoltReactionEvent['event']
-  currentPersonId: string
+  currentPersonId: number
 }
 
 export function transformReactionEventDataToReactionCountResource({

package/src/utils/theme.ts

@@ -73,6 +73,7 @@ interface ChatColors {
   statusNeutralIcon: string
   statusNeutralText: string
   statusNeutralBackground: string
+  borderColorStatusError: string
 }
 
 const colorsChatLight: ChatColors = {
@@ -99,6 +100,7 @@ const colorsChatLight: ChatColors = {
   statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,
   statusNeutralText: tokens.textColorStatusNeutral,
   statusNeutralBackground: tokens.fillColorStatusNeutralGhost,
+  borderColorStatusError: tokens.borderColorStatusError,
 }
 
 const colorsChatDark: ChatColors = {
@@ -125,6 +127,7 @@ const colorsChatDark: ChatColors = {
   statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,
   statusNeutralText: tokens.textColorStatusNeutralDark,
   statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,
+  borderColorStatusError: tokens.borderColorStatusErrorDark,
 }
 
 const chatThemeColorMap = {

package/src/vendor/tapestry/tokens.ts

@@ -20,6 +20,8 @@ const colorPrimitives = {
   colorNeutral95: 'hsl(0, 0%, 95%)',
   colorNeutral97: 'hsl(0, 0%, 97%)',
   colorNeutral98: 'hsl(0, 0%, 98%)',
+  borderColorStatusError: 'hsl(8, 60%, 47%)',
+  borderColorStatusErrorDark: 'hsl(8, 60%, 55%)',
   colorNeutral100White: 'hsl(0, 0%, 100%)',
   fillColorInteractionDefault: 'hsl(204, 100%, 40%)',
   fillColorStatusNeutralGhost: 'hsl(0, 0%, 93%)',