@planningcenter/chat-react-native 3.1.0-rc.9 → 3.2.0-rc.0

package/src/utils/parse_simple_markdown.ts

@@ -0,0 +1,40 @@
+// Supports bold, italic, and links
+export const parseSimpleMarkdown = input => {
+  const parts: MarkdownPart[] = []
+
+  const pattern = /(\*\*|__)(.+?)\1|(?<!\*)\*(.+?)\*|(?<!_)_(.+?)_|(https?:\/\/[^\s]+)/g
+  let lastIndex = 0
+
+  input.replace(pattern, (match, bold, boldText, italic1, italic2, url, offset) => {
+    if (offset > lastIndex) {
+      parts.push({ type: 'text', content: input.slice(lastIndex, offset) })
+    }
+
+    if (bold) {
+      parts.push({ type: 'bold', content: boldText })
+    } else if (italic1 || italic2) {
+      parts.push({ type: 'italic', content: italic1 || italic2 })
+    } else if (url) {
+      const urlMatch = url.match(/^(https?:\/\/[^\s]+)([.,;!?]+)$/)
+      const urlContent = urlMatch ? urlMatch[1] : url
+      parts.push({ type: 'link', content: urlContent })
+      const punctuation = urlMatch ? urlMatch[2] : ''
+      if (punctuation) {
+        parts.push({ type: 'text', content: punctuation })
+      }
+    }
+
+    lastIndex = offset + match.length
+  })
+
+  if (lastIndex < input.length) {
+    parts.push({ type: 'text', content: input.slice(lastIndex) })
+  }
+
+  return parts
+}
+
+interface MarkdownPart {
+  type: 'text' | 'bold' | 'italic' | 'link'
+  content: string
+}

package/src/utils/pluralize.ts

@@ -0,0 +1,11 @@
+const irregularInflections: Record<string, string> = { person: 'people' }
+
+export function pluralize(count: number, singularWord: string, includeCount = true) {
+  const plural = count !== 1
+  const pluralWord = irregularInflections[singularWord] || `${singularWord}s`
+
+  return [
+    includeCount ? `${count.toLocaleString()} ` : '',
+    plural ? pluralWord : singularWord,
+  ].join('')
+}

package/src/utils/request/conversation.ts

@@ -0,0 +1,46 @@
+import { GetRequest } from '../client/types'
+
+export interface ConversationRequestArgs {
+  filter: string
+  gids: string
+  group: string
+  chat_group_graph_id?: string
+  group_source_app_name?: string
+}
+
+export const getConversationsRequestArgs = ({
+  filter,
+  gids,
+  group,
+  group_source_app_name,
+}: Partial<ConversationRequestArgs> = {}): GetRequest => ({
+  url: '/me/conversations',
+  data: {
+    perPage: 20,
+    order: '-last_message',
+    filter,
+    group,
+    gids,
+    group_source_app_name,
+    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'],
+  },
+})

package/src/utils/request/messages.ts

@@ -0,0 +1,21 @@
+export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
+  url: `/me/conversations/${conversation_id}/messages`,
+  data: {
+    perPage: 25,
+    fields: {
+      Message: [
+        'text',
+        'text_edited_at',
+        'mine',
+        'attachments',
+        'created_at',
+        'deleted_at',
+        'author',
+        'reaction_counts',
+      ],
+      Person: ['name', 'avatar'],
+      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
+    },
+    include: ['author', 'reaction_counts'],
+  },
+})

package/src/utils/theme.ts

@@ -27,7 +27,7 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
-  showBadgeLogo: boolean
+  showBadgeProductLogo: boolean
 }
 
 export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
@@ -43,7 +43,7 @@ export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
     button: {
       borderRadius: 40,
     },
-    showBadgeLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
+    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
   }
 }
 

package/build/components/conversations.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Conversations: () => React.JSX.Element;
-//# sourceMappingURL=conversations.d.ts.map

package/build/components/conversations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAUtC,eAAO,MAAM,aAAa,yBAwEzB,CAAA"}

package/build/components/conversations.js

@@ -1,100 +0,0 @@
-import { useNavigation } from '@react-navigation/native';
-import { FlashList } from '@shopify/flash-list';
-import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { useTheme } from '../hooks';
-import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events';
-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 = useMemo(() => conversations.filter(c => c.lastMessageTextPreview) || [], [conversations]);
-    const navigation = useNavigation();
-    useConversationsJoltEvents();
-    return (<View style={styles.container}>
-      <FlashList data={nonEmptyConversations} estimatedItemSize={97} contentContainerStyle={styles.contentContainer} onRefresh={refetch} refreshing={isRefetching} ListHeaderComponent={<View style={styles.header}>
-            <Heading numberOfLines={1} variant="h2">
-              Conversations
-            </Heading>
-            <TextButton>Mark all read</TextButton>
-          </View>} ListEmptyComponent={<Text>No conversations found</Text>} renderItem={({ item }) => (<Pressable style={styles.conversation} onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}>
-            <AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []}/>
-            <View style={styles.conversationBody}>
-              <Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
-                {item.title}
-              </Heading>
-              <Text style={styles.listItem} numberOfLines={2}>
-                {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
-              </Text>
-              <View style={styles.conversationBadges}>
-                {item.badges?.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
-              </View>
-            </View>
-            <View style={styles.conversationExtra}>
-              <Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
-              <UnreadCountBadge count={item.unreadCount}/>
-            </View>
-          </Pressable>)} onEndReached={() => fetchNextPage()}/>
-      <ActionButton visible={canCreateConversations} title="New conversation" onPress={() => navigation.navigate('Create')}/>
-    </View>);
-};
-const UnreadCountBadge = ({ count }) => {
-    const styles = useStyles();
-    const displayCount = count > 99 ? '99+' : count;
-    if (count === 0)
-        return null;
-    return (<Text variant="tertiary" style={styles.unreadCountBadge}>
-      {displayCount}
-    </Text>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    return StyleSheet.create({
-        header: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            paddingTop: 8,
-            paddingBottom: 8,
-            paddingHorizontal: 16,
-        },
-        container: { flex: 1 },
-        contentContainer: { paddingVertical: 16 },
-        listItem: { color: colors.fillColorNeutral020 },
-        conversation: {
-            flexDirection: 'row',
-            gap: 8,
-            borderBottomWidth: 1,
-            borderBottomColor: colors.fillColorNeutral060,
-            paddingTop: 4,
-            paddingBottom: 12,
-            paddingHorizontal: 16,
-        },
-        conversationTitle: {},
-        conversationBody: {
-            flex: 1,
-            rowGap: 2,
-        },
-        conversationExtra: {
-            rowGap: 2,
-        },
-        conversationBadges: {
-            marginTop: 4,
-            alignItems: 'flex-start',
-        },
-        unreadCountBadge: {
-            alignSelf: 'flex-end',
-            backgroundColor: colors.interaction,
-            paddingVertical: 0,
-            paddingHorizontal: 10,
-            borderRadius: 24,
-            color: 'white',
-        },
-    });
-};
-//# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { FlashList } from '@shopify/flash-list'\nimport React, { useMemo } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'\nimport { useConversations } from '../hooks/use_conversations'\nimport { formatDatePreview } from '../utils/date'\nimport { AvatarGroup, Badge, Heading, Text, TextButton } from './display'\nimport { ActionButton } from './display/action_button'\nimport { useCanCreateConversations } from '../hooks/use_chat_permissions'\n\nexport const Conversations = () => {\n  const styles = useStyles()\n\n  const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()\n  const canCreateConversations = useCanCreateConversations()\n\n  // TODO: Filter using the API\n  const nonEmptyConversations = useMemo(\n    () => conversations.filter(c => c.lastMessageTextPreview) || [],\n    [conversations]\n  )\n  const navigation = useNavigation()\n\n  useConversationsJoltEvents()\n\n  return (\n    <View style={styles.container}>\n      <FlashList\n        data={nonEmptyConversations}\n        estimatedItemSize={97}\n        contentContainerStyle={styles.contentContainer}\n        onRefresh={refetch}\n        refreshing={isRefetching}\n        ListHeaderComponent={\n          <View style={styles.header}>\n            <Heading numberOfLines={1} variant=\"h2\">\n              Conversations\n            </Heading>\n            <TextButton>Mark all read</TextButton>\n          </View>\n        }\n        ListEmptyComponent={<Text>No conversations found</Text>}\n        renderItem={({ item }) => (\n          <Pressable\n            style={styles.conversation}\n            onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}\n          >\n            <AvatarGroup size=\"lg\" sourceUris={item.previewAvatarUrls || []} />\n            <View style={styles.conversationBody}>\n              <Heading numberOfLines={1} variant=\"h3\" style={styles.conversationTitle}>\n                {item.title}\n              </Heading>\n              <Text style={styles.listItem} numberOfLines={2}>\n                {item.lastMessageAuthorName}: {item.lastMessageTextPreview}\n              </Text>\n              <View style={styles.conversationBadges}>\n                {item.badges?.map(badge => (\n                  <Badge\n                    key={badge.text}\n                    variant=\"meta\"\n                    productLogoName={badge.appName}\n                    label={badge.pcoResourceType}\n                    metaLabel={badge.text || ''}\n                  />\n                ))}\n              </View>\n            </View>\n            <View style={styles.conversationExtra}>\n              <Text variant=\"secondary\">{formatDatePreview(item.lastMessageCreatedAt)}</Text>\n              <UnreadCountBadge count={item.unreadCount} />\n            </View>\n          </Pressable>\n        )}\n        onEndReached={() => fetchNextPage()}\n      />\n      <ActionButton\n        visible={canCreateConversations}\n        title=\"New conversation\"\n        onPress={() => navigation.navigate('Create')}\n      />\n    </View>\n  )\n}\n\nconst UnreadCountBadge = ({ count }: { count: number }) => {\n  const styles = useStyles()\n  const displayCount = count > 99 ? '99+' : count\n\n  if (count === 0) return null\n\n  return (\n    <Text variant=\"tertiary\" style={styles.unreadCountBadge}>\n      {displayCount}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    header: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n      paddingBottom: 8,\n      paddingHorizontal: 16,\n    },\n    container: { flex: 1 },\n    contentContainer: { paddingVertical: 16 },\n    listItem: { color: colors.fillColorNeutral020 },\n    conversation: {\n      flexDirection: 'row',\n      gap: 8,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.fillColorNeutral060,\n      paddingTop: 4,\n      paddingBottom: 12,\n      paddingHorizontal: 16,\n    },\n    conversationTitle: {},\n    conversationBody: {\n      flex: 1,\n      rowGap: 2,\n    },\n    conversationExtra: {\n      rowGap: 2,\n    },\n    conversationBadges: {\n      marginTop: 4,\n      alignItems: 'flex-start',\n    },\n    unreadCountBadge: {\n      alignSelf: 'flex-end',\n      backgroundColor: colors.interaction,\n      paddingVertical: 0,\n      paddingHorizontal: 10,\n      borderRadius: 24,\n      color: 'white',\n    },\n  })\n}\n"]}

package/src/components/conversations.tsx

@@ -1,144 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { FlashList } from '@shopify/flash-list'
-import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
-import { useTheme } from '../hooks'
-import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'
-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 = useMemo(
-    () => conversations.filter(c => c.lastMessageTextPreview) || [],
-    [conversations]
-  )
-  const navigation = useNavigation()
-
-  useConversationsJoltEvents()
-
-  return (
-    <View style={styles.container}>
-      <FlashList
-        data={nonEmptyConversations}
-        estimatedItemSize={97}
-        contentContainerStyle={styles.contentContainer}
-        onRefresh={refetch}
-        refreshing={isRefetching}
-        ListHeaderComponent={
-          <View style={styles.header}>
-            <Heading numberOfLines={1} variant="h2">
-              Conversations
-            </Heading>
-            <TextButton>Mark all read</TextButton>
-          </View>
-        }
-        ListEmptyComponent={<Text>No conversations found</Text>}
-        renderItem={({ item }) => (
-          <Pressable
-            style={styles.conversation}
-            onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
-          >
-            <AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []} />
-            <View style={styles.conversationBody}>
-              <Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
-                {item.title}
-              </Heading>
-              <Text style={styles.listItem} numberOfLines={2}>
-                {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
-              </Text>
-              <View style={styles.conversationBadges}>
-                {item.badges?.map(badge => (
-                  <Badge
-                    key={badge.text}
-                    variant="meta"
-                    productLogoName={badge.appName}
-                    label={badge.pcoResourceType}
-                    metaLabel={badge.text || ''}
-                  />
-                ))}
-              </View>
-            </View>
-            <View style={styles.conversationExtra}>
-              <Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
-              <UnreadCountBadge count={item.unreadCount} />
-            </View>
-          </Pressable>
-        )}
-        onEndReached={() => fetchNextPage()}
-      />
-      <ActionButton
-        visible={canCreateConversations}
-        title="New conversation"
-        onPress={() => navigation.navigate('Create')}
-      />
-    </View>
-  )
-}
-
-const UnreadCountBadge = ({ count }: { count: number }) => {
-  const styles = useStyles()
-  const displayCount = count > 99 ? '99+' : count
-
-  if (count === 0) return null
-
-  return (
-    <Text variant="tertiary" style={styles.unreadCountBadge}>
-      {displayCount}
-    </Text>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-
-  return StyleSheet.create({
-    header: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 8,
-      paddingBottom: 8,
-      paddingHorizontal: 16,
-    },
-    container: { flex: 1 },
-    contentContainer: { paddingVertical: 16 },
-    listItem: { color: colors.fillColorNeutral020 },
-    conversation: {
-      flexDirection: 'row',
-      gap: 8,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.fillColorNeutral060,
-      paddingTop: 4,
-      paddingBottom: 12,
-      paddingHorizontal: 16,
-    },
-    conversationTitle: {},
-    conversationBody: {
-      flex: 1,
-      rowGap: 2,
-    },
-    conversationExtra: {
-      rowGap: 2,
-    },
-    conversationBadges: {
-      marginTop: 4,
-      alignItems: 'flex-start',
-    },
-    unreadCountBadge: {
-      alignSelf: 'flex-end',
-      backgroundColor: colors.interaction,
-      paddingVertical: 0,
-      paddingHorizontal: 10,
-      borderRadius: 24,
-      color: 'white',
-    },
-  })
-}