@planningcenter/chat-react-native 1.7.0-rc.0 → 2.0.0-rc.0

package/src/components/display/keyboard_view.tsx

@@ -0,0 +1,69 @@
+import { useTheme as useNavigationTheme } from '@react-navigation/native'
+import React, { useMemo, useState } from 'react'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  ViewProps,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export function KeyboardView({ children }: ViewProps) {
+  const styles = useStyles()
+
+  const { height } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
+  const [pageSheetGap, setPageSheetGap] = useState<number>(0)
+  const keyboardVerticalOffset = useMemo(
+    () => pageSheetGap + insets.top - insets.bottom,
+    [pageSheetGap, insets.top, insets.bottom]
+  )
+
+  return (
+    <View
+      style={styles.pageGapView}
+      onLayout={event => {
+        const { height: viewHeight } = event.nativeEvent.layout
+        setPageSheetGap(height - viewHeight - insets.top)
+      }}
+    >
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={keyboardVerticalOffset}
+        behavior={Platform.select({ ios: 'padding' })}
+        style={styles.container}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const navigationTheme = useNavigationTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+    pageGapView: {
+      flex: 1,
+    },
+    keyboardView: {
+      flex: 1,
+    },
+    listContainer: {
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+    textInputContainer: {
+      borderTopWidth: 1,
+      padding: 12,
+      backgroundColor: navigationTheme.colors.card,
+    },
+    textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
+  })
+}

package/src/index.tsx

@@ -1,6 +1,10 @@
-export * from './components'
-export * from './contexts'
-export * from './hooks'
-export * from './screens'
-export * from './utils'
-export * from './navigation'
+export { ChatProvider, ChatContext, CreateChatThemeProps } from './contexts'
+export { DesignSystemScreen } from './screens'
+export { ChatStack } from './navigation'
+export {
+  TemporaryDefaultColorsType,
+  ChatAdapters,
+  ClipboardAdapter,
+  Session,
+  Client,
+} from './utils'

package/src/screens/conversation_screen.tsx

@@ -1,19 +1,17 @@
-import { PlatformPressable } from '@react-navigation/elements'
 import {
   StaticScreenProps,
   useNavigation,
   useTheme as useNavigationTheme,
 } from '@react-navigation/native'
-import colorFunction from 'color'
 import React, { useEffect } from 'react'
-import { FlatList, StyleSheet, TextInput, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { MessageReaction } from '../components/conversation/message_reaction'
-import { Avatar, Text } from '../components/display'
-import { useTheme } from '../hooks'
+import { FlatList, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Message } from '../components/conversation/message'
+import { MessageForm } from '../components/conversation/message_form'
+import { KeyboardView } from '../components/display/keyboard_view'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useSuspenseGet } from '../hooks/use_suspense_api'
-import { ConversationResource, MessageResource } from '../types'
+import { ConversationResource } from '../types'
 
 export type ConversationScreenProps = StaticScreenProps<{
   conversation_id: string
@@ -43,130 +41,47 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   }, [conversation, conversation_id, navigation])
 
   return (
-    <SafeAreaView style={styles.container} edges={['top', 'bottom', 'left', 'right']}>
-      <FlatList
-        inverted
-        contentContainerStyle={styles.listContainer}
-        refreshing={isRefetching}
-        onRefresh={refetch}
-        data={messages}
-        keyExtractor={item => item.id}
-        renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}
-        onEndReached={() => fetchNextPage()}
-      />
-      <View style={styles.textInputContainer}>
-        <TextInput
-          aria-disabled={true}
-          placeholder="Send a message"
-          onChangeText={() => console.log('TODO: Implement sending a message')}
-          value=""
-          style={styles.textInput}
+    <View style={styles.container}>
+      <KeyboardView style={styles.keyboardView}>
+        <FlatList
+          inverted
+          contentContainerStyle={styles.listContainer}
+          refreshing={isRefetching}
+          onRefresh={refetch}
+          data={messages}
+          keyExtractor={item => item.id}
+          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}
+          onEndReached={() => fetchNextPage()}
         />
-      </View>
-    </SafeAreaView>
+        <MessageForm.Root conversation={conversation}>
+          {/* <MessageForm.AttachmentPicker /> */}
+          {/* <MessageForm.Commands /> */}
+          <MessageForm.TextInput />
+          <MessageForm.SubmitButton />
+        </MessageForm.Root>
+      </KeyboardView>
+    </View>
   )
 }
 
 const useStyles = () => {
   const navigationTheme = useNavigationTheme()
+  const { bottom } = useSafeAreaInsets()
 
   return StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       backgroundColor: navigationTheme.colors.card,
+      paddingBottom: bottom,
+    },
+    keyboardView: {
+      flex: 1,
     },
     listContainer: {
       gap: 12,
       paddingHorizontal: 16,
       paddingVertical: 12,
     },
-    textInputContainer: {
-      borderTopWidth: 1,
-      padding: 12,
-      backgroundColor: navigationTheme.colors.card,
-    },
-    textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
-  })
-}
-
-function Message(props: MessageResource & { conversation_id: string }) {
-  const { text, conversation_id, reactionCounts } = props
-  const styles = useMessageStyles(props)
-  const navigation = useNavigation()
-  const handleMessagePress = () => {
-    navigation.navigate('MessageActions', {
-      message_id: props.id,
-      conversation_id,
-    })
-  }
-  // TODO: open the reaction screen to show who reacted
-  const handleReactionPress = handleMessagePress
-
-  if (!text) return null
-
-  return (
-    <View style={styles.message}>
-      {!props.mine && (
-        <View style={styles.messageAuthor}>
-          <Avatar size={'md'} sourceUri={props.author.avatar} />
-        </View>
-      )}
-      <View style={styles.messageContent}>
-        {!props.mine && (
-          <Text variant="tertiary" style={styles.authorName}>
-            {props.author.name}
-          </Text>
-        )}
-        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
-          <Text style={styles.messageText}>{text}</Text>
-        </PlatformPressable>
-        <View style={styles.messageReactions}>
-          {reactionCounts.map(reaction => (
-            <MessageReaction
-              key={reaction.value}
-              reaction={reaction}
-              onPress={handleReactionPress}
-            />
-          ))}
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const useMessageStyles = ({ mine }: MessageResource) => {
-  const { colors } = useTheme()
-  const activeColor = colorFunction(colors.interaction).alpha(0.2).string()
-
-  return StyleSheet.create({
-    message: {
-      gap: 8,
-      flexDirection: mine ? 'row-reverse' : 'row',
-    },
-    messageContent: {
-      gap: 8,
-      flexShrink: 1,
-    },
-    messageAuthor: {
-      flexDirection: 'row',
-      gap: 8,
-    },
-    authorName: {},
-    authorAvatar: {},
-    messageBubble: {
-      backgroundColor: mine ? activeColor : colors.fillColorNeutral070,
-      borderRadius: 12,
-      paddingVertical: 6,
-      paddingHorizontal: 8,
-    },
-    messageText: {
-      color: colors.textColorDefaultPrimary,
-    },
-    messageReactions: {
-      flexDirection: 'row',
-      gap: 4,
-      justifyContent: mine ? 'flex-end' : 'flex-start',
-    },
   })
 }

package/src/screens/message_actions_screen.tsx

@@ -1,18 +1,19 @@
+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 colorFunction from 'color'
-import React, { useContext } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { TextButton } from '../components'
+import React, { useCallback, useContext } 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 { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { updateRecordInPagesData } from '../utils'
-import { REACTION_EMOJIS } from '../components/conversation/message_reaction'
+import { Clipboard } from '../utils/native_adapters'
 
 export const ReactScreenOptions: NativeStackNavigationOptions = {
   presentation: 'formSheet',
@@ -34,39 +35,61 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
   const queryClient = useQueryClient()
   const styles = useStyles()
 
-  const { messages, queryKey } = useConversationMessages(
+  const { messages, queryKey, refetch } = useConversationMessages(
     { conversation_id },
     { refetchOnMount: false }
   )
   const message = messages.find(m => m.id === message_id)
-  const reactionValues =
-    message?.reactionCounts.filter(reaction => reaction.mine).map(reaction => reaction.value) || []
-
-  const handleReactionPress = (value: keyof typeof REACTION_EMOJIS) => {
-    const present = reactionValues.includes(value)
-    const requestParams = getMessagesRequestArgs({ conversation_id })
-
-    // Value has already been updated
-    const endpoint = !present ? 'react' : 'unreact'
-    const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`
-    const fieldsWithValueJoined = Object.fromEntries(
-      Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
-    )
-
-    return client.post({
-      url,
-      data: {
-        ...requestParams.data,
+  const myReactions = message?.reactionCounts
+    .filter(reaction => reaction.mine)
+    .map(reaction => reaction.value)
+
+  const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {
+    return {
+      value: value as ReactionCountResource['value'],
+      emoji,
+      mine: myReactions?.includes(value as ReactionCountResource['value']),
+    }
+  })
+
+  const handleCopyPress = (text?: string) => {
+    Clipboard.setStringAsync(text || '')
+    navigation.goBack()
+  }
+
+  const handleReactionPress = useCallback(
+    ({ value, mine }: { value: keyof typeof REACTION_EMOJIS; mine?: boolean }) => {
+      const requestParams = getMessagesRequestArgs({ conversation_id })
+
+      // Value has already been updated
+      const endpoint = !mine ? 'react' : 'unreact'
+      const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`
+      const fieldsWithValueJoined = Object.fromEntries(
+        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
+      )
+
+      return client.post({
+        url,
         data: {
-          type: 'Message',
-          attributes: { value: value },
+          ...requestParams.data,
+          data: {
+            type: 'Message',
+            attributes: { value: value },
+          },
+          fields: fieldsWithValueJoined,
         },
-        fields: fieldsWithValueJoined,
-      },
-    })
-  }
+      })
+    },
+    [client, conversation_id, message_id]
+  )
+
+  const deleteMessage = useCallback(() => {
+    const url = `/me/conversations/${conversation_id}/messages/${message_id}/`
 
-  const { mutate, isPending } = useMutation({
+    return client.delete({ url })
+  }, [client, conversation_id, message_id])
+
+  const { mutate: handleReaction, isPending } = useMutation({
     mutationFn: handleReactionPress,
     onSuccess: (result: ApiResource<MessageResource>) => {
       const updatedMessage = result.data
@@ -80,77 +103,92 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
       )
       navigation.goBack()
     },
+    onError: () => {
+      Alert.alert('Oops', 'We were unable to react to this message. Please try again.')
+    },
   })
 
-  const myReactions = message?.reactionCounts
-    .filter(reaction => reaction.mine)
-    .map(reaction => reaction.value)
-
-  const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {
-    return {
-      value: value as ReactionCountResource['value'],
-      emoji,
-      mine: myReactions?.includes(value as ReactionCountResource['value']),
-    }
+  const { mutate: handleDeleteMessage } = useMutation({
+    mutationFn: deleteMessage,
+    onSuccess: () => {
+      refetch()
+      navigation.goBack()
+    },
+    onError: () => {
+      Alert.alert('Oops', 'We were unable to delete this message. Please try again.')
+    },
   })
 
   return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <View style={styles.container}>
       <View style={styles.reactionList}>
-        {availableReactions.map(({ value, emoji, mine }, index) => (
-          <TextButton
-            key={index}
-            onPress={() => mutate(value)}
-            style={({ pressed }) => [
-              styles.reaction,
-              mine && styles.reactionActive,
-              pressed && styles.pressed,
-            ]}
-            variant="plain"
-            disabled={isPending}
-          >
-            {emoji}
-          </TextButton>
+        {availableReactions.map((reaction, index) => (
+          <Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)} />
         ))}
       </View>
       <View style={styles.actions}>
         <View style={styles.actionButton}>
-          <TextButton onPress={() => navigation.goBack()} disabled={isPending}>
-            Copy
-          </TextButton>
-          <TextButton appearance="danger" onPress={() => navigation.goBack()} disabled={isPending}>
+          <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>
+          <TextButton
+            appearance="danger"
+            onPress={() => handleDeleteMessage()}
+            disabled={isPending}
+          >
             Delete
           </TextButton>
         </View>
       </View>
-    </SafeAreaView>
+    </View>
+  )
+}
+
+const Reaction = ({
+  reaction,
+  onPress,
+}: {
+  reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean | undefined }
+  onPress: () => void
+}) => {
+  const styles = useStyles()
+  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })
+
+  return (
+    <PlatformPressable
+      key={reaction.value}
+      style={[reactionStyles.reaction, styles.reaction]}
+      onPress={onPress}
+    >
+      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+    </PlatformPressable>
   )
 }
 
 const useStyles = () => {
   const theme = useTheme()
+  const { height } = useWindowDimensions()
+  const { bottom } = useSafeAreaInsets()
+  const btnBorderWidth = 1
+  const baseSize = 44
+  const reactionBtnSize = Platform.select({
+    ios: baseSize,
+    android: baseSize + btnBorderWidth * 2,
+  })
+
   return StyleSheet.create({
     container: {
       justifyContent: 'flex-start',
       paddingTop: 12,
+      paddingBottom: bottom,
       width: '100%',
       backgroundColor: theme.colors.fillColorNeutral100Inverted,
+      height,
     },
     reaction: {
-      padding: 12,
-      borderRadius: 24,
-      includeFontPadding: false,
-      textAlignVertical: 'center',
-      fontSize: 28,
-      color: '#ffffff',
-      backgroundColor: theme.colors.fillColorNeutral050Base,
-    },
-    reactionActive: {
-      borderColor: theme.colors.interaction,
-      backgroundColor: colorFunction(theme.colors.interaction).alpha(0.2).string(),
-    },
-    pressed: {
-      opacity: 0.5,
+      height: reactionBtnSize,
+      width: reactionBtnSize,
+      borderWidth: btnBorderWidth,
+      borderRadius: 32,
+      justifyContent: 'center',
     },
     reactionList: {
       justifyContent: 'center',
@@ -159,7 +197,6 @@ const useStyles = () => {
       flexDirection: 'row',
       borderBottomColor: theme.colors.fillColorNeutral040,
       borderBottomWidth: 1,
-      flex: 1,
     },
     actions: { flex: 1 },
     actionButton: { padding: 12, paddingBottom: 100, gap: 12 },

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './space'
 export * from './client'
 export * from './uri'
 export * from './cache'
+export * from './native_adapters'

package/src/utils/native_adapters/clipboard.ts

@@ -0,0 +1,9 @@
+export class ClipboardAdapter {
+  getStringAsync: () => Promise<string>
+  setStringAsync: (_: string) => Promise<void>
+
+  constructor(methods: ClipboardAdapter) {
+    this.getStringAsync = methods.getStringAsync
+    this.setStringAsync = methods.setStringAsync
+  }
+}

package/src/utils/native_adapters/configuration.ts

@@ -0,0 +1,25 @@
+import { ClipboardAdapter } from './clipboard'
+
+type ChatConfigurations = {
+  clipboard: ClipboardAdapter
+}
+
+export class ChatAdapters {
+  static configure(configurations: ChatConfigurations) {
+    Clipboard = configurations.clipboard
+  }
+}
+
+const methodMissing = () => {
+  console.warn('ChatAdapters.configure() must be called before using any adapters')
+}
+
+let Clipboard: ClipboardAdapter = new ClipboardAdapter({
+  getStringAsync: async () => {
+    methodMissing()
+    return ''
+  },
+  setStringAsync: async (_: string) => methodMissing(),
+})
+
+export { Clipboard }

package/src/utils/native_adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './clipboard'
+export * from './configuration'