@planningcenter/chat-react-native 2.1.1 → 2.2.0-rc.0

package/src/navigation/index.tsx

@@ -1,21 +1,23 @@
-import React from 'react'
+import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
 import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
   NativeStackHeaderLeftProps,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
-import { NotFound } from '../screens/not_found'
-import { ScreenLayout } from './screenLayout'
-import { ConversationsScreen } from '../screens/conversations_screen'
-import { ConversationScreen } from '../screens/conversation_screen'
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
+import React from 'react'
 import { Icon } from '../components'
+import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
+import { ConversationScreen } from '../screens/conversation_screen'
+import { ConversationsScreen } from '../screens/conversations_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
+import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
+import { HeaderRightButton } from './header'
+import { ScreenLayout } from './screenLayout'
 
 export const ChatStack = createNativeStackNavigator({
   screenOptions: {
@@ -44,6 +46,18 @@ export const ChatStack = createNativeStackNavigator({
     Conversation: {
       screen: ConversationScreen,
     },
+    ConversationDetails: {
+      screen: ConversationDetailsScreen,
+      options: ({ navigation }) => ({
+        presentation: 'modal',
+        title: 'Conversation details',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton {...props} onPress={navigation.goBack}>
+            Done
+          </HeaderRightButton>
+        ),
+      }),
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

package/src/screens/conversation_details_screen.tsx

@@ -0,0 +1,205 @@
+import {
+  StaticScreenProps,
+  useNavigation,
+  useTheme as useNavigationTheme,
+} from '@react-navigation/native'
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { FlatList, StyleSheet, TextInput, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'
+import { useSuspenseGet, useTheme } from '../hooks'
+import {
+  useConversation,
+  useConversationMute,
+  useConversationUpdate,
+} from '../hooks/use_conversation'
+import { MemberResource } from '../types'
+import { HeaderRightButton } from '../navigation/header'
+
+export type ConversationDetailsScreenProps = StaticScreenProps<{
+  conversation_id: string
+}>
+
+export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: conversation } = useConversation(route.params)
+  const canUpdate = conversation.memberAbility?.canUpdate
+
+  const { data: members } = useSuspenseGet<MemberResource[]>({
+    url: `/me/conversations/${route.params.conversation_id}/members`,
+    data: {
+      include: ['person'],
+      fields: {
+        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],
+      },
+    },
+  })
+
+  const { muted, setMuted } = useConversationMute(route.params)
+  const { mutate: saveTitle } = useConversationUpdate(route.params)
+  const [title, setTitle] = useState(conversation.title)
+  const HeaderRight = useCallback(() => {
+    return (
+      <HeaderRightButton
+        onPress={() => {
+          saveTitle({ title })
+          navigation.goBack()
+        }}
+      >
+        Done
+      </HeaderRightButton>
+    )
+  }, [navigation, saveTitle, title])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: HeaderRight,
+    })
+  }, [HeaderRight, navigation])
+
+  return (
+    <View style={styles.container}>
+      <SectionList>
+        <View style={styles.titleContainer}>
+          <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
+            <Text variant="tertiary">Title</Text>
+            {!canUpdate && <Icon name="general.lock" />}
+          </View>
+          <TextInput
+            editable={canUpdate}
+            onChangeText={setTitle}
+            style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
+            value={title}
+          />
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader>Settings</SectionListHeader>
+        <View style={styles.muteContainer}>
+          <Text variant="plain" style={styles.muteText}>
+            Mute
+          </Text>
+          <Switch value={muted} onChange={() => setMuted(!muted)} />
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader divider={false}>Members</SectionListHeader>
+        <FlatList
+          data={members}
+          renderItem={({ item }) => (
+            <View style={styles.member}>
+              <Avatar sourceUri={item.avatar} />
+              <View style={styles.memberBody}>
+                <Text style={styles.memberName}>{item.name}</Text>
+                <View style={styles.memberBadges}>
+                  {item.badges?.map((badge, index) => (
+                    <View key={index} style={styles.memberBadge}>
+                      <Badge label={badge.title} />
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </View>
+          )}
+          keyExtractor={item => item.id}
+          contentContainerStyle={styles.listContainer}
+        />
+      </SectionList>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 16,
+      paddingHorizontal: 16,
+      backgroundColor: theme.colors.fillColorNeutral080,
+      paddingBottom: bottom,
+      gap: 16,
+    },
+    listContainer: {
+      gap: 12,
+    },
+    member: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    memberBody: {
+      gap: 4,
+    },
+    memberName: {
+      lineHeight: 16,
+    },
+    memberBadges: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    memberBadge: {},
+    muteContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    muteText: {
+      lineHeight: 20,
+    },
+    titleContainer: {},
+    titleLabel: {},
+    titleLabelContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    titleInput: {
+      color: theme.colors.textColorDefaultPrimary,
+    },
+    titleInputDisabled: { opacity: 0.7 },
+  })
+}
+
+const SectionList = ({ children }: PropsWithChildren) => {
+  const styles = useSectionListStyles()
+
+  return <View style={styles.container}>{children}</View>
+}
+
+const SectionListHeader = ({
+  children,
+  divider = true,
+}: PropsWithChildren & { divider?: boolean }) => {
+  const styles = useSectionListStyles()
+
+  return (
+    <Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
+      {children}
+    </Heading>
+  )
+}
+
+const useSectionListStyles = () => {
+  const theme = useTheme()
+  const navigationTheme = useNavigationTheme()
+
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+      backgroundColor: navigationTheme.colors.card,
+      borderRadius: 8,
+      flexDirection: 'column',
+      gap: 8,
+    },
+    heading: {
+      paddingBottom: 12,
+    },
+    headingDivider: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/conversation_screen.tsx

@@ -1,44 +1,46 @@
+import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   StaticScreenProps,
   useNavigation,
   useTheme as useNavigationTheme,
+  useRoute,
 } from '@react-navigation/native'
-import React, { useEffect } from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
+import React, { useCallback, useEffect } from 'react'
+import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Icon, Text } from '../components'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { KeyboardView } from '../components/display/keyboard_view'
+import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
-import { useSuspenseGet } from '../hooks/use_suspense_api'
-import { ConversationResource } from '../types'
 
-export type ConversationScreenProps = StaticScreenProps<{
+type ConversationRouteProps = {
   conversation_id: string
-  chat_group_graph_id: string
-}>
+  chat_group_graph_id?: string
+}
+
+export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
-  const navigation = useNavigation()
-  const { conversation_id } = route.params
   const styles = useStyles()
+  const navigation = useNavigation()
 
-  const { data: conversation } = useSuspenseGet<ConversationResource>({
-    url: `/me/conversations/${conversation_id}`,
-    data: {
-      fields: {
-        Conversation: ['title'],
-      },
-    },
-  })
-
+  const { conversation_id } = route.params
+  const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
   })
 
+  // Seems to be necessary to define this way so we get the route picked up
+  const headerTitle = useCallback(
+    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,
+    []
+  )
+
   useEffect(() => {
-    navigation.setOptions({ title: conversation?.title })
-  }, [conversation, conversation_id, navigation])
+    navigation.setOptions({ headerTitle, title: conversation?.title })
+  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])
 
   return (
     <View style={styles.container}>
@@ -64,6 +66,49 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   )
 }
 
+const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
+  const styles = usePressableHeaderStyle()
+  const navigation = useNavigation()
+
+  const route = useRoute() as ConversationScreenProps['route']
+
+  const { data: conversation } = useConversation(route.params)
+  const badge = conversation.badges?.[0]
+  const subtitle = [badge?.pcoResourceType, badge?.text].filter(f => f).join(': ')
+
+  return (
+    <PlatformPressable
+      style={styles.container}
+      onPress={() =>
+        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })
+      }
+    >
+      <View style={styles.titleWrapper}>
+        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>
+        <Icon name="general.downChevron" size={12} />
+      </View>
+      <Text variant="tertiary">{subtitle}</Text>
+    </PlatformPressable>
+  )
+}
+
+const usePressableHeaderStyle = () => {
+  return StyleSheet.create({
+    container: {
+      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
+    },
+    titleWrapper: {
+      alignItems: 'center',
+      columnGap: 8,
+      flexDirection: 'row',
+    },
+    title: {
+      padding: 0,
+      margin: 0,
+    },
+  })
+}
+
 const useStyles = () => {
   const navigationTheme = useNavigationTheme()
   const { bottom } = useSafeAreaInsets()

package/src/screens/message_actions_screen.tsx

@@ -2,13 +2,13 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Text, TextButton } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
-import { ChatContext } from '../contexts'
 import { useTheme } from '../hooks'
+import { useApiClient } from '../hooks/use_api_client'
 import { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
@@ -31,7 +31,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
   const navigation = useNavigation()
   const { conversation_id, message_id } = route.params
 
-  const { client } = useContext(ChatContext)
+  const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const styles = useStyles()
 
@@ -68,7 +68,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
       )
 
-      return client.post({
+      return apiClient.chat.post({
         url,
         data: {
           ...requestParams.data,
@@ -80,14 +80,14 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
         },
       })
     },
-    [client, conversation_id, message_id]
+    [apiClient, conversation_id, message_id]
   )
 
   const deleteMessage = useCallback(() => {
     const url = `/me/conversations/${conversation_id}/messages/${message_id}/`
 
-    return client.delete({ url })
-  }, [client, conversation_id, message_id])
+    return apiClient.chat.delete({ url })
+  }, [apiClient, conversation_id, message_id])
 
   const { mutate: handleReaction, isPending } = useMutation({
     mutationFn: handleReactionPress,

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, RequestData } from './types'
+import { Accumulator, GetRequest, PostRequest, RequestData } from './types'
 
 export type MakeRequestArgs = {
   action: 'GET' | 'POST' | 'PATCH' | 'DELETE'
@@ -112,3 +112,23 @@ export const throwErrorIfQueryParams = url => {
 
   return Promise.resolve()
 }
+
+export const transformGetToPost = (args: GetRequest): PostRequest => {
+  const { data, ...rest } = args
+  const { fields, include } = data
+  const fieldsArray = Object.entries(fields).map(([key, value]) => {
+    if (Array.isArray(value)) {
+      return [key, value.join(',')]
+    }
+
+    return [key, value]
+  })
+
+  return {
+    ...rest,
+    data: {
+      fields: Object.fromEntries(fieldsArray),
+      include,
+    },
+  }
+}