@planningcenter/chat-react-native 3.29.0 → 3.30.0-rc.1

package/src/screens/conversation_new/components/gender_filter_toggle.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import { Heading, Switch, Text } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { genderDisplayLabel } from '../../../utils/gender_display_label'
+
+interface FilterableGenderContentProps {
+  genderValue: string
+  enabled: boolean
+  onToggle: (enabled: boolean) => void
+}
+
+function FilterableGenderContent({ genderValue, enabled, onToggle }: FilterableGenderContentProps) {
+  const { colors } = useTheme()
+  const styles = useStyles()
+  const displayLabel = genderDisplayLabel(genderValue)
+
+  return (
+    <>
+      <View style={styles.toggleRow}>
+        <Text>{displayLabel}</Text>
+        <Switch
+          value={enabled}
+          onValueChange={onToggle}
+          accessibilityLabel={`Filter by ${displayLabel}`}
+        />
+      </View>
+      <Text style={{ color: colors.textColorDefaultSecondary }}>
+        Filter limited to your profile's set gender
+      </Text>
+    </>
+  )
+}
+
+function NoGenderContent({ isFetching }: { isFetching: boolean }) {
+  const { colors } = useTheme()
+
+  return (
+    <>
+      <Text>Gender</Text>
+      {isFetching ? (
+        <ActivityIndicator size="small" />
+      ) : (
+        <Text style={{ color: colors.textColorDefaultSecondary }}>
+          Set a gender in your Church Center profile to enable gender filtering.
+        </Text>
+      )}
+    </>
+  )
+}
+
+interface GenderFilterToggleProps {
+  genderValue: string | null
+  isFetching: boolean
+  enabled: boolean
+  onToggle: (enabled: boolean) => void
+}
+
+export function GenderFilterToggle({
+  genderValue,
+  isFetching,
+  enabled,
+  onToggle,
+}: GenderFilterToggleProps) {
+  const styles = useStyles()
+  const hasFilterableGender = genderValue !== null && genderValue !== 'Prefer not to say'
+
+  return (
+    <View style={styles.container}>
+      <Heading variant="h3">Filter by</Heading>
+      {hasFilterableGender ? (
+        <FilterableGenderContent genderValue={genderValue} enabled={enabled} onToggle={onToggle} />
+      ) : (
+        <NoGenderContent isFetching={isFetching} />
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+      gap: 8,
+    },
+    toggleRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+  })
+}

package/src/screens/conversation_new/components/groups_form.tsx

@@ -10,11 +10,14 @@ import {
   useGroupMembersForNewConversation,
 } from '../../../hooks/groups/use_group_members_for_new_conversation'
 import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+import { useMyGender } from '../../../hooks/use_my_gender'
 import { GroupsGroupResource } from '../../../types'
 import { GraphId } from '../../../types/resources/group_resource'
 import { pluralize } from '../../../utils'
-import { Divider, FormList } from './form_list'
+import { genderDisplayLabel } from '../../../utils/gender_display_label'
 import { Haptic } from '../../../utils/native_adapters'
+import { Divider, FormList } from './form_list'
+import { GenderFilterToggle } from './gender_filter_toggle'
 
 type GroupsFormProps = {
   groupId: number
@@ -23,7 +26,14 @@ type GroupsFormProps = {
 
 export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
   const navigation = useNavigation()
-  const [title, setTitle] = useState<string>()
+  const [title, setTitle] = useState('')
+  const [genderFilterEnabled, setGenderFilterEnabled] = useState(false)
+  const {
+    isFeatureEnabled: genderFilterAvailable,
+    genderId,
+    genderValue,
+    isFetching: genderFetching,
+  } = useMyGender()
   const { data: group } = useSuspenseGet<GroupsGroupResource>({
     url: `/me/groups/${groupId}`,
     data: {
@@ -36,6 +46,23 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
 
   const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
 
+  const activeGenderId = genderFilterEnabled ? genderId : null
+
+  const handleGenderToggle = (enabled: boolean) => {
+    const displayLabel = genderValue ? genderDisplayLabel(genderValue) : ''
+    const defaultTitle = `${group.name} (${displayLabel})`
+    const shouldAutoPopulateTitle = enabled && genderValue && title === ''
+    const shouldClearAutoPopulatedTitle = !enabled && title === defaultTitle
+
+    setGenderFilterEnabled(enabled)
+
+    if (shouldAutoPopulateTitle) {
+      setTitle(defaultTitle)
+    } else if (shouldClearAutoPopulatedTitle) {
+      setTitle('')
+    }
+  }
+
   const redirectToConversation = useCallback(
     (conversationId: number) => {
       // navigate to the conversation screen
@@ -53,6 +80,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
   const { mutate: handleSave, isPending } = useGroupsConversationCreate({
     groupId,
     title,
+    genderId: activeGenderId,
     onSuccess: redirectToConversation,
   })
 
@@ -67,6 +95,11 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
             group={group}
             title={title}
             setTitle={setTitle}
+            genderFilterAvailable={genderFilterAvailable}
+            genderFilterEnabled={genderFilterEnabled}
+            genderValue={genderValue}
+            genderFetching={genderFetching}
+            onGenderToggle={handleGenderToggle}
             groupMemberships={groupMemberships}
           />
         }
@@ -83,12 +116,27 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
 
 interface FormContentProps {
   group: GroupsGroupResource
-  title?: string
+  title: string
   setTitle: (title: string) => void
+  genderFilterAvailable: boolean
+  genderFilterEnabled: boolean
+  genderValue: string | null
+  genderFetching: boolean
+  onGenderToggle: (enabled: boolean) => void
   groupMemberships: GroupMembersForNewConversationResult
 }
 
-function FormContent({ group, title, setTitle, groupMemberships }: FormContentProps) {
+function FormContent({
+  group,
+  title,
+  setTitle,
+  genderFilterAvailable,
+  genderFilterEnabled,
+  genderValue,
+  genderFetching,
+  onGenderToggle,
+  groupMemberships,
+}: FormContentProps) {
   const styles = useStyles()
   const inputRef = useRef<TextInput>(null)
   const currentPerson = useCurrentPerson()
@@ -129,6 +177,17 @@ function FormContent({ group, title, setTitle, groupMemberships }: FormContentPr
         />
       </Pressable>
       <Divider />
+      {genderFilterAvailable && (
+        <>
+          <GenderFilterToggle
+            genderValue={genderValue}
+            isFetching={genderFetching}
+            enabled={genderFilterEnabled}
+            onToggle={onGenderToggle}
+          />
+          <Divider />
+        </>
+      )}
       <View style={styles.memberSection}>
         <Heading variant="h3">{memberHeaderLabel}</Heading>
         {hasChildren && (

package/src/screens/conversation_new/components/services_form.tsx

@@ -1,19 +1,19 @@
 import { StackActions, useNavigation } from '@react-navigation/native'
+import { uniq } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Badge, Banner, ChildNotice, Heading, Switch, TextButton } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
-import { Divider, FormList } from './form_list'
-import { pluralize } from '../../../utils'
-import { uniq } from 'lodash'
-import { FilterByPlan } from './filter_by_plan'
-import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
+import { useServicesTeams } from '../../../hooks/services/use_services_team'
+import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
 import { ConversationResource, MemberResource } from '../../../types'
+import { pluralize } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { TeamFilterTypes } from '../../conversation_filter_recipients/types'
-import { useServicesTeams } from '../../../hooks/services/use_services_team'
-import { Haptic } from '../../../utils/native_adapters'
+import { FilterByPlan } from './filter_by_plan'
+import { Divider, FormList } from './form_list'
 
 type ServicesFormProps = {
   initialTeamIds?: number[]

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -1,11 +1,11 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import React from 'react'
-import { GroupsForm } from './components/groups_form'
-import { ServicesForm } from './components/services_form'
-import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { TeamFilterTypes } from '../conversation_filter_recipients/types'
+import { GroupsForm } from './components/groups_form'
+import { ServicesForm } from './components/services_form'
+import { SourceAppErrorCard } from './components/source_app_error_card'
 
 type ConversationNewScreenProps = StaticScreenProps<{
   group_id?: number

package/src/screens/conversation_notification_level_select_screen.tsx

@@ -1,8 +1,8 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { PressableRow } from '../components'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useTheme } from '../hooks'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationMembershipUpdate } from '../hooks/use_conversation_membership'

package/src/screens/conversation_screen.tsx

@@ -8,38 +8,38 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import dayjs from '../utils/dayjs'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
+import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
+import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
+import { Message } from '../components/conversation/message'
+import { MessageForm } from '../components/conversation/message_form'
 import {
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
-import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
-import BlankState from '../components/primitive/blank_state_primitive'
-import { Message } from '../components/conversation/message'
-import { MessageForm } from '../components/conversation/message_form'
+import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
+import BlankState from '../components/primitive/blank_state_primitive'
+import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
+import { useConversation } from '../hooks/use_conversation'
+import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
+import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
+import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
-import { useConversation } from '../hooks/use_conversation'
-import { useConversationMessages } from '../hooks/use_conversation_messages'
-import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
 import { MessageResource } from '../types'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { getRelativeDateStatus } from '../utils/date'
-import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
+import dayjs from '../utils/dayjs'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
-import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
-import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
-import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { ConversationContextProvider } from '../contexts/conversation_context'
 
 export type ConversationRouteProps = {
   conversation_id: number

package/src/screens/conversation_select_recipients/conversation_new_entry_screen.tsx

@@ -2,15 +2,15 @@ import { useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Button, Heading } from '../../components'
 import { DefaultLoading } from '../../components/page/loading'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useNewConversationEntry } from '../../hooks/use_new_conversation_entry'
+import { Haptic } from '../../utils/native_adapters'
 import type {
   ConversationSelectRecipientsParams,
   ConversationSelectRecipientsScreenProps,
 } from './types/screen_props'
-import { useNewConversationEntry } from '../../hooks/use_new_conversation_entry'
-import { Haptic } from '../../utils/native_adapters'
 
 type NewConversationStackParamList = {
   ConversationNewEntry: ConversationSelectRecipientsParams | undefined

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -2,13 +2,13 @@ import { useNavigation } from '@react-navigation/native'
 import { partition } from 'lodash'
 import React from 'react'
 import { SectionList, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading, Text } from '../../components'
-import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { GroupsGroupResource } from '../../types'
 import { GroupsRecipientRow } from './components/groups_recipient_row'
 import { RestrictedGroupRow } from './components/restricted_group_row'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 
 const SectionKey = {
   my: 'my',

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,13 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { Button, Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { Button, Heading } from '../../components'
+import { Haptic } from '../../utils/native_adapters'
 import { useServiceTypesWithTeams } from '../conversation_filter_recipients/hooks/use_service_types_with_teams'
 import { ServiceTypeWithTeams, TeamFilterTypes } from '../conversation_filter_recipients/types'
 import { TeamRecipientRow } from './components/team_recipient_row'
-import { Haptic } from '../../utils/native_adapters'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 
 export const ConversationSelectTeamsILeadRecipientsScreen = ({
   route,

package/src/screens/conversation_select_type_screen.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
-import { Haptic } from '../utils/native_adapters'
 import { AppName } from '../types/resources/app_name'
 import { GraphId } from '../types/resources/group_resource'
+import { Haptic } from '../utils/native_adapters'
 
 export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
   headerTitle: 'New conversation',

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

@@ -3,15 +3,15 @@ import React, { useCallback, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
 import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
+import { useCanCreateConversations } from '../../../hooks'
+import { useAppName } from '../../../hooks/use_app_name'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
-import { useCanCreateConversations } from '../../../hooks'
 import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'
-import { useAppName } from '../../../hooks/use_app_name'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
-import { Haptic } from '../../../utils/native_adapters'
-import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 import { ListHeaderActionButton } from './list_header_action_button'
 
 const ROW_PADDING_HORIZONTAL = 16

package/src/screens/design_system_screen.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native'
 import type { ViewStyle } from 'react-native'
-import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
 import {
   Avatar,
   AvatarGroup,
@@ -22,15 +21,16 @@ import {
   TextInlineButton,
   ImageAttachmentPreview,
 } from '../components/display'
+import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
+import BannerPrimitive from '../components/primitive/banner_primitive'
 import BlankState from '../components/primitive/blank_state_primitive'
+import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
   platformFontWeightMedium,
   Haptic,
 } from '../utils'
-import BannerPrimitive from '../components/primitive/banner_primitive'
-import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 
 // =================================
 // ====== Docs Utils ===============

package/src/screens/group_notification_settings_screen.tsx

@@ -6,8 +6,8 @@ import { Platform, StyleSheet, View } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
-import { useGroup } from './notification_settings/hooks/groups'
 import type { GroupNotificationLevelSelectScreenProps } from './group_notification_level_select_screen'
+import { useGroup } from './notification_settings/hooks/groups'
 
 type GroupNotificationSettingsStackParamList = {
   GroupNotificationLevelSelect: GroupNotificationLevelSelectScreenProps['route']['params']

package/src/screens/message_actions_screen.tsx

@@ -6,16 +6,16 @@ import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, View } from 'react-native'
 import { Text } from '../components'
 import { useReactionStyles } from '../components/conversation/message_reaction'
-import { REACTION_EMOJIS } from '../utils'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
+import { MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
+import { REACTION_EMOJIS } from '../utils'
 import { Clipboard, Haptic } from '../utils/native_adapters'
-import { MessageResource } from '../types'
-import { availableFeatures, useFeatures } from '../hooks/use_features'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],

package/src/screens/message_report/components/report_reason_list.tsx

@@ -1,13 +1,13 @@
+import { PlatformPressable } from '@react-navigation/elements'
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { PlatformPressable } from '@react-navigation/elements'
 import { Text } from '../../../components'
 import { useTheme, useCreateAndroidRippleColor } from '../../../hooks'
-import { Haptic } from '../../../utils/native_adapters'
 import {
   MESSAGE_REPORT_REASONS,
   MessageReportReason,
 } from '../../../types/resources/message_report'
+import { Haptic } from '../../../utils/native_adapters'
 
 const MESSAGE_REPORT_REASONS_LIST = Object.entries(MESSAGE_REPORT_REASONS).map(([key, label]) => ({
   key: key as MessageReportReason,

package/src/screens/message_report_screen.tsx

@@ -1,25 +1,25 @@
-import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'
-import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
+import { StaticScreenProps, useNavigation, StackActions } from '@react-navigation/native'
 import type {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import { StaticScreenProps, useNavigation, StackActions } from '@react-navigation/native'
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'
+import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spinner, Text, KeyboardView } from '../components'
-import BlankState from '../components/primitive/blank_state_primitive'
-import { useTheme } from '../hooks'
-import { useReportMessage } from '../hooks/use_report_message'
 import {
   HeaderDismissButton,
   HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import BlankState from '../components/primitive/blank_state_primitive'
+import { useTheme } from '../hooks'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useReportMessage } from '../hooks/use_report_message'
 import { MessageResource } from '../types'
 import { MessageReportReason } from '../types/resources/message_report'
+import { platformFontWeightBold } from '../utils'
 import { MessagePreview } from './message_report/components/message_preview'
 import { ReportReasonList } from './message_report/components/report_reason_list'
-import { platformFontWeightBold } from '../utils'
 
 const MAX_DETAIL_LENGTH = 500
 

package/src/screens/not_found.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Button, Text } from '@react-navigation/elements'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
 export function NotFound() {

package/src/screens/notification_settings/hooks/groups.ts

@@ -4,8 +4,8 @@ import { getRequestQueryKey, useApiClient } from '../../../hooks'
 import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
 import { ApiCollection, ApiResource } from '../../../types'
 import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
-import { throwResponseError } from '../../../utils/response_error'
 import { updateRecordInPagesData } from '../../../utils'
+import { throwResponseError } from '../../../utils/response_error'
 
 export const getGroupsRequestArgs = () => ({
   url: '/me/groups',

package/src/screens/notification_settings_screen.tsx

@@ -2,10 +2,10 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect, type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Heading, Icon, Text } from '../components'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { isDefined } from '../types'
 import { useGroups } from './notification_settings/hooks/groups'
 import { useChatTypes } from './preferred_app/hooks/use_chat_types'

package/src/screens/preferred_app_selection_screen.tsx

@@ -5,9 +5,9 @@ import React, { type PropsWithChildren } from 'react'
 import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useApiClient, useTheme } from '../hooks'
-import { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'
 import { useAppName } from '../hooks/use_app_name'
 import { throwResponseError } from '../utils/response_error'
+import { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'
 
 export type PreferredAppSelectionScreenProps = StaticScreenProps<{
   chatTypeId: number | string

package/src/screens/send_giphy_screen.tsx

@@ -2,8 +2,8 @@ import { StackActions, StaticScreenProps, useNavigation } from '@react-navigatio
 import React from 'react'
 import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Button, IconButton, IconString, TextButton } from '../components'
-import BlankState from '../components/primitive/blank_state_primitive'
 import { DefaultLoading } from '../components/page/loading'
+import BlankState from '../components/primitive/blank_state_primitive'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useTheme } from '../hooks'
 import { useGiphy } from '../hooks/use_giphy'

package/src/screens/team_conversation_screen.tsx

@@ -1,12 +1,12 @@
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
+import { DefaultLoading } from '../components/page/loading'
 import { useApiClient } from '../hooks'
 import {
   buildTeamAndPlanParams,
   findOrCreateServicesConversation,
 } from '../hooks/services/use_find_or_create_services_conversation'
-import { DefaultLoading } from '../components/page/loading'
 
 export type TeamConversationRouteProps = {
   plan_id?: number

package/src/utils/__tests__/convert_attachments_for_create.test.ts

@@ -1,9 +1,9 @@
-import { convertAttachmentsForCreate } from '../convert_attachments_for_create'
+import { DenormalizedExpandedLinkAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
 import {
   DenormalizedMessageAttachmentResourceForCreate,
   DenormalizedGiphyAttachmentResourceForCreate,
 } from '../../types/resources/denormalized_attachment_resource_for_create'
-import { DenormalizedExpandedLinkAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import { convertAttachmentsForCreate } from '../convert_attachments_for_create'
 
 describe('convertAttachmentsForCreate', () => {
   it('converts MessageAttachment correctly', () => {

package/src/utils/cache/messages_cache.ts

@@ -1,11 +1,11 @@
 import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
 import { ApiCollection, ApiResource, MessageResource } from '../../types'
-import { deleteRecordInPagesData } from './page_mutations'
-import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
 import { JoltReactionEvent } from '../../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../request/get_messages'
-import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
+import { deleteRecordInPagesData } from './page_mutations'
 
 export function updateCacheWithMessage(
   queryClient: QueryClient,