@planningcenter/chat-react-native 3.1.0-rc.13 → 3.1.0-rc.14

package/src/screens/conversations_screen.tsx

@@ -1,25 +1,222 @@
-import { StaticScreenProps } from '@react-navigation/native'
-import React from 'react'
+import { RouteProp, StaticScreenProps, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Conversations } from '../components'
+import { Badge, Button, ButtonProps, Conversations, Heading, TextButton } from '../components'
+import { ActionButton } from '../components/display/action_button'
+import { useCanCreateConversations, useTheme } from '../hooks'
+import { useApiGet } from '../hooks/use_api'
+import { GraphId, GroupResource } from '../types/resources/group_resource'
+import { useCanDisplayGroups } from '../hooks/use_groups'
 
 export type ConversationScreenProps = StaticScreenProps<{
   title?: string
-  chat_group_graph_id?: string
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: string
 }>
 
-export function ConversationsScreen(_props: ConversationScreenProps) {
+export function ConversationsScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const canCreateConversations = useCanCreateConversations()
+  const styles = useStyles()
+  const { chat_group_graph_id, group_source_app_name } = route.params
+
+  const filter = useMemo(() => {
+    if (chat_group_graph_id) {
+      return 'group'
+    } else if (group_source_app_name) {
+      return 'group_source_app_name'
+    }
+
+    return 'mine_or_not_empty'
+  }, [chat_group_graph_id, group_source_app_name])
+
   return (
     <View style={styles.container}>
-      <Conversations />
+      <Conversations
+        ListHeaderComponent={ListHeaderComponent}
+        group={chat_group_graph_id}
+        group_source_app_name={group_source_app_name}
+        filter={filter}
+      />
+      <ActionButton
+        visible={canCreateConversations}
+        title="New conversation"
+        onPress={() => navigation.navigate('Create')}
+      />
+    </View>
+  )
+}
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  More = 'More',
+}
+
+const ListHeaderComponent = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id, group_source_app_name = '' } = route.params
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name])
+
+  const hideAppFilters = !canFilterByGroups || !canFilterByTeams
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.titleRow}>
+        <Heading numberOfLines={1} variant="h2">
+          Conversations
+        </Heading>
+        <TextButton>Mark all read</TextButton>
+      </View>
+      <View style={styles.filterRow}>
+        <FilterButton
+          title={FilterTypes.All}
+          activeTitle={active}
+          hidden={!canFilterByGroups || !canFilterByTeams}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: undefined,
+            })
+          }
+        />
+        <FilterButton
+          title={FilterTypes.Groups}
+          activeTitle={active}
+          hidden={hideAppFilters}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: 'Groups',
+            })
+          }
+        />
+        <FilterButton
+          title={FilterTypes.Teams}
+          activeTitle={active}
+          hidden={hideAppFilters}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: 'Services',
+            })
+          }
+        />
+        <Button
+          title={hideAppFilters ? 'Filter' : FilterTypes.More}
+          onPress={() =>
+            navigation.navigate('ConversationFilters', {
+              chat_group_graph_id,
+              group_source_app_name,
+            })
+          }
+          variant={active === FilterTypes.More ? 'fill' : 'outline'}
+          iconNameRight="general.threeReducingHorizontalBars"
+        />
+      </View>
+      <Badges />
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    gap: 8,
-  },
-})
+const Badges = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id } = route.params
+  const { data: group } = useApiGet<GroupResource>({
+    url: `/me/groups/${chat_group_graph_id}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+    },
+    enabled: !!chat_group_graph_id,
+    app: 'chat',
+  })
+
+  const handleBadgePress = useCallback(() => {
+    navigation.setParams({
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+    })
+  }, [navigation])
+
+  if (!group) return null
+
+  return (
+    <View style={styles.groupBadge}>
+      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
+    </View>
+  )
+}
+
+function FilterButton({
+  title,
+  activeTitle,
+  onPress,
+  hidden = false,
+  ...restProps
+}: {
+  title: string
+  activeTitle: string
+  onPress: () => void
+  hidden?: boolean
+} & ButtonProps) {
+  if (hidden) return null
+
+  return (
+    <Button
+      title={title}
+      variant={activeTitle === title ? 'fill' : 'outline'}
+      onPress={onPress}
+      {...restProps}
+    />
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+      gap: 12,
+    },
+    titleRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 8,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+    },
+    groupBadge: {
+      flexDirection: 'row',
+    },
+  })
+}

package/src/screens/create/conversation_select_recipients_screen.tsx

@@ -4,8 +4,9 @@ import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Button, Heading, Icon, Image, Text } from '../../components'
-import { useSuspenseGet, useTheme } from '../../hooks'
+import { useTheme } from '../../hooks'
 import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
 
 type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
   chat_group_graph_id?: string
@@ -18,16 +19,7 @@ const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { data: groups = [] } = useSuspenseGet<GroupsGroupResource[]>({
-    url: '/me/groups',
-    data: {
-      perPage: 100,
-      fields: {
-        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
-      },
-    },
-    app: 'groups',
-  })
+  const { data: groups = [] } = useGroupsGroups()
   const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
 
   const handleNavigateToCreateConversation = (group: GroupsGroupResource) => {

package/src/types/resources/group_resource.ts

@@ -1,10 +1,13 @@
 import { AppName } from './app_name'
 
+export type SourceType = 'Team' | 'Group' | 'PlanTeam'
+export type GraphId = `${AppName}-${SourceType}-${number}`
+
 export interface GroupResource {
+  id: GraphId
   type: 'Group'
-  id: string
   links: { self: string }
   name: string | null
   sourceAppName: AppName
-  sourceType: string
+  sourceType: SourceType
 }

package/src/types/resources/index.ts

@@ -5,3 +5,4 @@ export * from './oauth_token'
 export * from './person'
 export * from './groups'
 export * from './app_grant'
+export * from './services'

package/src/types/resources/services/index.ts

@@ -0,0 +1 @@
+export * from './team_resource'

package/src/types/resources/services/team_resource.ts

@@ -0,0 +1,60 @@
+// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.
+// They all have a shared type of 'Chat' which has the following array attributes:
+// group_identifiers, people, plans, teams and, teams_i_lead.
+// All of these have a type array, are only rendered on request, and are exclusively used for this form.
+// There is also a payload which is a string, and is used to create a conversation in chat.
+
+import { ResourceObject } from '../../api_primitives'
+
+interface ServicesChatResource extends ResourceObject {
+  type: 'Chat'
+}
+
+export interface TeamResource extends ServicesChatResource {
+  teamsILead: TeamResponseItem[]
+}
+export interface TeamResponseItem {
+  name: string
+  value: {
+    teamId: number
+    serviceTypeId: number
+  }
+  serviceTypeName: string
+  teamName: string
+  order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]
+}
+
+export interface TeamOptionResource extends ServicesChatResource {
+  teams: TeamOptionResponseItem[]
+}
+
+export interface TeamOptionResponseItem extends TeamResponseItem {
+  group: TeamOptionResponseItemGroupName
+}
+
+export type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'
+
+export interface PlansResource extends ServicesChatResource {
+  plans: PlansResponseItem[]
+}
+
+interface PlansResponseItem {
+  value: number
+  name: string
+}
+
+export interface TeamPeopleResource extends ServicesChatResource {
+  people: PersonResponseItem[]
+}
+
+interface PersonResponseItem {
+  id: number
+  name: string
+  avatar: string
+  badges: { title: string }[]
+  child: boolean
+}
+
+export interface ServicesChatPayloadResource extends ServicesChatResource {
+  payload: string
+}

package/src/utils/client/types.d.ts

@@ -16,6 +16,7 @@ export interface GenericRequest {
 
 export interface GetRequest extends GenericRequest {
   data: {
+    filter?: string
     fields: Record<string, string[]>
     where?: Record<string, string>
     include?: string[]
@@ -23,7 +24,7 @@ export interface GetRequest extends GenericRequest {
     perPage?: number
     offset?: number
     walk?: boolean
-  }
+  } & Record<string, unknown>
 }
 
 export interface Relationship {

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './client'
 export * from './uri'
 export * from './cache'
 export * from './native_adapters'
+export * from './pluralize'

package/src/utils/native_adapters/audio.ts

@@ -0,0 +1,15 @@
+interface Audio {
+  play: () => void
+  pause: () => void
+  isPlaying: boolean
+  duration: number
+  position: number
+}
+
+export class AudioAdapter {
+  useAudio: (_: string) => Audio
+
+  constructor(methods: AudioAdapter) {
+    this.useAudio = methods.useAudio
+  }
+}

package/src/utils/native_adapters/configuration.ts

@@ -1,12 +1,18 @@
+import { AudioAdapter } from './audio'
 import { ClipboardAdapter } from './clipboard'
+import { VideoAdapter } from './video'
 
 type ChatConfigurations = {
   clipboard: ClipboardAdapter
+  audio: AudioAdapter
+  video: VideoAdapter
 }
 
 export class ChatAdapters {
   static configure(configurations: ChatConfigurations) {
     Clipboard = configurations.clipboard
+    Audio = configurations.audio
+    Video = configurations.video
   }
 }
 
@@ -22,4 +28,21 @@ let Clipboard: ClipboardAdapter = new ClipboardAdapter({
   setStringAsync: async (_: string) => methodMissing(),
 })
 
-export { Clipboard }
+let Audio: AudioAdapter = new AudioAdapter({
+  useAudio: (_: string) => {
+    methodMissing()
+    return {} as any
+  },
+})
+
+let Video: VideoAdapter = new VideoAdapter({
+  Player: Object.assign(
+    () => {
+      methodMissing()
+      return null
+    },
+    { $$typeof: Symbol.for('react.forward_ref') }
+  ),
+})
+
+export { Clipboard, Audio, Video }

package/src/utils/native_adapters/index.ts

@@ -1,2 +1,4 @@
 export * from './clipboard'
 export * from './configuration'
+export * from './audio'
+export * from './video'

package/src/utils/native_adapters/video.ts

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export interface VideoPlayerProps {
+  source: { uri: string }
+  aspectRatio?: number
+  style?: StyleProp<ViewStyle>
+  onFullscreenPlayerWillPresent?: () => void
+  onFullscreenPlayerDidPresent?: () => void
+  onFullscreenPlayerWillDismiss?: () => void
+  onFullscreenPlayerDidDismiss?: () => void
+}
+
+export interface VideoPlayerHandle {
+  play: () => void
+  pause: () => void
+  presentFullscreenPlayer: () => void
+  dismissFullscreen: () => void
+}
+
+type VideoPlayer = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>
+>
+
+export class VideoAdapter {
+  Player: VideoPlayer
+
+  constructor(methods: VideoAdapter) {
+    this.Player = methods.Player
+  }
+}

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`
   }
 }