@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -0,0 +1,121 @@
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { ScrollView, StyleSheet, View } from 'react-native'
+import { Button, Heading } from '../../components'
+import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { ViewMoreLinkRow } from './components/view_more_link_row'
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
+const MAX_VISIBLE_GROUPS = 5
+
+export const ConversationSelectRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: groups = [] } = useGroupsGroups()
+  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+  const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS)
+  const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS
+  const hasGroupsWithoutChatPermission = groups.length > groupsWithCreatePermission.length
+  const showGroupsDisclaimer = hasGroupsWithoutChatPermission && !hasMoreGroups
+
+  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
+    navigation.navigate('New', {
+      screen: 'ConversationNew',
+      params: {
+        group_id: group.id,
+        source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  const handleGroupsViewMore = () => {
+    navigation.navigate('New', {
+      screen: 'ConversationSelectGroupRecipients',
+      params: {
+        ...route.params,
+      },
+    })
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.contentContainer}>
+      <View style={styles.section}>
+        <View style={styles.sectionHeader}>
+          <Heading variant="h3">My groups</Heading>
+        </View>
+        <View>
+          {visibleGroups.map(group => {
+            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
+
+            return (
+              <RecipientLinkRow
+                key={group.id}
+                imageUri={group.headerImage?.thumbnail}
+                title={group.name}
+                subtitle={`${group.membershipsCount} members`}
+                onPress={() => handleNavigateToConversationNew(group)}
+                accessibilityLabel={groupAccessibilityLabel}
+                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
+              />
+            )
+          })}
+          {hasMoreGroups && (
+            <ViewMoreLinkRow
+              onPress={handleGroupsViewMore}
+              accessibilityHint="Navigate to a full list of your groups."
+            />
+          )}
+          {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
+        </View>
+      </View>
+      <View style={styles.section}>
+        <View style={styles.sectionHeader}>
+          <Heading variant="h3">Teams I lead</Heading>
+          <Button
+            style={styles.selectTeamsButton}
+            onPress={() =>
+              navigation.navigate('New', {
+                screen: 'ConversationFilterRecipients',
+                params: {
+                  source_app_name: 'Services',
+                },
+              })
+            }
+            title="Select teams"
+            variant="outline"
+            iconNameLeft="general.search"
+          />
+        </View>
+      </View>
+    </ScrollView>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      gap: 24,
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
+    },
+    section: {
+      flex: 1,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingBottom: 4,
+    },
+    selectTeamsButton: {},
+  })
+}

package/src/screens/conversation_select_recipients/types/screen_props.tsx

@@ -0,0 +1,11 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import { AppName } from '../../../types/resources/app_name'
+import { GraphId } from '../../../types/resources/group_resource'
+
+export type ConversationSelectRecipientsParams = {
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
+}
+
+export type ConversationSelectRecipientsScreenProps =
+  StaticScreenProps<ConversationSelectRecipientsParams>

package/src/screens/conversations/components/list_header_component.tsx

@@ -1,8 +1,9 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useTheme } from '../../../hooks'
+import { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
@@ -22,6 +23,10 @@ export const ListHeaderComponent = () => {
   const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
   const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
 
+  const { unreadCount } = useCurrentPerson()
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+
   const active: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
       return FilterTypes.More
@@ -34,6 +39,20 @@ export const ListHeaderComponent = () => {
     return FilterTypes.All
   }, [chat_group_graph_id, group_source_app_name])
 
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
   const showAppFilters = canFilterByGroups && canFilterByTeams
 
   return (
@@ -42,7 +61,9 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton>Mark all read</TextButton>
+        <TextButton onPress={alertMarkAllRead} disabled={isPending || !unreadCount}>
+          Mark all read
+        </TextButton>
       </View>
       <View style={styles.filterRow}>
         {showAppFilters && (

package/src/screens/conversations/conversations_screen.tsx

@@ -1,46 +1,68 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
+import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
 import { GraphId } from '../../types/resources/group_resource'
+import { destructureChatGroupGraphId } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
+import { AppName } from '../../types/resources/app_name'
 
 export type ConversationScreenProps = StaticScreenProps<{
   title?: string
   chat_group_graph_id?: GraphId
-  group_source_app_name?: string
+  group_source_app_name?: AppName
 }>
 
 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'
+  const { chat_group_graph_id } = route.params
+  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)
+
+  const handleNewConversationNavigation = () => {
+    if (sourceAppName === 'Services') {
+      return navigation.navigate('New', {
+        screen: 'ConversationNew',
+        params: {
+          team_ids: sourceId ? [sourceId] : [],
+          source_app_name: sourceAppName,
+          ...route.params,
+        },
+      })
+    }
+    if (sourceAppName === 'Groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationNew',
+        params: {
+          group_id: sourceId,
+          source_app_name: sourceAppName,
+          ...route.params,
+        },
+      })
     }
 
-    return 'mine_or_not_empty'
-  }, [chat_group_graph_id, group_source_app_name])
+    return navigation.navigate('New', {
+      screen: 'ConversationSelectRecipients',
+      params: {
+        ...route.params,
+      },
+    })
+  }
 
   return (
     <View style={styles.container}>
-      <Conversations
-        ListHeaderComponent={ListHeaderComponent}
-        chat_group_graph_id={chat_group_graph_id}
-        group_source_app_name={group_source_app_name}
-        filter={filter}
-      />
+      <ConversationsContextProvider args={route.params}>
+        <Conversations ListHeaderComponent={ListHeaderComponent} />
+      </ConversationsContextProvider>
       <ActionButton
         visible={canCreateConversations}
         title="New conversation"
-        onPress={() => navigation.navigate('Create')}
+        onPress={handleNewConversationNavigation}
       />
     </View>
   )

package/src/screens/message_actions_screen.tsx

@@ -22,12 +22,12 @@ export const MessageActionsScreenOptions: NativeStackNavigationOptions = {
   sheetGrabberVisible: true,
 }
 
-export type ReactionScreenProps = StaticScreenProps<{
+export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
   conversation_id: number
 }>
 
-export function MessageActionsScreen({ route }: ReactionScreenProps) {
+export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   const navigation = useNavigation()
   const { conversation_id, message_id } = route.params
 

package/src/screens/send_giphy_screen.tsx

@@ -0,0 +1,184 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React from 'react'
+import { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../hooks'
+import { useGiphy } from '../hooks/use_giphy'
+import { useMessageCreate } from '../hooks/use_message_create'
+import { Button, IconButton } from '../components'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../utils'
+import { DefaultLoading } from '../components/page/loading'
+
+export const SendGiphyScreenOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents: [0.75],
+  sheetGrabberVisible: true,
+}
+
+export type SendGiphyScreenProps = StaticScreenProps<{
+  conversation_id: number
+  search_term: string
+}>
+
+export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
+  const { conversation_id, search_term } = route.params
+  const styles = useStyles()
+  const navigation = useNavigation()
+
+  const { isPending, mutate } = useMessageCreate({ conversationId: conversation_id })
+  const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)
+  const disabled = isPending || isSearching
+
+  const { width } = useWindowDimensions()
+  const size = width - 24
+
+  if (!result) return null
+
+  const gif = result.giphy.fixed_width
+  const { url } = gif
+
+  function goBack({ clearInput = false }) {
+    if (clearInput) {
+      const routes = navigation.getState()?.routes || []
+      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}
+
+      navigation.dispatch(
+        StackActions.popTo('Conversation', {
+          ...conversationParams,
+          conversation_id,
+          clear_input: true,
+        })
+      )
+    } else {
+      navigation.goBack()
+    }
+  }
+
+  function sendGiphy() {
+    if (disabled) return
+
+    mutate({ text: '', attachments: [result] })
+    goBack({ clearInput: true })
+  }
+
+  return (
+    <View style={styles.container}>
+      <NativeImage
+        alt="Powered by Giphy"
+        style={styles.powered_by_giphy}
+        source={{ uri: poweredByGiphyImage }}
+      />
+      <View style={styles.control_stack}>
+        <View style={styles.button_group}>
+          <IconButton
+            name="general.leftArrow"
+            accessibilityLabel={'Previous GIF'}
+            size="md"
+            appearance="neutral"
+            onPress={prevResult}
+            disabled={disabled}
+          />
+          <IconButton
+            name="general.rightArrow"
+            accessibilityLabel={'Next GIF'}
+            size="md"
+            appearance="neutral"
+            onPress={nextResult}
+            disabled={disabled}
+          />
+        </View>
+        <View style={styles.button_group}>
+          <Button
+            onPress={() => goBack({ clearInput: false })}
+            title="Cancel"
+            variant="outline"
+            size="sm"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          />
+          <Button
+            onPress={sendGiphy}
+            title="Send"
+            size="sm"
+            disabled={disabled}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          />
+        </View>
+      </View>
+      {isSearching ? (
+        <DefaultLoading />
+      ) : (
+        <NativeImage
+          source={{ uri: url }}
+          alt={result.title}
+          style={[styles.image, { width: size, height: size }]}
+        />
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { height } = useWindowDimensions()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    container: {
+      justifyContent: 'flex-start',
+      paddingTop: 24,
+      paddingHorizontal: 12,
+      paddingBottom: bottom,
+      width: '100%',
+      backgroundColor: theme.colors.fillColorNeutral100Inverted,
+      height,
+      gap: 12,
+    },
+    powered_by_giphy: {
+      width: 200,
+      height: 22,
+    },
+    control_stack: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    button_group: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    image: {
+      borderRadius: 8,
+    },
+  })
+}
+
+const poweredByGiphyImage = `data:image/png;base64,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`

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

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

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

@@ -0,0 +1,13 @@
+export interface GroupsGroupMemberResource {
+  type: 'Member'
+  id: number
+  role?: string
+  person: {
+    firstName: string
+    lastName: string
+    avatarUrl: string
+    child: boolean
+    id: number
+    type: 'Person'
+  }
+}

package/src/types/resources/member.ts

@@ -8,17 +8,6 @@ export interface MemberResource {
   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/oauth_token.ts

@@ -1,8 +1,8 @@
 export type OAuthToken = {
-  token_type: any
-  access_token: any
+  token_type: string
+  access_token: string
   created_at: number
-  expires_in: any
+  expires_in: number
   scope: string
-  refresh_token: any
+  refresh_token: string
 }

package/src/utils/cache/page_mutations.ts

@@ -73,6 +73,28 @@ export function updateOrCreateRecordInPagesData<T extends ResourceObject>({
   return { ...data, pages: newPages }
 }
 
+/**
+ * updateOrCreateRecordInPagesData
+ * Updates record if found in the cache, otherwise inserts.
+ */
+export function updateAllRecordsInPagesData<T extends ResourceObject>({
+  data,
+  processRecord = r => r,
+}: {
+  data?: { pages: ApiCollection<T>[]; pageParams: any }
+  processRecord?: (_next: T) => T
+}) {
+  if (!data) return data
+
+  const newPages = data.pages.map(page => {
+    const newData = page.data.map(processRecord)
+
+    return { ...page, data: newData }
+  })
+
+  return { ...data, pages: newPages }
+}
+
 export function addRecordInPagesData<T extends ResourceObject>({
   data,
   record,

package/src/utils/client/client.ts

@@ -1,6 +1,4 @@
 import { ApiCollection, ApiError, ApiResource } from '../../types'
-import { Session } from '../session'
-import { Uri } from '../uri'
 import {
   concatRecords,
   ensureNoQueryParamsInDev,
@@ -22,28 +20,27 @@ type ClientArgs = {
   version: string
   defaultHeaders?: Record<string, string>
   onUnauthorizedResponse?: OnUnauthorizedResponse
-  session: Session
-  app: string
+  root?: string
 }
 
 export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
-  uri: Uri
   onUnauthorizedResponse?: OnUnauthorizedResponse
+  root?: string
 
-  constructor({ version, defaultHeaders = {}, session, app, onUnauthorizedResponse }: ClientArgs) {
+  constructor({ version, defaultHeaders = {}, onUnauthorizedResponse, root }: ClientArgs) {
     this.version = version
-    this.uri = new Uri({ session, app })
     this.defaultHeaders = defaultHeaders
     this.onUnauthorizedResponse = onUnauthorizedResponse
+    this.root = root
   }
 
   async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
     const { walk, ...data } = args.data
     const isWalking = Boolean(walk)
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     await throwErrorIfQueryParams(url)
 
@@ -54,7 +51,7 @@ export class Client {
       data: d = { fields: {} },
       acc = { data: [], included: [], meta: {}, links: {} },
       ...options
-    }: WalkRequest): Promise<ApiCollection | ApiResource> => {
+    }: WalkRequest): Promise<T> => {
       return makeRequest({
         action: 'GET',
         data: d,
@@ -84,7 +81,7 @@ export class Client {
 
   async patch<T extends ApiCollection | ApiResource>(args: PatchRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
@@ -95,7 +92,7 @@ export class Client {
 
   async post<T extends ApiCollection | ApiResource>(args: PostRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
@@ -106,7 +103,7 @@ export class Client {
 
   async delete(args: DeleteRequest) {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
@@ -133,12 +130,15 @@ export class Client {
     }
   }
 
+  appUrl(url: string) {
+    return `${this.root}${url}`
+  }
+
   get headers() {
     return {
       Accept: 'application/vnd.api+json',
       'Content-Type': 'application/json',
       'X-PCO-API-Version': this.version,
-      ...this.uri.headers,
       ...this.defaultHeaders,
     }
   }

package/src/utils/destructure_chat_group_graph_id.ts

@@ -0,0 +1,25 @@
+import { AppName } from '../types/resources/app_name'
+import { SourceType, GraphId } from '../types/resources/group_resource'
+
+interface DestructuredChatGroupGraphIdType {
+  sourceAppName?: AppName
+  sourceType?: SourceType
+  sourceId?: number
+}
+
+export function destructureChatGroupGraphId(
+  chatGroupGraphId?: GraphId
+): DestructuredChatGroupGraphIdType {
+  if (!chatGroupGraphId)
+    return { sourceAppName: undefined, sourceType: undefined, sourceId: undefined }
+
+  const [sourceAppName, sourceType, sourceIdString] = chatGroupGraphId.split('-') as [
+    AppName,
+    SourceType,
+    string,
+  ]
+
+  const sourceIdNumber = Number(sourceIdString)
+
+  return { sourceAppName, sourceType, sourceId: sourceIdNumber }
+}