@planningcenter/chat-react-native 3.2.0-rc.4 → 3.2.0-rc.5

package/src/hooks/use_giphy.ts

@@ -0,0 +1,97 @@
+import { useCallback, useContext, useEffect, useState } from 'react'
+import { DenormalizedGiphyAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+import { ChatContext } from '../contexts/chat_context'
+
+interface GiphyGif {
+  id: string
+  url: string
+  title: string
+  images: {
+    original: GiphyVariant
+    fixed_height: GiphyVariant
+    fixed_height_still: GiphyVariant
+    fixed_height_downsampled: GiphyVariant
+    fixed_width: GiphyVariant
+    fixed_width_still: GiphyVariant
+    fixed_width_downsampled: GiphyVariant
+  }
+}
+
+interface GiphyVariant {
+  url: string
+  width: number
+  height: number
+  size: string
+  frames: string
+}
+
+export function useGiphy(term: string = '') {
+  const { giphyApiKey } = useContext(ChatContext)
+  const [isSearching, setIsSearching] = useState(false)
+  const [results, setResults] = useState<DenormalizedGiphyAttachmentResourceForCreate[]>([])
+  const [resultIndex, setResultIndex] = useState(0)
+  const result = results[resultIndex]
+
+  useEffect(() => {
+    if (!giphyApiKey || !term) {
+      setResults([])
+      return
+    }
+
+    setIsSearching(true)
+    fetch(`https://api.giphy.com/v1/gifs/search?api_key=${giphyApiKey}&q=${term}&limit=20&rating=g`)
+      .then(response => response.json())
+      .then(data => {
+        const originalGiphys: GiphyGif[] = data.data
+        const denormalizedGiphys = denormalizeGiphys(term, originalGiphys)
+
+        setResults(denormalizedGiphys)
+        setResultIndex(0)
+      })
+      .catch(error => {
+        console.error('Error fetching gifs:', error)
+      })
+      .finally(() => {
+        setIsSearching(false)
+      })
+  }, [giphyApiKey, term])
+
+  const nextResult = useCallback(() => {
+    setResultIndex(oldResultIndex => (oldResultIndex < results.length - 1 ? oldResultIndex + 1 : 0))
+  }, [results.length])
+
+  const prevResult = useCallback(() => {
+    setResultIndex(oldResultIndex => (oldResultIndex > 0 ? oldResultIndex - 1 : results.length - 1))
+  }, [results.length])
+
+  return {
+    isSearching,
+    result,
+    resultIndex,
+    nextResult,
+    prevResult,
+  }
+}
+
+function denormalizeGiphys(
+  term: string,
+  giphys: GiphyGif[]
+): DenormalizedGiphyAttachmentResourceForCreate[] {
+  return giphys.map(giphy => ({
+    type: 'giphy',
+    id: giphy.id,
+    title: term,
+    original_giphy_title: giphy.title,
+    title_link: giphy.url,
+    thumb_url: giphy.images.fixed_width.url,
+    giphy: {
+      original: giphy.images.original,
+      fixed_height: giphy.images.fixed_height,
+      fixed_height_still: giphy.images.fixed_height_still,
+      fixed_height_downsampled: giphy.images.fixed_height_downsampled,
+      fixed_width: giphy.images.fixed_width,
+      fixed_width_still: giphy.images.fixed_width_still,
+      fixed_width_downsampled: giphy.images.fixed_width_downsampled,
+    },
+  }))
+}

package/src/hooks/use_message_create.ts

@@ -0,0 +1,55 @@
+import { InfiniteData, useMutation } from '@tanstack/react-query'
+import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
+import { useApiClient } from './use_api_client'
+import { ApiCollection, ApiResource, MessageResource } from '../types'
+import { queryClient } from '../contexts/api_provider'
+import { updateOrCreateRecordInPagesData } from '../utils'
+import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+
+interface Props {
+  conversationId: number
+}
+
+export function useMessageCreate({ conversationId }: Props) {
+  const apiClient = useApiClient()
+  const mutation = useMutation({
+    mutationFn: ({
+      text,
+      attachments,
+    }: {
+      text: string
+      attachments?: DenormalizedAttachmentResourceForCreate[]
+    }) => {
+      const requestParams = getMessagesRequestArgs({ conversation_id: conversationId })
+      const fieldsWithValueJoined = Object.fromEntries(
+        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
+      )
+
+      return apiClient.chat.post<ApiResource<MessageResource>>({
+        url: `/me/conversations/${conversationId}/messages`,
+        data: {
+          ...requestParams.data,
+          data: {
+            type: 'Message',
+            attributes: { text, ...(attachments ? { attachments } : {}) },
+          },
+          fields: fieldsWithValueJoined,
+        },
+      })
+    },
+    onSuccess: (result: ApiResource<MessageResource>) => {
+      const updatedMessage = result.data
+      type QueryData = InfiniteData<ApiCollection<MessageResource>>
+      const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+
+      queryClient.setQueryData<QueryData>(queryKey, data =>
+        updateOrCreateRecordInPagesData({
+          data,
+          record: updatedMessage,
+        })
+      )
+    },
+  })
+
+  return mutation
+}

package/src/navigation/index.tsx

@@ -19,6 +19,7 @@ import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
+import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { HeaderRightButton } from './header'
@@ -123,6 +124,10 @@ export const ChatStack = createNativeStackNavigator({
         presentation: 'modal',
       },
     },
+    SendGiphy: {
+      screen: SendGiphyScreen,
+      options: SendGiphyScreenOptions,
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

package/src/screens/conversation_screen.tsx

@@ -18,6 +18,7 @@ import { useConversationMessages } from '../hooks/use_conversation_messages'
 type ConversationRouteProps = {
   conversation_id: number
   chat_group_graph_id?: string
+  clear_input?: boolean
 }
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
@@ -57,7 +58,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         />
         <MessageForm.Root conversation={conversation}>
           {/* <MessageForm.AttachmentPicker /> */}
-          {/* <MessageForm.Commands /> */}
+          <MessageForm.Commands />
           <MessageForm.TextInput />
           <MessageForm.SubmitButton />
         </MessageForm.Root>

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
 

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,
+    },
+  })
+}