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

package/src/hooks/use_conversation_jolt_events.ts

@@ -2,12 +2,12 @@ import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ConversationResource } from '../types'
 import { deleteRecordInPagesData, updateOrCreateRecordInPagesData } from '../utils'
 import { useApiClient } from './use_api_client'
-import { getConversationsRequestArgs } from './use_conversations'
 import { useCurrentPerson } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltConversationEvent } from '../types/jolt_events'
 import { ConversationDeletedEvent } from '../types/jolt_events/conversation_events'
+import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 type QueryData = InfiniteData<ApiCollection<ConversationResource>>
 

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -9,10 +9,10 @@ import { MessageCreatedEvent, MessageDeletedEvent } from '../types/jolt_events/m
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useCurrentPerson } from './use_current_person'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
-import { getMessagesRequestArgs } from './use_conversation_messages'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltReactionEvent } from '../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
+import { getMessagesRequestArgs } from '../utils/request/messages'
 
 interface Props {
   conversationId: number

package/src/hooks/use_conversations.ts

@@ -1,38 +1,10 @@
 import { useMemo } from 'react'
 import { ConversationResource } from '../types'
-import { GetRequest } from '../utils/client/types'
 import { useSuspensePaginator } from './use_suspense_api'
+import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
 
-export const getConversationsRequestArgs = (): GetRequest => ({
-  url: '/me/conversations',
-  data: {
-    perPage: 20,
-    order: '-last_message',
-    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'],
-  },
-})
-
-export function useConversations() {
-  const requestArgs = getConversationsRequestArgs()
+export function useConversations(args?: Partial<ConversationRequestArgs>) {
+  const requestArgs = getConversationsRequestArgs(args)
   const { data, ...rest } = useSuspensePaginator<ConversationResource>(requestArgs)
 
   const conversations = useMemo(

package/src/hooks/use_groups.ts

@@ -0,0 +1,31 @@
+import { AppName } from '../types/resources/app_name'
+import { GroupResource, SourceType } from '../types/resources/group_resource'
+import { useApiPaginator } from './use_api'
+
+type UseGroupsProps = {
+  source_app_name: AppName
+  source_type: SourceType
+}
+
+export const useGroups = ({ source_app_name, source_type }: UseGroupsProps) => {
+  return useApiPaginator<GroupResource>({
+    url: '/me/groups',
+    data: {
+      fields: {
+        Group: [],
+      },
+      where: {
+        source_app_name,
+        source_type,
+      },
+      perPage: 100,
+    },
+    app: 'chat',
+  })
+}
+
+export const useCanDisplayGroups = (props: UseGroupsProps) => {
+  const { data: teams = [] } = useGroups(props)
+
+  return teams?.length > 0
+}

package/src/hooks/use_groups_groups.ts

@@ -0,0 +1,20 @@
+import { GroupsGroupResource } from '../types'
+import { useApiPaginator } from './use_api'
+
+export const useGroupsGroups = () => {
+  return useApiPaginator<GroupsGroupResource>({
+    url: '/me/groups',
+    data: {
+      perPage: 100,
+      fields: {
+        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
+      },
+    },
+    app: 'groups',
+  })
+}
+
+export const useCanDisplayGroupsGroups = () => {
+  const { data: groups = [] } = useGroupsGroups()
+  return groups?.length > 0
+}

package/src/hooks/use_services_team.ts

@@ -0,0 +1,30 @@
+import { TeamOptionResource, TeamOptionResponseItem } from '../types'
+import { useApiGet } from './use_api'
+
+export const useServicesTeams = () => {
+  const { data: chat } = useApiGet<TeamOptionResource>({
+    url: '/chat',
+    data: {
+      fields: {
+        Chat: ['teams'],
+      },
+    },
+    app: 'services',
+  })
+
+  return chat?.teams || []
+}
+
+export const useServicesTeamsMap = () => {
+  const teams = useServicesTeams()
+
+  return teams.reduce(
+    (acc, team) => {
+      const id = `Services-Team-${team.value.teamId}`
+      acc[id] = team
+
+      return acc
+    },
+    {} as Record<string, TeamOptionResponseItem>
+  )
+}

package/src/hooks/use_suspense_api.ts

@@ -6,10 +6,10 @@ import {
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
-import { useApiClient } from './use_api_client'
+import { App, useApiClient } from './use_api_client'
 
 interface SuspenseGetOptions extends GetRequest {
-  app?: 'chat' | 'groups'
+  app?: App
 }
 
 export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
@@ -51,11 +51,11 @@ export const useSuspensePaginator = <T extends ResourceObject>(
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
       const where = { ...argsWhere, ...pageParmWhere }
-
+      const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient.chat.get({
+      return apiClient[app].get({
         url: args.url,
         data,
       })

package/src/hooks/use_teams.ts

@@ -0,0 +1,25 @@
+import { GroupResource } from '../types/resources/group_resource'
+import { useApiPaginator } from './use_api'
+
+export const useTeams = () => {
+  return useApiPaginator<GroupResource>({
+    url: '/me/groups',
+    data: {
+      fields: {
+        Group: [],
+      },
+      where: {
+        source_app_name: 'Services',
+        source_type: 'Team',
+      },
+      perPage: 100,
+    },
+    app: 'chat',
+  })
+}
+
+export const useCanDisplayTeams = () => {
+  const { data: teams = [] } = useTeams()
+
+  return teams?.length > 0
+}

package/src/navigation/index.tsx

@@ -23,6 +23,10 @@ import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { HeaderRightButton } from './header'
 import { ScreenLayout } from './screenLayout'
+import {
+  ConversationFiltersScreen,
+  ConversationFiltersScreenOptions,
+} from '../screens/conversation_filters_screen'
 
 export const CreateConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -75,6 +79,10 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    ConversationFilters: {
+      screen: ConversationFiltersScreen,
+      options: ConversationFiltersScreenOptions,
+    },
     Conversation: {
       screen: ConversationScreen,
     },

package/src/screens/conversation_details_screen.tsx

@@ -62,6 +62,7 @@ interface DataItem<T, TName extends SectionTypes> {
   data: T
   sectionOuterStyle?: ViewStyle
   sectionInnerStyle?: ViewStyle
+  showBottomBorder?: boolean
 }
 
 // =================================
@@ -100,6 +101,28 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     },
   })
 
+  const memberSectionStyleMap = {
+    first: styles.sectionInnerFirstMember,
+    middle: styles.sectionInnerMiddleMiddle,
+    last: styles.sectionInnerLastMember,
+  }
+
+  const memberItems = members.map((data, index) => {
+    const isFirst = index === 0
+    const isLast = index === members.length - 1
+    const memberPosition = isFirst ? 'first' : isLast ? 'last' : 'middle'
+    const memberSectionStyle = memberSectionStyleMap[memberPosition]
+
+    return {
+      type: data.child ? SectionTypes.hidden : SectionTypes.members,
+      data,
+      sectionInnerStyle: memberSectionStyle,
+    }
+  })
+
+  const childMembers = members.filter(member => member.child)
+  const hasChildren = childMembers.length > 0
+
   const teamsGroup =
     conversation.groups
       ?.filter(g => g.sourceAppName === 'Services')
@@ -107,18 +130,9 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       ?.filter(g => g.name !== null) || []
   const hasTeams = teamsGroup.length > 0
 
-  const memberItems = members.map(data => ({
-    type: data.child ? SectionTypes.hidden : SectionTypes.members,
-    data,
-    sectionOuterStyle: styles.memberSectionOuter,
-    sectionInnerStyle: styles.memberSectionInner,
-  }))
-
-  const childMembers = members.filter(member => member.child)
-  const hasChildren = childMembers.length > 0
-
   const badge = conversation.badges?.[0]
   const resourceType = badge?.pcoResourceType || ''
+  const productName = badge?.appName
   const name = badge?.text || undefined
 
   const handleDelete = useCallback(() => {
@@ -152,11 +166,12 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
             label={resourceType}
             metaLabel={name}
             style={styles.headerTitleBadge}
+            productLogoName={productName}
           />
         </View>
       )
     },
-    [name, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
+    [name, productName, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
   )
 
   const HeaderRight = useCallback(() => {
@@ -192,11 +207,13 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
           />
         ),
       },
+      sectionInnerStyle: styles.sectionInnerTitleInput,
     },
     {
       type: SectionTypes.header,
       data: { title: 'Settings' },
-      sectionInnerStyle: styles.addBottomBorder,
+      showBottomBorder: true,
+      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
     },
     {
       type: SectionTypes.setting,
@@ -204,7 +221,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
         title: 'Mute',
         rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
       },
-      sectionInnerStyle: styles.addBottomBorder,
+      showBottomBorder: true,
     },
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
@@ -215,13 +232,12 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),
       },
-      sectionInnerStyle: styles.addBottomBorder,
+      showBottomBorder: true,
     },
     {
       type: canDelete ? SectionTypes.setting : SectionTypes.hidden,
       data: {
         title: 'Delete conversation…',
-        style: styles.deleteButton,
         buttonTextStyle: styles.deleteButtonText,
         appearance: 'danger',
         onPress: handleDelete,
@@ -230,6 +246,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: hasTeams ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'Teams' },
+      sectionInnerStyle: styles.sectionInnerHeader,
     },
     {
       type: hasTeams ? SectionTypes.view : SectionTypes.hidden,
@@ -239,14 +256,15 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     },
     {
       type: SectionTypes.header,
-      data: { title: 'Members' },
+      data: { title: 'People' },
+      sectionInnerStyle: styles.sectionInnerHeader,
     },
     {
       type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,
       data: {
         children: <ChildNotice childMembers={childMembers} />,
       },
-      sectionOuterStyle: styles.childNoticeSectionOuter,
+      sectionInnerStyle: styles.sectionInnerChildNotice,
     },
     ...memberItems,
   ].filter(item => item.type !== SectionTypes.hidden)
@@ -256,97 +274,98 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     .filter(isDefined)
 
   return (
-    <FlashList
-      data={listData as SectionListData}
-      estimatedItemSize={52}
-      contentContainerStyle={styles.contentContainer}
-      renderItem={({ item, index }) => {
-        const [isStart, isEnd] = [
-          index === 0 || headerIndices.includes(index),
-          index === listData.length - 1 || headerIndices.includes(index + 1),
-        ]
-
-        switch (item.type) {
-          case SectionTypes.header:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <SectionHeading title={item.data.title} />
-              </ListSection>
-            )
-          case SectionTypes.members:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <Person person={{ ...item.data }} />
-              </ListSection>
-            )
-          case SectionTypes.setting:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <SettingRow {...item.data} />
-              </ListSection>
-            )
-          case SectionTypes.view:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <View {...item.data} style={item.data.style} />
-              </ListSection>
-            )
-          default:
-            return null
-        }
-      }}
-    />
+    <View style={styles.listContainer}>
+      <FlashList
+        data={listData as SectionListData}
+        estimatedItemSize={52}
+        contentContainerStyle={styles.contentContainer}
+        renderItem={({ item, index }) => {
+          const [isStart, isEnd] = [
+            index === 0 || headerIndices.includes(index),
+            index === listData.length - 1 || headerIndices.includes(index + 1),
+          ]
+
+          switch (item.type) {
+            case SectionTypes.header:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Heading variant="h3">{item.data.title}</Heading>
+                </ListSection>
+              )
+            case SectionTypes.members:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Person person={{ ...item.data }} />
+                </ListSection>
+              )
+            case SectionTypes.setting:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <SettingRow {...item.data} />
+                </ListSection>
+              )
+            case SectionTypes.view:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <View {...item.data} style={item.data.style} />
+                </ListSection>
+              )
+            default:
+              return null
+          }
+        }}
+      />
+    </View>
   )
 }
 
 interface ListSectionProps {
   isStart?: boolean
   isEnd?: boolean
+  showBottomBorder?: boolean
   outerStyle?: ViewStyle
   innerStyle?: ViewStyle
   children: ReactNode
 }
 
-function ListSection({ isStart, isEnd, outerStyle, innerStyle, children }: ListSectionProps) {
+function ListSection({
+  isStart,
+  isEnd,
+  showBottomBorder,
+  outerStyle,
+  innerStyle,
+  children,
+}: ListSectionProps) {
   const styles = useStyles({ isStart, isEnd })
+  const bottomBorder = showBottomBorder ? styles.sectionInnerBottomBorder : {}
 
   return (
-    <View style={[styles.sectionOuter, outerStyle]}>
-      <View style={[styles.sectionInner, innerStyle]}>{children}</View>
-    </View>
-  )
-}
-
-interface SectionHeadingProps {
-  title: string
-}
-
-function SectionHeading({ title }: SectionHeadingProps) {
-  const styles = useStyles()
-
-  return (
-    <View style={styles.header}>
-      <Heading variant="h3">{title}</Heading>
+    <View style={[styles.sectionOuterBase, outerStyle]}>
+      <View style={[styles.sectionInnerBase, bottomBorder, innerStyle]}>{children}</View>
     </View>
   )
 }
@@ -468,14 +487,17 @@ function TeamsGroup({ teams }: { teams: GroupResource[] }) {
 
 const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
+  const headerBottomPadding = space(0.5)
 
   return StyleSheet.create({
-    contentContainer: {
+    listContainer: {
+      flex: 1,
       backgroundColor: colors.fillColorNeutral080,
+    },
+    contentContainer: {
       padding: space(2),
     },
-    sectionOuter: {
-      paddingTop: space(1),
+    sectionOuterBase: {
       paddingLeft: space(2),
       backgroundColor: colors.fillColorNeutral100Inverted,
       borderTopLeftRadius: isStart ? space(1) : 0,
@@ -484,15 +506,40 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       borderBottomRightRadius: isEnd ? space(1) : 0,
       marginBottom: isEnd ? space(2) : 0,
     },
-    sectionInner: {
-      borderBottomWidth: 0,
-      borderBottomColor: colors.borderColorDefaultBase,
+    sectionInnerBase: {
       paddingRight: space(2),
-      paddingBottom: space(1),
+      paddingTop: isStart ? space(2) : space(1.5),
+      paddingBottom: isEnd ? space(2) : space(1.5),
+    },
+    sectionInnerHeader: {
+      paddingBottom: headerBottomPadding,
+    },
+    sectionInnerHeaderWithBottomBorder: {
+      paddingBottom: space(2),
     },
-    addBottomBorder: {
+    sectionInnerBottomBorder: {
+      borderBottomColor: colors.borderColorDefaultBase,
       borderBottomWidth: isEnd ? 0 : 1,
     },
+    sectionInnerTitleInput: {
+      paddingTop: space(1.5), // paddingVertical doesn't override the sectionInner padding
+      paddingBottom: space(1.5),
+    },
+    sectionInnerChildNotice: {
+      paddingBottom: headerBottomPadding,
+    },
+    sectionInnerMiddleMiddle: {
+      paddingTop: 0,
+      paddingBottom: space(1.5),
+    },
+    sectionInnerFirstMember: {
+      paddingTop: space(1.5),
+      paddingBottom: space(1.5),
+    },
+    sectionInnerLastMember: {
+      paddingTop: 0,
+      paddingBottom: space(2),
+    },
     titleContainer: {
       gap: 4,
     },
@@ -520,9 +567,6 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       borderTopWidth: 1,
       borderColor: colors.borderColorStatusError,
     },
-    header: {
-      paddingVertical: space(1.5),
-    },
     settingRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',
@@ -532,9 +576,6 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     settingRowContent: {
       flex: 1,
     },
-    deleteButton: {
-      paddingVertical: 4,
-    },
     deleteButtonText: {
       fontWeight: 'normal',
     },
@@ -546,15 +587,6 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       gap: 4,
       flexWrap: 'wrap',
     },
-    childNoticeSectionOuter: {
-      paddingTop: 0,
-    },
-    memberSectionOuter: {
-      paddingTop: 6,
-    },
-    memberSectionInner: {
-      paddingBottom: 6,
-    },
     headerTitleBadge: {
       alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
       marginTop: 2,