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

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

@@ -0,0 +1,47 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Badge } from '../../../components'
+import { useApiGet } from '../../../hooks/use_api'
+import { GroupResource } from '../../../types/resources/group_resource'
+import { ConversationScreenProps } from '../conversations_screen'
+
+export const ChatGroupBadge = () => {
+  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.row}>
+      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+    },
+  })
+}

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

@@ -0,0 +1,130 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import { 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'
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  More = 'More',
+}
+
+export 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 { markAllRead, isPending } = useMarkAllRead()
+
+  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 showAppFilters = canFilterByGroups && canFilterByTeams
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.titleRow}>
+        <Heading numberOfLines={1} variant="h2">
+          Conversations
+        </Heading>
+        <TextButton onPress={() => markAllRead()} disabled={isPending}>
+          Mark all read
+        </TextButton>
+      </View>
+      <View style={styles.filterRow}>
+        {showAppFilters && (
+          <>
+            <ToggleButton
+              title={FilterTypes.All}
+              active={active === FilterTypes.All}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: undefined,
+                })
+              }
+              accessibilityLabel="Show all conversations"
+            />
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Groups',
+                })
+              }
+              accessibilityLabel="Filter to group conversations"
+            />
+
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Services',
+                })
+              }
+              accessibilityLabel="Filter to team conversations"
+            />
+          </>
+        )}
+        <ToggleButton
+          title={showAppFilters ? FilterTypes.More : 'Filter'}
+          onPress={() =>
+            navigation.navigate('ConversationFilters', {
+              chat_group_graph_id,
+              group_source_app_name,
+            })
+          }
+          active={active === FilterTypes.More}
+          iconNameRight="general.threeReducingHorizontalBars"
+          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}
+        />
+      </View>
+      <ChatGroupBadge />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    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,
+    },
+  })
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -0,0 +1,43 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+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 { ListHeaderComponent } from './components/list_header_component'
+
+export type ConversationScreenProps = StaticScreenProps<{
+  title?: string
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: string
+}>
+
+export function ConversationsScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const canCreateConversations = useCanCreateConversations()
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <ConversationsContextProvider args={route.params}>
+        <Conversations ListHeaderComponent={ListHeaderComponent} />
+      </ConversationsContextProvider>
+      <ActionButton
+        visible={canCreateConversations}
+        title="New conversation"
+        onPress={() => navigation.navigate('New')}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+  })
+}

package/src/screens/design_system_screen.tsx

@@ -9,6 +9,7 @@ import {
   Banner,
   BannerCollapsible,
   Button,
+  ToggleButton,
   Heading,
   Icon,
   IconButton,
@@ -253,6 +254,7 @@ function HeadingTextSection({ isLast }: SectionProps) {
 
 function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
+  const [filterSelected, setFilterSelected] = useState('Groups')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -402,6 +404,32 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="ToggleButton"
+        description="Button with active and deactive states. Supports right & left icons, along with standard pressable props."
+      >
+        <Row>
+          <ToggleButton
+            onPress={() => setFilterSelected('Groups')}
+            title="Groups"
+            active={filterSelected === 'Groups'}
+            accessibilityLabel="Filter to group conversations"
+          />
+          <ToggleButton
+            onPress={() => setFilterSelected('Teams')}
+            title="Teams"
+            active={filterSelected === 'Teams'}
+            accessibilityLabel="Filter to team conversations"
+          />
+          <ToggleButton
+            onPress={() => setFilterSelected('More')}
+            title="More"
+            active={filterSelected === 'More'}
+            iconNameRight="general.threeReducingHorizontalBars"
+            accessibilityLabel="View more filters"
+          />
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."
@@ -700,6 +728,7 @@ function ImageIconsSection({ isLast }: SectionProps) {
         description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."
       >
         <Row>
+          {/* @ts-expect-error - Icon name is not a string */}
           <Icon name="missingIcon" size={20} />
           <Icon name="general.textMessage" size={20} />
           <Icon name="general.bell" size={20} color={colors.needsDesignPass} />

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
 
@@ -68,7 +68,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
       )
 
-      return apiClient.chat.post({
+      return apiClient.chat.post<ApiResource<MessageResource>>({
         url,
         data: {
           ...requestParams.data,
@@ -91,7 +91,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
 
   const { mutate: handleReaction, isPending } = useMutation({
     mutationFn: handleReactionPress,
-    onSuccess: (result: ApiResource<MessageResource>) => {
+    onSuccess: result => {
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
 

package/src/screens/send_giphy_screen.tsx

@@ -0,0 +1,155 @@
+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={require('../../assets/images/powered_by_giphy.png')}
+      />
+      <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,
+    },
+  })
+}

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/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

@@ -54,7 +54,7 @@ export class Client {
       data: d = { fields: {} },
       acc = { data: [], included: [], meta: {}, links: {} },
       ...options
-    }: WalkRequest) => {
+    }: WalkRequest): Promise<ApiCollection | ApiResource> => {
       return makeRequest({
         action: 'GET',
         data: d,
@@ -73,27 +73,35 @@ export class Client {
       })
     }
 
-    const handler = isWalking ? walkRequest : makeRequest
+    const handler = isWalking
+      ? (a: MakeRequestArgs | WalkRequest) => walkRequest(a as WalkRequest)
+      : (a: MakeRequestArgs | WalkRequest) => makeRequest(a as MakeRequestArgs)
 
-    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleNotOk)
+    return throwErrorIfFieldsMissing(handler, requestArgs)
+      .then(response => response as T)
+      .catch(this.handleNotOk)
   }
 
-  async patch(args: PatchRequest) {
+  async patch<T extends ApiCollection | ApiResource>(args: PatchRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs)
+      .then(response => response as T)
+      .catch(this.handleNotOk)
   }
 
-  async post(args: PostRequest) {
+  async post<T extends ApiCollection | ApiResource>(args: PostRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs)
+      .then(response => response as T)
+      .catch(this.handleNotOk)
   }
 
   async delete(args: DeleteRequest) {

package/src/utils/client/request_helpers.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import URI from 'urijs'
 import { transformRequestData } from './transform_request_data'
 import transformResponse from './transform_response'
-import { Accumulator, GetRequest, PostRequest, RequestData } from './types'
+import { Accumulator, GetRequest, PostRequest, RequestData, WalkRequest } from './types'
 
 export type MakeRequestArgs = {
   action: 'GET' | 'POST' | 'PATCH' | 'DELETE'
@@ -21,6 +21,7 @@ export const makeRequest = ({ action = 'GET', url, data = {}, headers = {} }: Ma
   const combinedQuery = Object.entries({ ...query, ...urlQuery })
     .sort()
     .reduce((obj, [key, value]) => {
+      // @ts-ignore
       obj[key] = value
       return obj
     }, {})
@@ -64,7 +65,14 @@ export const concatRecords = (records: Accumulator, moreRecords: Accumulator) =>
   meta: _.pick(moreRecords.meta, STANDARD_META_ATTRIBUTES),
 })
 
-export const throwErrorIfFieldsMissing = async (walk, args) => {
+type Walk = (args: MakeRequestArgs | WalkRequest) => Promise<any>
+type WalkArgs = MakeRequestArgs & {
+  data?: {
+    fields?: Record<string, any>
+  }
+}
+
+export const throwErrorIfFieldsMissing = async (walk: Walk, args: WalkArgs) => {
   const fields = args?.data?.fields
 
   if (!fields) {
@@ -89,23 +97,24 @@ export const throwErrorIfFieldsMissing = async (walk, args) => {
   return transformResponse(response)
 }
 
-export const friendlyErrors = (walk, args) =>
+export const friendlyErrors = (walk: Walk, args: WalkArgs) =>
   throwErrorIfQueryParams(args.url)
     .then(() => throwErrorIfFieldsMissing(walk, args))
     .then(transformResponse)
 
-export const noQueryParamsFriendlyErrors = (request, args) =>
+export const noQueryParamsFriendlyErrors = (request: typeof makeRequest, args: WalkArgs) =>
   throwErrorIfQueryParams(args.url)
     .then(() => request(args))
     .then(transformResponse)
 
-const passthrough = async (walk, args) => Promise.resolve(transformResponse(await walk(args)))
+const passthrough = async <T, R>(walk: (args: T) => Promise<R>, args: T) =>
+  Promise.resolve(transformResponse(await walk(args)))
 
 export const ensureFieldsInDev = __DEV__ ? friendlyErrors : passthrough
 
 export const ensureNoQueryParamsInDev = __DEV__ ? noQueryParamsFriendlyErrors : passthrough
 
-export const throwErrorIfQueryParams = url => {
+export const throwErrorIfQueryParams = (url: string) => {
   if (new URI(url).search().length) {
     throw new Error('Must pass query params as data arg')
   }